JavaScript-DOM常用操作方法
DOM常用操作方法
文档对象模型( DOM, Document Object Model )，描绘了一个层次化的节点树。通过对节点进行操作实现文档内容的增删改查。
节点树 - 把文档中所有的内容看成树上的节点。
元素树 - 把文档中所有的标签看成树上的结点。
1. 查找节点
| 属性 |
描述 |
| 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[‘’] |
获取页面中的所有元素节点的对象集合型 |
2. 新建节点
| 属性 |
描述 |
| document.createElement(‘元素名’); |
创建新的元素节点 |
| document.createAttribute(‘属性名’); |
创建新的属性节点 |
| document.createTextNode(‘文本内容’); |
创建新的文本节点 |
| document.createComment(‘注释节点’); |
创建新的注释节点 |
| document.createDocumentFragment( ); |
创建文档片段节点 |
3. 添加节点
| 属性 |
描述 |
| parent.appendChild( element/txt/comment/fragment ); |
向父节点的最后一个子节点后追加新节点 |
| parent.insertBefore( newChild, existingChild ); |
向父节点的某个特定子节点之前插入新节点 |
| element.setAttributeNode( attributeName ); |
给元素增加属性节点 |
| element.setAttribute( attributeName, attributeValue ); |
给元素增加指定属性，并设定属性值 |
4. 删除节点
| 属性 |
描述 |
| parentNode.removeChild( existingChild ); |
删除已有的子节点，返回值为删除节点 |
| element.removeAttribute(‘属性名’); |
删除具有指定属性名称的属性，无返回值 |
| element.removeAttributeNode( attrNode ); |
删除指定属性，返回值为删除的属性 |
5. 修改节点
| 属性 |
描述 |
| parentNode.replaceChild( newChild, existingChild ); |
用新节点替换父节点中已有的子节点 |
| element.setAttributeNode( attributeName ); |
若原元素已有该节点，此操作能达到修改该属性值的目的 |
| element.setAttribute( attributeName, attributeValue ); |
若原元素已有该节点，此操作能达到修改该属性值的目的 |
javascript — 2021年7月4日