DOM-4 【节点创建删除-元素属性设置获取-节点属性】

最新推荐文章于 2022-09-04 07:27:37 发布

原创最新推荐文章于 2022-09-04 07:27:37 发布 · 382 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #dom

DOM 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript在DOM中创建节点（div、text、注释），以及appendChild、insertBefore、removeChild等操作，同时讨论了元素属性设置、获取技巧，如innerHTML、innerText、setAttribute，以及HTML5自定义data-*属性的应用。还涵盖了如何通过文档碎片和字符串防止HTML回流，提升性能。

一.节点创建删除

(1)创建节点元素

document.createElement()

在Document.prototype中

var div = document.createElement('div');
div.innerHTML=123;
document.body.appendChild(div);

(2).创建文本节点

document.createTextNode()

var text= document.createTextNode(' ');
document.body.appendChild(text);

(3).创建注释节点

document.createComment()

var comment = document.createComment('我是注释')
document.body.appendChild(comment);

(4).增加子节点

appendChild()

在Node.prototype中

var p = document.createElement('p');
document.body.appendChild();

需要注意:

添加到body的最后有点类似于数组的push
还可以剪切节点
括号中放字符串是要报错的，要传入节点或是元素

(5).插入元素

x.insertBefore(a,b)

在父级x节点下的子节点b之前插入a

var div = document.getElementsByTagName('div')[0];
var p = document.getElementsByTagName('p')[0];
var a = document.createElement('a');
a.href='';
div.insertBefore(a,p);

(6).删除元素

父节点.removeChild(子节点)

div.removeChild(p);
<p>我是段落标签</p>

只是在文档中抽离了,没有真正的在内存中删除

节点.remove()

p.remove()

在内存中删除掉了

(7).替换元素

父节点.replaceChild(new, origin)

var div = document.getElementsByTagName('div')[0];
var h1 = document.getElementsByTagName('h1')[0];
var h2 = document.createElement('h2');
div.replaceChild(h2,h1);

(8).创建文档碎片

var oUl=document.getElementById('list');//变量前面加o则为明显告诉别人这是元素对象

通过createElement阻止回流

每次循环先放到oDiv中最后再放到节点树中避免HTML回流计算几何因为通过createElement创建出的元素不在树中

var oUl=document.getElementById('list');
var oDiv=document.createElement('div');
for(var i = 0; i<1000;i++){
    var oLi = document.createElement('li');
    oLi.innerHTML=i+",这是第"+i+'个项目';
    oLi.className="list-item"
    //oLi.setAttribute('class','list-item')
    oDiv.appendChild(oLi);
}
oUl.appendChild(oDiv);

创建文档碎片

这样创建出来的元素既不在树中，也没有外层元素

var oUl=document.getElementById('list');
var oFrag=document.createDocumentFragment();
for(var i = 0; i<1000;i++){
    var oLi = document.createElement('li');
    oLi.innerHTML=i+",这是第"+i+'个项目';
    oLi.className="list-item"
    //oLi.setAttribute('class','list-item')
    oFrag.appendChild(oLi);
}
oUl.appendChild(oFrag);

字符串阻止回流

字符串的性能好

var oUl=document.getElementById('list'),
    list='';

for(var i = 0; i<1000;i++){
 list+='<li>'+i+'</li>'
}
oUl.innerHTML=list;

二.元素属性设置获取

(1).innerHTML

来自Element.prototype

用来设置元素中的内容

查询

div.innerHTML " <h1>标题标签</h1> "

修改

div.innerHTML=123 123

增加

div.innerHTML+=456 "123456"

添加元素

div.innerHTML='<a href=""/>' '<a href=""/>'

(2).innerText

用来设置元素中的文本

CRDU与innerHTML一致

添加元素

div.innerText='<a href=""/>'
'<a href=""/>'

在html中会变为字符实体

&lt;a href=""/ &gt

火狐老版本不支持得换textContent，但是Ie的老版本不支持textContent

(3).setAttribute/getAttribute

元素添加/获取属性

div.setAttribute('id','box');
var attr=div.getAttribute('calss')

三.节点属性

(1).html5中自定义属性

data-*自定义属性

<p data-name-"zza" data-age="18"></p>

读取

p.dataset.name //zza
p.dataset.age //18
p.getAtrribute('data-name')
p.getAtrribute('data-age')

写入

p.setAttribute('data-age','32')

IE9以下没有dataset