27-进阶：DOM API

1. 什么是DOM

1.1 DOM

DOM 是一棵树（tree）；
树上有 Node
Node 分为 Document（html）、Element（元素）和 Text（文本），以及其他不重要的。

image.png

image.png

image.png

image.png

查看console.dir(document.body)打印的结果发现：document.body 是一个 hash/object；
原型链如下：
body.__proto__:HTMLBodyElement.prototype；
HTMLBodyElement.__proto__:HTMLElement.prototype；
HTMLElement.__proto__:Element.prototype；
Element.__proto__:Node.prototype；
Node.__proto__:EventTarget.prototype；
EventTarget__proto__:Object.prototype；

image.png

页面中的节点 通过上图中 构造函数（Element、Text、.....） 构造出对应的对象----这就是DOM的主要功能。

2. Node 的接口

2.1 属性

childNodes,firstChild,innerText,lastChild,nextSibling,nodeName,nodeType,nodeValue,outerText,ownerDocument,parentElement,parentNode,previousSibling,textContent

妈的记不住。
如果记不住就背下以下单词：

• child / children / parent
• node
• first / last
• next / previous
• sibling / siblings
• type
• value / text / content
• inner / outer
• element
  然后互相组合。

属性实例：

• childNodes 与 children
  
  image.png

查看上图的例子发现，childNodes 有15项，而 children 只有7项；childNodes 比 children 多出来几项 text 节点。查看这些 text 节点的 data 发现都是 回车 ；
区别：
childNodes 获取的是所有 子节点；此API来自于 Node；
children 获取的是所有 子标签；此API来自于Element ；

另外：概述
Node.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合（live collection）。即为是动态集合。所谓动态集合就是一个活的集合，DOM树删除或新增一个相关节点，都会立刻反映在NodeList接口之中。

• firstChild、lastChild 与 firstElementChild、lastElementChild
  区别同上，
  firstChild--- 获取的是第一个 子节点；此API来自于 Node；
  firstElementChild--- 获取的是第一个 子标签；此API来自于Element ；
  lastChild--- 获取的是最后一个 子节点；此API来自于 Node；
  lastElementChild--- 获取的是最后一个 子标签；此API来自于Element ；
  

  image.png

• previousSibling、nextSibling 与 previousElementSibling、nextElementSibling
  区别同上，
  previousSibling--- 获取目标节点的前一个 兄弟节点；此API来自于 Node；
  previousElementSibling--- 获取目标节点的前一个 兄弟标签；此API来自于Element ；兼容性较差；
  nextSibling--- 获取目标节点的后一个 兄弟节点；此API来自于 Node；
  nextElementSibling--- 获取目标节点的后一个 兄弟标签；此API来自于Element ；兼容性较差；
  

  image.png

• nodeName
  所有获取的 nodeName 都是大写的，除了 svg 标签；
  

  image.png
  
  nodeName 中有2点需要注意：
  1、获取 html 标签的 nodeName 方式不是document.nodeName，而是document.documentElement.nodeName；
  2、获取的 svg 标签的 nodeName 不是大写，而是小写的；

• nodeType

只读属性 Node.nodeType 表示的是该节点的类型。

描述

nodeType 属性可用来区分不同类型的节点，比如 元素, 文本 和 注释。

语法

var type = node.nodeType;
返回一个整数，其代表的是节点类型。其所有可能的值请参考 节点类型常量.

节点类型常量：

常量	值	描述
Node.ELEMENT_NODE	1	一个 元素 节点，例如 和 。
Node.TEXT_NODE	3	Element 或者 Attr 中实际的 文字
Node.PROCESSING_INSTRUCTION_NODE	7	一个用于XML文档的 ProcessingInstruction ，例如 声明。
Node.COMMENT_NODE	8	一个 Comment 节点。
Node.DOCUMENT_NODE	9	一个 Document 节点。
Node.DOCUMENT_TYPE_NODE	10	描述文档类型的 DocumentType 节点。例如 就是用于 HTML5 的。
Node.DOCUMENT_FRAGMENT_NODE	11	一个 DocumentFragment 节点

image.png

那么，document 到底是不是 html？？？？？？

image.png

根据上图来看：document 应该是 HTML 的爸爸。。。。

重点：DocumentFragment-----日后再说........

• ownerDocument

Node.ownerDocument 只读属性会返回当前节点的顶层的 document 对象。

使用场景：当有多个 html 标签时，比如有 iframe 标签时；

• parentElement 和 parentNode
  parentElement 和 parentNode 这两个属性获取的值一样，而且都来自 Node；
  
  image.png

• textContent 和 innerText

Node.textContent 属性表示一个节点及其后代的文本内容

描述:

• 如果 element 是 Document，DocumentType 或者 Notation 类型节点，则 textContent 返回 null。如果你要获取整个文档的文本以及CDATA数据，可以使用document.documentElement.textContent。
• 如果节点是个CDATA片段，注释，ProcessingInstruction节点或一个文本节点，textContent 返回节点内部的文本内容（即 nodeValue）。
• 对于其他节点类型，textContent 将所有子节点的 textContent 合并后返回，除了注释、ProcessingInstruction节点。如果该节点没有子节点的话，返回一个空字符串。
• 在节点上设置 textContent 属性的话，会删除它的所有子节点，并替换为一个具有给定值的文本节点

与innerText的区别：
Internet Explorer 引入了node.innerText。意图类似，但有以下区别：

• textContent 会获取所有元素的内容，包括

  isSameNode() 可以理解为 “===”；

  • removeChild()
    需要注意的一点：removeChild() 后仍然存在于内存中，仅仅是从页面中移除了；并不是全方位的干掉了；

  • replaceChild()

  • normalize() // 常规化

  概述
  Node.normalize() 方法将当前节点和它的后代节点”规范化“（normalized）。在一个"规范化"后的DOM树中，不存在一个空的文本节点，或者两个相邻的文本节点。
  注1：“空的文本节点”并不包括空白字符(空格，换行等)构成的文本节点。
  注2：两个以上相邻文本节点的产生原因包括：
  通过脚本调用有关的DOM接口进行了文本节点的插入和分割等。
  HTML中超长的文本节点会被浏览器自动分割为多个相邻文本节点。

  举个栗子：

  var wrapper = document.createElement("div");
  
  wrapper.appendChild(document.createTextNode("Part 1 "));
  wrapper.appendChild(document.createTextNode("Part 2 "));
  
  // 这时(规范化之前),wrapper.childNodes.length === 2
  // wrapper.childNodes[0].textContent === "Part 1 "
  // wrapper.childNodes[1].textContent === "Part 2 "
  
  wrapper.normalize();
  // 现在(规范化之后), wrapper.childNodes.length === 1
  // wrapper.childNodes[0].textContent === "Part 1 Part 2"
  

  总结：DOM APi 无外乎「增删改查」。

  3. Document 接口

  3.1 属性

  • anchors（已弃用）

  • body
    获取当前页面的 body 元素；

    
    
    image.png

  • characterSet
    字符编码

    
    
    image.png

  • childElementCount

  • children

  • doctype

  • documentElement

  **Document.documentElement** 會回傳目前文件（document）中的根元素（Element），如：HTML 文件中的 元素。

  也就是说 documentElement 其实就是 HTML；

  
  
  image.png
  • domain
    Document.domain 获取页面的域名。
  • fullscreen
  • head
  • hidden

  Document.hidden （只读属性）返回布尔值，表示页面是（true）否（false）隐藏。

  • images
    Document.images 获取页面的所有 img 标签。
  • links
    Document.links 获取页面的所有 a 标签。
  • location
  • onxxxxxxxxx
  • origin
  • plugins
  • readyState
  • referrer

  概述：
  返回跳转或打开到当前页面的那个页面的URI。

  语法：
  var string = document.referrer;

  备注：
  如果用户直接打开了这个页面（不是通过页面跳转，而是通过地址栏或者书签等打开的），则该属性为空字符串。由于该属性只是返回一个字符串，所以不能够通过该属性引用页面的 DOM。

  referrer---推荐人，当你打开一个网页之后，你在该页面的一些跳转、请求、链接啥的，在 Get 头部会有一个 Referer 属性，即表示你的这个请求是由该网页背书的；如果你不是通过页面跳转，而是通过地址栏或者书签等直接输入 URL 打开的，那么你的 Get 头部就没有 Referer 属性；
  不多说了，举个栗子：

  
  
  image.png
  
  
  image.png
  
  
  image.png

  如果你直接 复制 该图片的 URL ，通过地址栏打开，会发现无法打开。

  • scripts
  • scrollingElement
  • styleSheets
  • title
  • visibilityState

  3.2 方法

  • close()

  • createDocumentFragment()

  • createElement()

  • createTextNode()

  • execCommand()

  • exitFullscreen()

  • getElementById()

  • getElementsByClassName()

  • getElementsByName()

  • getElementsByTagName()

  • getSelection()

  • hasFocus()

  • open()

  • querySelector()

  • querySelectorAll()

  语法
  elementList = document.querySelectorAll(selectors);

  • elementList 是一个静态的 NodeList 类型的对象.
  • *selectors* 是一个由逗号连接的包含一个或多个CSS选择器的字符串.
    如果 selectors参数中包含 CSS伪元素,则返回一个空的elementList.

  • registerElement()
  • write()
  • writeln()

  4. 节点属性

  5. 节点属性