DOM添加

Posted 2020-11-15 shihaiying

㈠添加元素的步骤

⑴创建空元素

⑵设置关键属性

⑶将元素添加到DOM树

 

㈡创建空元素

var elem = document.createElement(‘table‘);

 

示例：

var table = document.createElement(‘table‘);
var tr = document.createElement(‘tr‘);
var td = document.createElement(‘td‘);
var td = document.createElement(‘td‘);

console.log(table);

 

㈢设置关键属性

a.innerHTML = "go to tmooc"

a.herf = "http://tmooc.cn";

<a href = "http://tmooc.cn">go to tmooc</a>

 

㈣设置关键样式

a.style.opacity = "1";

a.style.csssText = "width:100px;height:100px";

 

㈤将元素添加到DOM树

第一种方法：
parentNode.appendChild(childNode)

可用于将为一个父元素追加最后一个子节点

 

示例：

var div = document.createElement(‘div‘);
var txt = document.createTextNode(‘版权声明‘)；

div.appendChild(txt);
document.body.appendChild(div);

 

第二种方法：

parentNode.insertBefore(newChild,existingChild)

用于在父元素中的指定子节点之前添加一个新的子节点

 

示例：

<ul id = "menu">
               <li>首页</li>
               <li>联系我们</li>
</ul>

var ul = document.getElementById(‘menu‘);
var newLi = document.createElement(‘li‘);

ul.inserBefore(newLi,ul.lastChild);

 

㈥添加元素优化

①尽量少的操作DOM树

①为什么?

每次修改DOM树，都导致重新layout

⑴如果同时创建父元素和子元素时，建议在内存条中先将子元素添加到父元素，再将父元素一次性挂到页面

⑵如果只添加多个平级子元素时，就要将所有子元素，临时添加到文档片段中。再将文档片段整体添加到页面

 

②文档片段中：内存中，临时保存多个子元素的虚拟父元素。用法和普通父元素完全一样

如何？

⑴创建片段

var frag = document.createDocumentFragment();

 

⑵将子元素临时追加到frag中

frag.appendChild(child);

 

⑶将frag追加到页面 

parent.appendChild(frag);

 

 强调：append之后，frag自动释放，不会占用元素