javaScript DOM的体系结构及思维导图的整理

javaScript DOM的体系结构文档整理
DOM （浏览器环境进行开发测试）
文档对象模型，浏览器提供了一套api(构造函数，原型，实例对象-【html元素->js对象】),通过这套api进行dom操作（追加节点，删除节点，动态改变属性…）

体系结构整体概述：
最高级别 Object
下一级别: Node
下一级别： Element Document Text Comment
下一级别： HTMLElememnt
下一级别： HTMLDIVElememnt

一. Node
节点元素，在html中所有的标签都可以被称为是节点，比如div、注释、span、hello标签都属于。
1) 实例化
浏览器在加载html的时候已经完成了节点的实例化，我们只需要通过document.xxx方法获取即可

2. 实例属性
   （1）节点特性的属性
   nodeType
   1 元素节点
   3 文本节点
   8 注释节点
   9 文档节点
   nodeName
   当为元素节点的时候，为标签名大写
   文档节点 :#document
   文本节点 :#text
   注释节点 :#comment
   nodeValue
   （2） 层次关系属性
   childNodes
   返回一个类数组对象，其元素为所有的子节点
   childNodes
   firstChild
   lastChild
   nextSibling
   previousSibling
   parentNode
   parentElement
   textContent

   3. 实例方法
      Node.prototype.appendChild(node)
      Node.prototype.insertBefore(newNode,refNode)
      Node.prototype.removeChild(node)
      Node.prototype.replaceChild(newNode,oldNode)

      Node.prototype.cloneNode(deep)
      Node.prototype.hasChildNodes()

   Node构造函数

   Node的实例对象 怎么看
   var $one = document.getElementById(“one”);
   $one 是Object实例对象
   $one 是Node实例对象
   $one 是Element实例对象
   $one 是HTMLElement实例对象
   $one 是HTMLSpanElement实例对象

二. Element
子构造函数 HTMLElement -> HTMLXxxElement
元素节点，表示所有的元素转换成的js对象

1. 实例属性
   children
   firstElementChild
   lastElementChild
   nextElementSibling
   previousElementSibling

   id
   name
   tagName
   className
   classList 返回一个对象，具有add与remove方法
   innerHTML
   HTMLinnerText

   clientTop 上边框宽度
   clientLeft 左边框宽度
   clientWidth 元素宽度
   clientHeight 元素高度

   2. 实例方法
      Element.prototype.before()
      在当前元素前插入节点
      Element.prototype.after()
      在当前元素后插入节点
      Element.prototype.append()
      在当前元素内部追加子节点
      Element.prototype.prepend()
      在当前元素内部插入子节点
      Element.prototype.remove()
      从dom树删除当前元素

   Element.prototype.getAttribute(key)
   Element.prototype.getAttributeNames()
   Element.prototype.hasAttribute(key)
   Element.prototype.setAttribute(key,val)
   三. Document
   文档节点，一个页面中只有一个文档节点对象，那就是document

   1. 实例属性
      head
      title
      body
      doctype
      contentType
      forms
      images
      links
      scripts
   2. 实例方法
      Document.prototype.createElement(tagName)
      Document.prototype.getElementById()
      Document.prototype.getElementsByClassName()
      Document.prototype.getElementsByName()
      Document.prototype.getElementsByTagName()
      Document.prototype.querySelector(selector)
      Document.prototype.querySelectorAll(selector)
      四. Text
      文本节点
      五. Comment
      注释节点
      javaScript DOM的体系结构思维导图
      1.node
      
      2.Document
      3.Element
      
      4.其余