节点

*什么是节点 元素节点就是页面中的标签 文本节点包括内容、空格、回车(换行) 注释节点就是你写的注释 文档节点就是整个大文档(整个页面) localName 小写 标签名 tagName 大写 标签名

 <ul>
    <li id="a"></li>
    <li id="b"></li>
    <li id="c"></li>
</ul> 

获取节点

• 1:获取子级节点

• *元素.children 获取所有子级元素节点

• *元素.childNodes 获取所有子级节点

• *元素.firstChild 获取第一个子级节点

• *元素.firstElementChild 获取第一个子级元素节点

• *元素.lastChild 获取最后一个子级节点

• *元素.lastElementChild 获取最后一个子级元素节点

• 2:获取兄弟节点

• *元素.nexSibling 获取下一个兄弟节点

• *元素.nextElementsibling 获取下一个兄弟元素节点

• *元素.previousSibling 获取上一个兄弟节点

• *元素.previousEleSibling 获取上一个兄弟元素节点

• 3:获取父级节点 *元素.parentNode 获取该元素的父级节点

节点类型

• nodeType 用与查看节点类型

•  *var text = oDiv.firstChild            // 获取oDiv的文本节点
  

•  *var ele = oDiv.firstElementChild      // 获取oDiv的元素节点
  

•  *var attr = oDiv.attributes[0]         // 获取oDiv的属性节点
  

• *console.log(ele.nodeType)            //  元素节点  打印1 
  

• *console.log(text.nodeType)           //  文本节点  打印3
  

• *console.log(attr.nodeType)           //  属性节点  打印2     
  

节点名称

• nodeName
• *console.log(ele.nodeName) // 元素节点名称 大写的 SPAN
• *console.log(text.nodeName) // 文本节点名称 #text
• *console.log(attr.nodeName) // 属性节点名称 class

节点的值

• nodeValue
• *console.log(ele.nodeValue) // 元素节点没有 nodeValue
• *console.log(text.nodeValue) // 文本节点对应的实际文本内容
• • console.log(attr.value) // 属性节点对应的实际属性值