常见DOM操作有哪些？

大家好，我是IT修真院武汉分院第13期学员，一枚正直善良的web程序员。

今天给大家分享一下，修真院官网js4任务中可能会使用到的知识点：

常见DOM操作有哪些？

小课堂

DOM常用操作

1.查找节点

2.添加新节点

3.删除节点

4.修改节点

1、查找节点

1、document.getElementById('id属性值');

返回拥有指定id的第一个对象的引用

2、document/element.getElementsByClassName('class属性值'); 

返回拥有指定class的对象集合

3、document/element.getElementsByTagName('标签名'); 

返回拥有指定标签名的对象集合 

4、document.getElementsByName('name属性值');

返回拥有指定名称的对象结合

5、document/element.querySelector('CSS选择器');

仅返回第一个匹配的元素

6、document/element.querySelectorAll('CSS选择器');

返回所有匹配的元素

7、document.documentElement

获取页面中的HTML标签

8、document.body

获取页面中的BODY标签

2.添加新节点

1、parent.appendChild( element/txt/comment/fragment );

向父节点的最后一个子节点后追加新节点

2、parent.insertBefore( newChild, existingChild ); 

向父节点的某个特定子节点之前插入新节点

3、element.setAttributeNode( attributeName ); 

给元素增加属性节点 

4、element.setAttribute( attributeName, attributeValue );

给元素增加指定属性，并设定属性值

3.删除节点

1、parentNode.removeChild( existingChild );

删除已有的子节点，返回值为删除节点

2、element.removeAttribute('属性名'); 

删除具有指定属性名称的属性，无返回值

3、element.removeAttributeNode( attrNode ); 

删除指定属性，返回值为删除的属性 

4.修改节点

1、parentNode.replaceChild( newChild, existingChild );

用新节点替换父节点中已有的子节点

2、element.setAttributeNode( attributeName ); 

若原元素已有该节点，此操作能达到修改该属性值的目的

3、element.setAttribute( attributeName, attributeValue ); 

若原元素已有该节点，此操作能达到修改该属性值的目的 

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~

技能树-IT修真院

IT修真院是一个免费的线上IT技术学习平台 。

每个职业以15个左右的task为初学者提供更快速高效的学习方式 ；

所有task均是从真实项目中提炼出来的技能点，

强调实战演练+自学优先+师兄辅导的学习方式，

严格的日报体系，欢乐的交流讨论学习气氛，更有无数师兄师姐帮你解疑