DOM

文档对象模型 (DOM) 是HTML和XML文档的编程接口。它给文档（结构树）提供了一个结构化的表述并且定义了一种方式—程序可以对结构树进行访问，以改变文档的结构，样式和内容。

DOM 提供了一种表述形式将文档作为一个结构化的节点组以及包含属性和方法的对象。从本质上说，它将web 页面和脚本或编程语言连接起来了。

每个载入浏览器的HTML文档都会成为document对象。document对象包含了文档的基本信息，我们可以通过JavaScript对HTML页面中的所有元素进行访问、修改。

document对象常用属性

---

 document.doctype
 document.title
 document.characterSet
 document.head
 document.body
 document.images

 /*了解
 readyState属性返回当前文档的状态，共有三种可能的值

 1. loading：加载HTML代码阶段，尚未完成解析
 2. interactive：加载外部资源阶段
 3. complete：全部加载完成
 */
 document.readyState

 /*了解
 compatMode 属性返回浏览器处理文档的模式，可能的值为
 1. BackCompat：向后兼容模式，也就是没有添加DOCTYPE
 2. CSS1Compat：严格模式，添加了DOCTYPE
 */
 document.compatMode

document.location

document.location 也可直接使用 location，location属性返回一个只读对象，提供了当前文档的URL信息

// 假定当前网址为http://user:passwd@www.example.com:4097/path/a.html?x=111#part1

document.location.href // "http://user:passwd@www.example.com:4097/path/a.html?x=111#part1"
document.location.protocol // "http:"
document.location.host // "www.example.com:4097"
document.location.hostname // "www.example.com"
document.location.port // "4097"
document.location.pathname // "/path/a.html"
document.location.search // "?x=111"
document.location.hash // "#part1"
document.location.user // "user"
document.location.password // "passed"

// 跳转到另一个网址
document.location.assign('http://www.google.com')
// 优先从服务器重新加载
document.location.reload(true)
// 优先从本地缓存重新加载（默认值）
document.location.reload(false)
// 跳转到另一个网址，但当前文档不保留在history对象中，
// 即无法用后退按钮，回到当前文档
document.location.assign('http://www.google.com')
// 将location对象转为字符串，等价于document.location.href
document.location.toString()

虽然location属性返回的对象是只读的，但是可以将URL赋值给这个属性，网页就会自动跳转到指定网址。

document.location = 'http://www.example.com';
// 等价于
document.location.href = 'http://www.example.com';

document.open()、document.close()

document.open方法用于新建一个文档，供write方法写入内容。它实际上等于清除当前文档，重新写入内容

document.close方法用于关闭open方法所新建的文档。一旦关闭，write方法就无法写入内容了。

document.write()

document.write方法用于向当前文档写入内容。只要当前文档还没有用close方法关闭，它所写入的内容就会追加在已有内容的后面。

• 如果页面已经渲染完成再调用write方法，它会先调用open方法，擦除当前文档所有内容，然后再写入。

• 如果在页面渲染过程中调用write方法，并不会调用open方法。

需要注意的是，虽然调用close方法之后，无法再用write方法写入内容，但这时当前页面的其他DOM节点还是会继续加载。

除了某些特殊情况，应该尽量避免使用document.write这个方法。

Element/Node

---

除了document对象，在DOM中最常用的就是Element对象了，Element对象表示HTML元素。

Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点，DOM提供了一系列的方法可以进行元素的增、删、改、查操作

Element有几个重要属性

• nodeName：元素标签名，还有个类似的tagName
• nodeType：元素类型
• className：类名
• id：元素id
• children：子元素列表（HTMLCollection）
• childNodes：子元素列表（NodeList）
• firstChild：第一个子元素
• lastChild：最后一个子元素
• nextSibling：下一个兄弟元素
• previousSibling：上一个兄弟元素
• parentNode、parentElement：父元素

查询元素

• getElementById()
• getElementsByClassName()
• getElementsByTagName()
• getElementsByName()
• querySelector()
• querySelectorAll()

创建元素

• createElement()
• createTextNode()
  生成文本节点，参数为所要生成的文本节点的内容
• createDocumentFragment()
  生成一个DocumentFragment对象。DocumentFragment对象是一个存在于内存的DOM片段，但是不属于当前文档，常常用来生成较复杂的DOM结构，然后插入当前文档。

修改元素

• appendChild()
  在元素末尾添加元素
• insertBefore()
  在某个元素之前插入元素
• replaceChild()
  replaceChild()接受两个参数：要插入的元素和要替换的元素

删除元素

• removeChild()

clone元素

用于克隆元素，方法有一个布尔值参数，传入true的时候会深复制，也就是会复制元素及其子元素（IE还会复制其事件），false的时候只复制元素本身

node.cloneNode(true);

属性操作

---

• getAttribute()
• createAttribute()
• setAttribute()
  先创建一个属性，然后设置属性值
• removeAttribute()
• element.attributes
  返回该元素所有属性节点的一个实时集合

innerText与innerHTML

• innerText
  innerText是一个可写属性，返回元素内包含的文本内容，在多层次的时候会按照元素由浅到深的顺序拼接其内容
• innerHTML
  innerHTML属性作用和innerText类似，但是不是返回元素的文本内容，而是返回元素的HTML结构，在写入的时候也会自动构建DOM

常用方法

---

修改样式

document.querySelector('p').style.color = 'red';

获取样式 getComputedStyle

var node = document.querySelector('p')
var color = window.getComputedStyle(node).color
console.log(color)

class操作

var nodeBox = document.querySelector('.box')
console.log( nodeBox.classList )
nodeBox.classList.add('active')   //新增 class
nodeBox.classList.remove('active')  //删除 class
nodeBox.classList.toggle('active')   //新增/删除切换
node.classList.contains('active')   // 判断是否拥有 class

样式的改变尽量使用 class 的新增删除来实现

页面宽高

三种高度

• clientHeight
  包括padding但不包括border、水平滚动条、margin的元素的高度
• offsetHeight
  包括padding、border、水平滚动条，但不包括margin的元素的高度
• scrollHeight
  因为子元素比父元素高，父元素不想被子元素撑的一样高就显示出了滚动条，在滚动的过程中本元素有部分被隐藏了，scrollHeight代表包括当前不可见部分的元素的高度
• scrollTop
  代表在有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度，在没有滚动条时scrollTop==0恒成立
• offsetTop
  当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系
• element.getBoundingClientRect()
  获取目标元素距离浏览器窗口的位置坐标(top, left) 或者（x, y）坐标，所以说是基于浏览器窗口的

HTMLCollection 和 NodeList

---

节点都是单个对象，有时会需要一种数据结构，能够容纳多个节点。DOM提供两种集合对象，用于实现这种节点的集合：NodeList和HTMLCollection。

NodeList 对象代表一个有顺序的节点列表，HTMLCollection 是一个接口，表示 HTML 元素的集合，它提供了可以遍历列表的方法和属性

以下方法获取的为HTMLCollection对象

document.images //所有img元素
document.links //所有带href属性的a元素和area元素
document.forms //所有form元素
document.scripts //所有script元素
document.body.children
document.getElementsByClassName("class1")

以下方法获取的为NodeList对象

document.getElementsByName("name1")
document.getElementsByTagName("a")
document.querySelectorAll("a")
document.body.childNodes

如何查看？

document.body.childNodes.constructor
HTMLCollection与NodeList基本相似

相同点： 都是类数组对象，节点的变化都会实时反映在集合中

不同点： 少部分方法不一样，比如 NodeList 有 forEach 方法，而 HTMLCollection 没有