JS基础系列(六): DOM API

2018-04-02 本文已影响0人 squall1744

什么是DOM

--
DOM(Document Object Model), 文档对象模型

html是树形结构

html

DOM就是把这种树形结构结构的Document文档, 转化成Object对象的方法

DOM通常会把Document对象转化成下面四种类型的对象, 然后调用相应的API操作DOM对象, 再将结果反映在页面上

DOM对象

其中Dcoument, Element, text很重要, 其他的都不重要

Node的属性

节点和元素

节点
会把text也解析出来, 这就意味着当获取节点的时候, 会把回车解析成text节点

元素
不会解析text, 所以回车会被忽略掉

docment.body.childNodes 和 docment.body.children

docment.body.childNodes获取body元素的子节点, 回车会被解析为text节点
docment.body.children获取body元素的子标签, 这里面不会获取回车

除了这俩, 我们靠学过的单词, 还能猜出来好多
dcoument.body.firstChild 获取第一个子节点
dcoument.body.lastChild 获取最后一个子节点
dcoument.body.firstElementChild 获取第一个子元素
dcoument.body.lastElementChild 获取第一个子元素
dcoument.body.previousSibling 获取前一个兄弟节点
dcoument.body.nextSibling 获取后一个兄弟节点
dcoument.body.previousElementSibling 获取前一个兄弟元素
dcoument.body.nextElementSibling 获取前一个兄弟元素
document.body.nodeName 获取节点名称, 获取到的是大写的名称，除了svg, 这个是小写的
dcoument.body.firstChild.nodeType获取第一个节点的类型, 返回一个数字, 每个数字对应一种类型

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

textContent 获取元素内所有元素的内容

textContent 会获取所有元素的内容，包括 <script> 和 <style> 元素，然而 **innerText **不会。
innerText意识到样式，并且不会返回隐藏元素的文本，而textContent会。
由于 innerText 受 CSS 样式的影响，它会触发重排（reflow），但textContent 不会。
与 textContent 不同的是, 在 Internet Explorer (对于小于等于 IE11 的版本) 中对 innerText 进行修改，不仅会移除当前元素的子节点，而且还会永久性地破坏所有后代文本节点（所以不可能再次将节点再次插入到任何其他元素或同一元素中）。

Node的方法

appendChild(element) 将element作为子节点挂在目标元素下面
cloneNode() 拷贝节点, 传一个true参数则是深拷贝, 会把元素的子节点内容也拷贝进来, 不传的话只拷贝该节点本身
contains() 是否包含某个节点
hasChildNodes() 是否有子节点
insertBofore() 插入到前面
isEqualNode() 两个节点是否相等
isSameNode() 是不是相同节点
removeChild() 移除子节点, 节点还在
replaceChild() 交换子节点
normalize() 常规化

Document和标签API

属性
characterSet 获得页面字符编码
childElementCount 获取页面子标签数量
算了, 不列了, 自己mdn看吧

这里穿插一个知识点, 页面加载有三个阶段

页面加载

当页面open之后, 就进入write, 当整个页面加载完成就自动close, 当close后, 如果在write内容到页面, 则会重新open, 再走一遍流程, 所有之前write的内容会被覆盖
所以下面的代码页面显示的是3, 并不是123

<script>
  document.write(1)
  document.write(2)
  setTimeout(()=>{
    document.write(3)
  }, 1000)
</script>