DOM—— Document Object Model 文档对象模型

• Documenta对象 —— XML文档（HTML标签）

• Element对象 —— 除了html以外的其他标签

• Element-Text —— 文本内容

• Object —— 把文档变成对象

  
  DOM

---

DOM API

1、Node

1.1、Node组成：

Node 是 Document(html) 对象、Element对象 和Text文本对象 以及其它不重要的对象的原型链的顶端。

    页面中的节点Node 通过各种对象的构造函数构造出对象，这就是DOM API,这就是DOM的主要功能。

2、三种DOM API

2.1、Node的接口：

1、属性：

childNodes,firstChild,children,innerText,lastChild,nextSibling,nodeName,nodeType,nodeValue,outerText,ownerDocument,parentElement,parentNode,previousSibling,textContent ；
注意：【考】
1、 nextSibling //可能会获取到文本，不只是标签
2、innerText和textContent有细微差别
3、nodeType 不同的值

节点常量类型：

常量	值	描述
Node.ELEMENT_NODE	1	一个元素节点，例如<p>和<div>
Node.TEXT_NODE	3	Element或Atrr中实际文字
Node.CDATA_SECTION_NODE	4	一个 CDATASection
Node.PROCESSING_INSTRUCTION_NODE	7	一个用于XML文档的 ProcessingInstruction
Node.COMMENT_NODE	8	一个 Comment节点
Node.DOCUMENT_NODE	9	一个 Document节点
Node.DOCUMENT_TYPE_NODE	10	描述文档类型的DocumentType节点
Node.DOCUMENT_FRAGMENT_NODE	11	一个DocumentFragment节点

【记住 DocumentFragment 优化】
*DocumentFragment，文档片段接口，表示一个没有父级文件的最小文档对象。它被作为一个轻量版的 Document 使用，用于存储已排好版的或尚未打理好格式的XML片段。最大的区别是因为 DocumentFragment 不是真实DOM树的一部分，它的变化不会触发 DOM 树的重新渲染，且不会导致性能等问题。

最常用的方法是使用文档片段作为参数（例如，任何 Node 接口类似 Node.appendChild 和 Node.insertBefore) 的方法），这种情况下被添加(append)或被插入(inserted)的是片段的所有子节点, 而非片段本身。因为所有的节点会被一次插入到文档中，而这个操作仅发生一个重渲染的操作，而不是每个节点分别被插入到文档中，因为后者会发生多次重渲染的操作。

该接口在Web组件中也非常有用: 模板 元素在其 HTMLTemplateElement.content 属性中包含了一个 DocumentFragment 。

可以使用document.createDocumentFragment(https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createDocumentFragment "创建一个新的空白的文档片段( DocumentFragment)。") 方法或者构造函数来创建一个空的 DocumentFragment.

2、方法：（如果一个属性是函数，就称为方法，换言之，方法就是函数属性）

• appendChild() //向节点的子节点列表末尾添加新的节点
• cloneNode(true/false) //如果true,深拷贝,则节点本身及节点中所有的后代元素都会被递归地克隆，如果false只拷贝节点本身
• contains()
• hasChildNodes()
• insertBefore()
• isEqualNode() // 相等就返回true,不一定是同一个
• isSameNode() //相当于 === 号，同一个
• removeChild() //把子元素从页面中删掉之后它依然在内存中
• replaceChild()
• mormalize() //常规化

【总结】：以上这些API功能：增删改查节点

2.2、Document的接口：

1、属性：

• anchors
• body
• characterSet //字符集编码
• childElementCount
• children
• doctype
• documentElement //html
• domain
• fullscreen
• head
• hidden
• images
• links
• location
• onxxxxxxxxx //一系列事件监听
• origin
• plugins //插件
• readyState //下载状态
• referrer //引荐者
• scripts
• scrollingElements
• styleSheets
• title
• visibilityState

2、方法：

• close
• createDocumentFragment()
• createElement()
• createTextNode()
• execCommand() //执行命令
• exitFullscreen()
• getElementByBody()
• getElementsByClassName()
• getElementsByName()
• getElementsByTagName()
• getSelection()
• hasFocus()
• open()
• querySelector()
• querySelectorAll()
• registerElement
• write()
• writeIn() //写一行
  注意：【考】
  1、querySelector() //返回一个元素
  2、querySlectorAll() //返回多个元素组成的数组，即使只有一个元素还是会返回伪数组，还可以选择其中某一个例如：querySlectorAll[5]

2.3、Element的接口：

属性：

• Atrributes //获取一个元素的所有属性
• classList
• className
• cliemtWidth/Height/Top/
• id
• innerHtml //会把用户写的标签执行；但是innerText不会执行，只当作文本传到页面
• tagName
• scorllHeight
• getAttribute
• querySelector
• querySelectorAll
• removeAttribute
• remove
• setAttribute

---

DOM 细微区别总结：

• DOM 有自己的国际标准，目前的通用版本是
• DOM的最小组成单位叫做 节点Node
• 节点常量类型有7种
• DOM 树的根节点是html
• <div id=x></div>中 x的值为这个 id 为 x 的 div 对应的 Element 对象
• <div id=parent></div> 中parent的值为如果有父窗口，就是父窗口。如果没有，就是当前窗口。
  【重点：全局变量可耻】

* 以上这两个不同原因：前者是最直观的，没有歧义，而后者parent是window全局属性，所以会返回父级对象。这就是全局变量可耻，不能用，用了之后要么被全局变量覆盖，要么覆盖全局变量，避开这个方法：
              1. 不用全局属性，使用局部属性，即写在函数作用域内：
                function x(){
                      var parent = document.querySelector('#self')
                }
            * 方法 1 扩展 知识点：
              不用全局属性，使用局部属性,立即调用函数：
              就是：声明一个匿名函数，并立即调用这个函数
              function (){
                  var parent = document.querySelector('#self')
                }.call()   
             * 立即调用函数的浏览器端bug:声明一个匿名函数，并立即调用这个函数后浏览器会报错，破解这个bug的方法：
              （1）. 把整个立即调用函数用圆括号括起来
              （2）. 把整个匿名函数用圆括号括起来。再立即调用
              （3）. 在整个立即调用函数前面写一个 【减号】 或 【加号】或 【感叹号】或 【波浪号】  （不需要用到真是值的情况下，只要让浏览器知道不是一个声明，而是一个立即调用函数就可以，其中 ！是取反；~ 是二进制取反）
              （4）. 不用关键字var ,而是用let关键字，然后把整个代码块放到花括号里面，原因：var会变量提升到花括号外面，而let不会，所以这样做只能把变量使用在花括号里，因此，用let 有利有弊
              2. 非要使用全局属性，就写成下面这样：
                   html骨架：
                  <div id = 'self'></div>
                   js:
                  var selfDiv = document.querySelector('#self')
                接着就可以正常使用这个变量名了

• <div id=parent1><div id=child1></div></div> 中parent1.childNodes 的值是 {0:child1, length:1} 伪数组

• 【代码执行顺序有关题目：】
  第一题：
  var parent = document.getElementById('parent');
  parent.childNodes.length 为 2
  parent.appendChild(document.createElement('div'));
  parent.childNodes.length // 请问现在 length 是多少
  //3
  //原因：修改之后再次运行了parent就是再次取值了，所以会变

  第二题：
  var allDiv = document.querySelectorAll('div')
  allDiv.length // 假设是 2
  document.body.appendChild( document.createElement('div') )
  allDiv.length // 请问现在 length 的值是多少？？？
  //2
  //原因：值是之前保存在内存中的length,修改之后没有再次取值

* HTMLCollection与NodeList的区别有
   * HTMLCollection实例对象的成员只能是Element节点，NodeList实例对象的成员可以包含其他节点
   * HTMLCollection实例对象可以用id属性或name属性引用节点元素，NodeList只能使用数字索引引用。
* ChildNode接口用于处理子节点（包含但不限于Element子节点）。Element节点、DocumentType节点和CharacterData接口，部署了ChildNode接口。凡是这三类节点（接口），都可以使用哪些方法：
回答：remove()/before()/after()/replaceWith()