Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » javascript и DOM

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки

Открыть новую тему     Написать ответ в эту тему

kosorikov1

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
есть html:
<tr class="imPreview" id="rowPreview_1>" style="display:none;">
                        <td colspan="10">
                            <div class="dhtmlgoodies_panel">бла-бла</div>
                            <div class="dhtmlgoodies_panel">
                                <div class="label_dimension">Dimension: </div>
                            </div>
                            <div class="dhtmlgoodies_panel">бла-бла</div>
                            
 
                            <div class="crop_content"></div>
                        </td>
</tr>
нужно:  
1. в первый     <div class="dhtmlgoodies_panel"> добавить <div id="dhtmlgoodies_xpPane">так чтобы бла-бла были внутри него. делаю:

Код:
 
 var pElt = this.document.getElementById("rowPreview_1");
var newElem=pElt.firstChild;alert(newElem);
                    newElem=newElem.firstChild;  
                    newElem=newElem.createElement('DIV');
                    newElem.id="dhtmlgoodies_xpPane";
 

 
но почему-то ничего не добавляется. А IE пишет newElem=newElem.createElement('DIV'); объект не поддерживает это св-во или метод
firebag newElem is null
2. в <div class="crop_content"></div> добавить <div id="imageContainer">
    <img src="demo-images/nature.jpg" width="600" height="450" alt="" id="image_cropping">
</div>
делаю:
Код:
 
var elems = pElt.getElementsByTagName('DIV');
 
                    for(var j=0; j<elems.length; j++)  
                        {
                            if(elems[j].className == 'crop_content'){
                                                                    newElem=elems[j].createElement('DIV');
                                                                    newElem.id="imageContainer";
                                                                    newElem.innerHTML('<img src="'+imPath+'" />');
                                                                    }
                        }
 
 
                
 
var elems = pElt.getElementsByTagName('DIV'); - тут тоже самое
 
а как вырулить не пойму((

Всего записей: 102 | Зарегистр. 19-11-2009 | Отправлено: 18:49 02-03-2011
S0ldier



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
kosorikov1
HTML:

Код:
<table>
<tr class="imPreview">  
<td colspan="10" id="rowPreview_1">  
<div class="dhtmlgoodies_panel"></div>  
<div class="dhtmlgoodies_panel">  
<div class="label_dimension">Dimension: </div>  
</div>  
<div class="dhtmlgoodies_panel">бла-бла</div>  
<div class="crop_content"></div>  
</td>  
</tr>
</table>

 
1:

Код:
var pElt = document.getElementById("rowPreview_1").firstChild;
var text = document.createTextNode("бла-бла");
                     
newElem=document.createElement('DIV');  
newElem.id="dhtmlgoodies_xpPane";
newElem.appendChild(text);
pElt.appendChild(newElem);

 
2:

Код:
var pElt = document.getElementById("rowPreview_1");
var elems = pElt.getElementsByTagName('DIV');  
for(var j=0; j<elems.length; j++)  
{  
if(elems[j].className == 'crop_content'){  
newElem=document.createElement('DIV');  
newElem.id="imageContainer";  
newElem.innerHTML='<img src="" alt="" />';
elems[j].appendChild(newElem);  
}  
}

Всего записей: 3230 | Зарегистр. 18-01-2005 | Отправлено: 20:18 02-03-2011
kosorikov1

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
спасибо. вот только бла-бла - это не только текст, но еще и html код и не уловил, почему id=rowPreview_1 теперь у td. Это принципиально?

Всего записей: 102 | Зарегистр. 19-11-2009 | Отправлено: 20:33 02-03-2011
S0ldier



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
kosorikov1

Цитата:
вот только бла-бла - это не только текст, но еще и html код

Тогда через innerHTML сделайте, как во втором случае.
 

Цитата:
не уловил, почему id=rowPreview_1 теперь у td. Это принципиально?

Принципиально. Родительским элементом дива является именно td. У вас же - новый див добавляется внутрь tr, что неверно.

Всего записей: 3230 | Зарегистр. 18-01-2005 | Отправлено: 20:44 02-03-2011 | Исправлено: S0ldier, 20:47 02-03-2011
kosorikov1

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
У вас же - новый див добавляется внутрь tr, что неверно.

pElt = this.document.getElementById("rowPreview_1"); - нашли tr
var newElem=pElt.firstChild; - перешли к td
                    newElem=newElem.firstChild; - перешли к самому первому div class="dhtmlgoodies_panel"
 
Разве нет?

Всего записей: 102 | Зарегистр. 19-11-2009 | Отправлено: 13:57 03-03-2011
S0ldier



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
kosorikov1
Да, пожалуй, правильно, только this не нужен. Но зачем здесь эта лишняя операция?

Всего записей: 3230 | Зарегистр. 18-01-2005 | Отправлено: 18:20 03-03-2011
wwwww



Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
С этим более-менее понятно. Теперь пытаюсь вставлять эл-ты.
Есть ф-я

Код:
 
function createElement(name, attrs, style, text,past_id,position,changed) {
    var parent = document.getElementsByTagName('BODY')[0];
    var e = document.createElement(name);
    if (attrs) {
        for (key in attrs) {
            if (key == 'class') {
                e.className = attrs[key];
            } else if (key == 'id') {
                e.id = attrs[key];
            } else {
                e.setAttribute(key, attrs[key]);
            }
        }
    }
    if (style) {
        for (key in style) {
            e.style[key] = style[key];
        }
    }
    if (text) {
        e.appendChild(document.createTextNode(text));
    }
    parent.appendChild(e);
    if(past_id){
          var old_elem = past_id;
        if(position=='before'){            
            past_id.parentNode.insertBefore(e);

        }else if(position=='in'){
            past_id.insertBefore(e);}
        if(changed!='' && changed==true){
            parent.removeChild(old_elem);
        }
    }
    return e;
}
 

 
Вызываю  

Код:
new_td=createElement('TR',{'class': 'xxx'},{},'',document.getElementById('rowPreview_'+(new_d*1-1)),'before',0);

 
В IE все работает, а в фоксе фиребаг выдает: uncaught exception: [Exception... "Not enough arguments" nsresult: "0x80570001 (NS_ERROR_XPC_NOT_ENOUGH_ARGS)" location: "JS frame :: file:///c:/Noname1.html :: createElement :: line 33" data: no]
 
Участок кода, на который ругается выделен жирным. В чем косяк - не пойму

Всего записей: 323 | Зарегистр. 26-12-2003 | Отправлено: 14:02 11-04-2011
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
wwwww
Читайте
https://developer.mozilla.org/En/DOM/Node.insertBefore

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 17:12 11-04-2011
vs6262



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
как я понимаю с помощью

Код:
document.addEventListener("DOMContentLoaded", func_1);
document.addEventListener("DOMContentLoaded", func_2);

можно в html5 преподгрузить функции.  
 
вопросы:
там всё преподгружается включая подфункции?
как избежать Error Code в браузерах не поддерживающих html5? (при falback решениях)

Всего записей: 2188 | Зарегистр. 25-02-2013 | Отправлено: 05:30 03-03-2018
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
vs6262

Цитата:
можно в html5 преподгрузить функции.

чего?
 

Цитата:
преподгружается включая подфункции?  

зависит от области определения
 

Цитата:
как избежать Error Code в браузерах не поддерживающих html5?

кусок выше не имеет прямого отношения к html5
https://caniuse.com/#feat=addeventlistener
более того, поддерживается всюду, кроме IE8 и ниже, которые давно пора выбросить на свалку

Всего записей: 15024 | Зарегистр. 20-09-2014 | Отправлено: 05:34 03-03-2018 | Исправлено: Mavrikii, 05:35 03-03-2018
vs6262



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
конкретнее мне нужна предподгрузка по принципу как это делается в "React Admin Template"?

Всего записей: 2188 | Зарегистр. 25-02-2013 | Отправлено: 05:38 03-03-2018
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
vs6262

Цитата:
мне нужна предподгрузка по принципу как это делается в

без понятия что и как в чем то делается. словами объясните.

Всего записей: 15024 | Зарегистр. 20-09-2014 | Отправлено: 05:41 03-03-2018
vs6262



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
мне знакомый программист рассказывал что в "React Admin Template" загружается/создается виртуальный DOM, а потом мгновенно можно перенять в нормальный DOM. этим достигается мгновенность.
вот как такой принцип воплотить по простенькому?

Всего записей: 2188 | Зарегистр. 25-02-2013 | Отправлено: 05:50 03-03-2018
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
vs6262
добиться чего пытаетесь, переспрошу так, раз непонятно.

Всего записей: 15024 | Зарегистр. 20-09-2014 | Отправлено: 05:54 03-03-2018
vs6262



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
пока ничего конкретного, но хочу научится использовать виртуальный DOM.
 
https://stackoverflow.com/questions/21965738/what-is-virtual-dom
что то нашел уже. нужно наверное тяжелые элементы преподгрузить, а остальное динамически?

Всего записей: 2188 | Зарегистр. 25-02-2013 | Отправлено: 06:04 03-03-2018
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
vs6262
читайте что это https://habrahabr.ru/post/180377/
https://habrahabr.ru/post/259187/
 
https://frontender.info/shadowdom/
 
виртуальный же DOM реализуется только js библиотеками, каждая по своему. тот же react.js, к примеру - https://reactjs.org/docs/faq-internals.html

Всего записей: 15024 | Зарегистр. 20-09-2014 | Отправлено: 06:08 03-03-2018 | Исправлено: Mavrikii, 06:14 03-03-2018
vs6262



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
пасибки, по необходимости буду использовать
 
Добавлено:
"The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation"
 
вот это мне нужно, наверное без React не обойтись

Всего записей: 2188 | Зарегистр. 25-02-2013 | Отправлено: 06:26 03-03-2018
Открыть новую тему     Написать ответ в эту тему

Компьютерный форум Ru.Board » Интернет » Web-программирование » javascript и DOM


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru