JS中的节点

JS中的节点

• 在js中页面由节点组成，一个节点就是一个对象
• 在js中一共分为四种类型节点
  • 1、元素节点（div等）
  • 2.文本节点（写的字）
  • 3.注释节点
  • 4.document
  • 换行和空格都是文本节点

  var tab = document.getElementById("tab");
    // var box = document.getElementById("box");
    console.dir(tab); //

• 每一个节点类型都有自己的属性

节点类型	nodetype	nodename	nodevalue
元素节点	1	大写的标签名	null
文本节点	3	#text	文本内容
注释节点	8	#comment	注释内容
document	9	#document

• 根据节点的nodetype、nodename、nodevalue判断当前节点的类型
  console.log(tab.nodeType);

  • 节点属性
    • 1.childNodes:获取到当前元素的子节点
    • 2.children：获取当前元素所有的子元素节点(不包括孙子，侄子)
    • 3.parentNode：父亲元素节点
    • body的父亲节点时html，html的父亲节点是document，document的父亲节点是空因为document是最大的

• previousSibling：上一个哥哥节点

• previousEementSibling:上一个哥哥元素节点（IE8及以下不兼容）

console.log(box.previousSibling.previousSibling)
 //:如果哥哥节点不存在，得到的结果为null
 //获取唯一的时。没有的话就是null

• 5.nextSidling:下一个弟弟节点
  • nextEementSidling：下一个弟弟元素节点

console.log(box.nextEementSidling)//undefined,因为没有弟弟了

• 6.firstchild:第一个子节点

  • firstEementchild：第一个子元素节点

  console.log(tab.firstElementChild)
  

• 7.lastchild:最后一个子节点

  //lastEementchild：最后一个子元素节点（IE8及以下你兼容）
   console.log(tab.lastElementChild)