获取DOM节点及节点分类

155 阅读1分钟

1.获取DOM子节点

获取所有子节点(包括文本节点) console.log(oDiv.children) 获取所有元素节点 console.log(oDiv.childNodes) 获取元素的第一个子节点(包括文本节点) console.log(oDiv.firstChild) 获取元素的第一个元素子节点 console.log(oDiv.firstElementChild) 获取元素的最后一个子节点(包括文本节点) console.log(oDiv.lastChild) 获取元素的最后一个元素子节点 console.log(oDiv.lastElementChild) 获取兄弟节点(包括文本节点)

 console.log(oli.nextSibling) 
 console.log(oli.previousSibling)    

获取兄弟元素节点

console.log(oli.nextElementSibling)
console.log(oli.previousElementSibling) 

获取父级节点 console.log(oli.parentNode) ==补充:== 虽然parentNode和parentElement都可以获取到相同的结果,但parentElement匹配的是parent为element的情况,而parentNode匹配的则是parent为node的情况。element是包含在node里的,它的nodeType是1。 获取属性节点 var attr = oUl.attributes[0] ==补充:== 由于获取到的是一个对象(就算只有一个属性),所以需要加索引来获取具体的值。

节点分类

节点类型: console.log(ele.nodeType) *元素节点打印1,属性节点打印2,文本节点打印3,在无法确定节点类型是可以采用来根据返回值判断 节点名称 console.log(ele.nodeName) ==补充:== 元素节点名是大写的标签名,文本节点名是#text,元素节点名是属性名; 节点的值 console.log(ele.nodeValue) ==补充:== 元素节点没有值,文本节点是实际的文本值,属性节点是实际的属性值。