HTML-DOM （知识梳理）

HTML-DOM

标签（空格分隔）： 未分类

1.1 DOM概念

当创建一个网页并将它加载到浏览器中时，DOM在幕后就悄然发生，它把你编写的网页转换为一个文档对象。（可以简单想下：在没有DOM的情况下，html就是一个字符串）

DOM提供一套操作页面元素的API，DOM可以把html文档看作树的模型，通过其提供的方法可以对树上的节点进行操作。

javascript的对象可以分为三种类型

- 用户定义对象：有程序员自行创建的对象

- 内建对象：内建在javascript里的对象，如Array Math Date等

- 宿主对象：由浏览器提供的对象，当中最基础的对象时 Window对象

DOM又称文档树模型

-文档：一个网页可以称为一个文档（通过DOM解析成的）

-节点：网页中所有的内容都是节点（标签，属性，文本，注释）

-元素：网页中的标签

-属性：标签的属性

1.2 DOM-Core 与 HTML-DOM

DOM-Core 即核心DOM,DOM规范中的通用标准，DOM 结构不是html独有的，

很多数据格式都是DOM结构。

DOM-Core的原则，将页面中所有的内容看成对象，所有的对象只有父子和兄弟的关系

创建：documnet.createElement（标签）, document.createTextNode（文本）, document.createAttribute（属性）

添加：node.appendChild, node.insertBefore, node.setAttributeNode

删除：node.removeChild

修改（属性）：nodeValue, nodeName, nodeType, getAttribute,

setAttribute,removeAttribute

查询：

document.get * by * 系列

document.query * 系列

parentNode

childNode

firstChild

lastChild

nextSibling

previousSibling

由于DOM-Core操作繁琐，所以引用了专门适用于 html的 HTML-DOM;

1.3 节点

节点 这个词是个网络术语，它表示网络中的一个连接点。一个网络就是由一些节点构成的集合。

同样DOM中文档是由节点构成的集合，在DOM里有许多不同类型的节点，就像原子包含亚原子微粒那样，也有很多类型的DOM节点包含其他类型的节点。

元素节点 element node

DOM的原子是元素节点。这些元素在文档中的布局形成了文档的结构。

节点树的根元素;

文本节点 text node

在XHTM文档里，文本节点总是被包含在元素节点内部。但并非所有的元 素节点包含有文本节点 。

属性节点 attribute node

属性节点用来对元素做出更具体的描叙，所有属性都被元素包裹。

（DOM并不是与网页结构打交道的唯一技术，我们还可以通过层叠样式表css告诉浏览器如何显示一份文档的内容，继承是CSS技术中的一项强大的功能类似于DOM，CSS也把文档内容视为一颗节点树，节点树的各个元素将继承其父元素的样式属性）

1.4
a67a
获取元素

我们要想操作页面上某部分，需要先获取到该部分对应的元素，才能进行后续操作，有4种DOM方法可以获取到元素节点，通过id，标签名，类名，选择器（documnet对象）。

getElementByID

getElementsByTagName （注意：返回的是一个对象伪数组）

getElementsByClassName (HTML5中新增 返回的是伪数组)

querySelector / querySelectorAll (返回伪数组)

1.5 获取和设置属性

get/set Attribute 与 点语法的区别：

标签固有属性，对应的DOM对象也有该属性，这些属性是一一对应的，只要修改了对象的属性，标签的属性也就跟着修改了。

若果是自定义属性（非标准属性），对应的对象是不存在的，只有固有属性才存在于对象。

attribute方法用于直接添加或修改标签的属性，无论是固有还是非标准的属性

.语法是对标签对应对象添加或修改属性，可以改变标签的固有属性（标准属性），但无法操作标签的非标准属性

DOM工作模式：

这里有一个非常值得注意的细节：通过setAttribute对文档做出修改后，不会放映在文档本身的源代码里，这种‘表里不一’的现象源于DOM的工作模式：先加载文档的静态内容，再动态刷新，动态刷新不会影响文档的静态内容，这正是DOM真正的威力，对页面内容进行刷新却不需要在浏览器中刷新页面。

1.6标签的内容属性

innerText和innerHTML属性都是用来获取和设置标签内容的。但二者还是有去别的。

innerHTML：内部的html

获取标签内容的时候，不管是标签还是文本，都能获到。

innerHTML设置内容的时候，覆盖原来内容，标签也能生效，浏览器能解析这个标签。

innerText : 内部文本

获取标签内容时，会扔掉标签，只获取文本。

设置标签内容时，会覆盖原来的内容，对标签进行转义。

二者的区别

innerHTML是w3c的标准属性，而innerText是IE提出来的属性，存在兼容性的问题，因此推荐使用。

innerText的作用：防止xss的攻击。

1.innerText是IE提出来的属性，因此低版本的火狐不支持这个属性。

2.火狐有一个innerContent属性，效果一样。

1.7 节点操作

1.7.1 节点的属性

节点分类：元素节点，文本节点，属性节点，注释节点

节点常用属性：

- nodeType 节点类型 元素节点的nodeType为1

- nodeName 节点名称

- nodeValue 节点值

1.7.2 节点的层次

孩子节点

//childNodes:获取所有的孩子节点（包括元素节点和其他类型的节点）
//children:获取所有的子元素
//firstChild:第一个节点  (lastChild)
//firestElementChild:第一个子元素  有兼容性 (lastElementChild)

兄弟节点

//nextSibling:下一个兄弟节点  （previousSibling）
//nextElementSibling:下一个兄弟元素 （IE678不兼容）(previosuElementSibling)

父节点

//parentNode:父节点  没有兼容性问题

1.7.3 克隆节点

语法： var newNode =node.cloneNode(deep)

功能： 在内存中克隆一份节点

参数： deep

- false : 默认值，浅复制，只会复制标签本身，不会复制节点的孩子。

- true : 深度复制，会复制标签的所有内容。

1.7.4 添加节点

appendChild

语法：parent.appendChild(newChild)

parent:调用者，父节点来调用

newChild:需要添加的那个孩子。

作用：把newChild添加到parent的孩子的最后面。

insertBefore

语法：parent.insertBefore(newChild, refChild);

parent:必须要父节点来调用

newChild：需要添加的那个节点

refChild:添加到哪一个节点的前面。

1.7.5 创建节点

1.document.write(基本不用)

document.write('新设置的内容<p>标签也可以生成</p>');

2.innerHtml

var box = document.getElementById('box');
box.innerHTML = '新内容<p>新标签</p>';
//innerHTML创建节点的时候有一个特点，如果原来有内容的话，使用innerHTML会把原先的内容给干掉。
//慎用：很容易出现效率问题。

3.createElement

var div = document.createElement('div');
document.body.appendChild(div);

4.性能问题

innerHTML方法由于会对字符串进行解析，需要避免在循环内多次使用。

可以借助字符串或数组的方式进行替换，再设置给innerHTML

优化后与document.createElement性能相近

1.7.6 删除节点

语法：parent.removeChild(child);

功能：有父盒子调用，删除里面的一个子元素。