2020.9.1陈悦玲

DOM树是内存中存储网页中所有内容的树结构，网页中的一切内容都是节点(Node)对象，而一切节点对象都存储在一个树形结构中。浏览器每扫描到一项网页内容，就会自动在DOM树上对应位置创建一个节点对象，来保存这项内容

• 节点对象

  • 元素节点对象

  封装一个元素及其子内容的节点对象

  • 文本节点对象

  封装一个文本内容的节点对象

为什么使用DOM树？

因为网页中的内容都是有上下级包含关系的，而树形结构是最好的保存上下级包含关系的结构

DOM树结构

当浏览器读取到一个网页时，会先在内存中创建一个树根节点对象 “ document ” ，然后开始遍历网页内容中的每个元素和文本。每遍历到一项内容，就创建一个节点对象，挂到DOM树上。网页中一切内容都是节点(Node)对象，一切节点对象都存储在一个树型结构中

• 根节点

  document

• 节点对象三大属性

  • nodeType

  节点的类型，nodeType属性返回节点类型的常数值。不同的类型对应不同的常数值
  包含：
  文档节点：document    //9
  元素节点：element        //1
  属性节点：attribute          //2
  文本节点：text         //3
  问题：无法进一步判断元素的名称

  • nodeName

  节点名称，进一步判断元素的名称
  包含：
  文档节点：document   // #document
  元素节点：element       // 全大写标签名，例如：“BODY/HEAD”
  属性节点：attrribute        // 属性名，例如：“href”
  文本节点：text        // #text

  • nodeValue

  节点值
  包含：
  文档节点：document   // null
  元素节点：element       // null
  属性节点：attribute     // 属性值，例如：“#”
  文本节点：text        // 文本内容