DOM节点常见的操作

目录

1.创建节点

2.访问节点

3.插入节点

4.删除节点

5.修改节点

6.获取相邻的节点

7.获取父节点

DOM节点操作方法包括创建节点、访问节点、插入节点、删除节点和修改节点。

1.创建节点

document.createElement('元素名');	创建新的元素节点
document.createAttribute('属性名');	创建新的属性节点
document.createTextNode('文本内容');	创建新的文本节点
document.createComment('注释节点');	创建新的注释节点
document.createDocumentFragment();	创建文档片段节点

2.访问节点

document.getElementById('id属性值');	返回拥有制定id的第一个对象的引用
document/element.getElementsByClassName('class属性值');	返回拥有指定class的对象集合
document/element.getElementsByTagName('标签名');	返回拥有指定标签名的对象集合
document.getElementsByName('name属性值');	返回拥有指定名称的对象集合
document/element.querySelector('CSS选择器');	仅返回第一个匹配的元素
document/element.querySelectorAll('CSS选择器');	返回所有匹配的元素
document.documentElement	获取页面中的HTML标签
document.body	获取页面中的BODY标签
document.all['']	获取页面中的所有元素节点的对象集合型

3.插入节点

parent.appendChild(element/txt/comment/fragment);	向父节点的最后一个子节点追加新节点
parent.insertBefore(newChild,existingChild);	向父节点的某个特定子节点之前插入新节点
element.setAttributeNode(attributeName);	给元素增加属性节点
element.setAttriubute(attributeName,attributeValue);	给元素增加指定属性，并设定属性值

4.删除节点

parentNode.removeChild(existingChild);	删除已有的子节点，返回值为删除节点
element.removeAttribute('属性名');	删除具有指定属性名称的属性，无返回值
element.removeAttributeNode(attrNode);	删除指定属性，返回值为删除的属性

5.修改节点

parentNode.replaceChild(newChild,existingChild);	用新节点替换父节点中已有的子节点
element.setAttributeNode(attributeName);	若原元素已有该节点，此操作能达到修改该属性值的目的
element.setAttribute(attributeName,attributeValue);	若原元素已有该节点，此操作能达到修改该属性值的目的

6.获取相邻的节点

curtNode.previousSibling;	获取已知节点的相邻的上一个节点
curtNode.nextSibling;	获取已知节点的下一个节点

7.获取父节点

childNode.parentNode;

获取已知节点的父节点

参考链接：

https://www.cnblogs.com/yinshuige/p/5812095.html

https://www.cnblogs.com/JanySu/p/5278542.html