获取DOM节点的方法有哪些
1.通过document获取节点:
(1)document.getElementById(元素ID):通过元素id获取节点
(2)document.getElementsByName(元素name属性):通过元素的name属性获取节点
(3)document/element.getElementsByTagName(元素标签):通过元素标签获取节点
(4)document/element.getElementsByClassName(class属性值):返回拥有指定class的对象集合
(5)document/element.querySelector(CSS选择器):仅返回第一个匹配的元素
(6)document/element.querySelectorAll('CSS选择器'):返回所有匹配的元素
(7)document.documentElement:获取页面中的HTML标签即整个文档的根节点,页面具有 DTD或者说指定了DOCTYPE时使用
(8)document.body:获取页面中的BODY标签,页面不具有 DTD或者说没有指定DOCTYPE时使用
(9)document.all['']:获取页面中的所有元素节点的对象集合型
2.通过节点指针获取节点:
(1)a.firstChild:获取元素a的首个子节点
(2)a.lastChild:获取元素a的最后一个子节点
(3)a.childNodes:获取元素a的所有子节点列表
(4)b.previousSibling:获取已知节点b的前一个节点
(5)b.nextSibling:获取已知节点b的后一个节点
(6)b.parentNode:获取已知节点的父节点
DOM节点的各种操作方法:
1.创建节点的方法:
(1)document.createElement(元素标签):创建元素节点
(2)document.createAttribute(元素属性):创建属性节点
(3)document.createTextNode(文本内容):创建文本节点
(4)document.createComment('注释节点'):创建新的注释节点
(5)document.createDocumentFragment( ):创建文档碎片节点(提高效率);
2.插入节点的方法:
(1)appendChild(所添加的新节点):向节点的子节点列表的末尾添加新的子节点
(2)insertBefore(所添加的新节点,已知子节点):在已知的子节点前插入一个新的子节点
3.替换节点:
replaceChild(要插入的新元素,将被替换的老元素):用新节点替换父节点中已有的子节点;若原元素已有该节点,element.setAttributeNode( attributeName )和element.setAttribute( attributeName, attributeValue )也能达到修改该属性值的目的
4.复制节点:
cloneNode(true/false):创建指定节点的副本,若参数为true则复制当前节点及其所有子节点,若参数为false则仅复制当前节点
5.删除节点:
removeChild(要删除的节点):删除指定的节点
DOM属性操作方法有哪些:
1.获取属性节点:
a.getAttribute(元素属性名):获取元素节点a中指定属性的属性值
2.设置属性节点:
a.setAttributeNode(元素属性名):给元素a增加属性节点
a.setAttribute(元素属性名,元素属性值):给元素a增加指定属性并设定属性值,或者改变元素a的某个属性值
3.删除属性节点:
a.removeAttribute(元素属性名):删除具有指定属性名称的属性,无返回值
a.removeAttributeNode(元素属性名):删除指定属性,返回值为删除的属性值
DOM文本操作方法:
insertData(offset,String):从offset指定位置插入string
appendData(string):把string插入到文本节点末尾处
deleteData(offset,count):从offset起删除count个字符
replaceData(off,count,string):从off将count个字符用string替代
splitData(offset):从offset起将文本节点分成两个节点
substring(offset,count):返回由offset起的count个节点