一、访问/获取节点
- document.getElementById(id); //返回对拥有指定id的第一个对象进行访问
- document.getElementsByName(name);//返回带有指定名称的节点集合 注意拼写:Elements
- document.getElementsByTagName(tagname);//返回带有指定标签名的对象集合 注意拼写:Elements
- document.getElementsByClassName(classname); //返回带有指定class名称的对象集合 注意拼写:Elements
- document.querySelector(css选择器);//返回文档中匹配指定 CSS 选择器的一个元素
- document.querySelector(css选择器);//返回文档中匹配指定 CSS 选择器的所有元素,返回 NodeList 对象。
二、创建节点/属性
- document.createElement() //创建一个节点
- document.createAttribute() //对某个节点创建属性
- document.createTextNode() // 创建文本节点
三、添加节点
- document.inseretBefore(nextNode,referenceNode) // 在某个节点前插入节点
- parentNode.appendChild(newNode) // 给某个节点添加子节点
四、复制节点
- cloneNode(true/false) //复制某个节点
五、删除节点
- parentNode.removeChild(node) // 删除某个节点的子节点
六、属性操作
- getAttribute(name) // 通过属性名称获取某个节点属性的值
- setAttribute(name,value) // 修改某个节点属性的值
- removeAttribute(name) //删除某个属性
七、查找节点
- .firstChild // 获取第一个子节点
- .firstElementChild // 获取第一个元素节点
- .lastChild // 获取最后一个子节点
- .lastElementChild // 获取最后一个元素节点
- .childNodes // 获取节点的所有子节点
八、获取相邻的节点
- .previousSibling 获取已知节点的相邻的上一个节点
- .nextSibling 获取已知节点的下一个节点
九、获取父节点
- .parentNode //得到已知节点的父节点
十、替换节点
- .replace( newNode,oldNode) 从父节点中用新节点提换旧节点
十一、修改文本节点
- appendData(data):在文本节点后添加节点
- deleteData(start,length):从start处删除length字符
- insertData(start,data):在start处插入字符,start的开始值是0
- replaceData(start,length,data):在start处用data替换length个字符
十二、节点类型
元素类型 | 节点类型 |
---|---|
元素element | 1 |
属性attr | 2 |
文本text | 3 |
注释 comments | 8 |
文档document | 9 |