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节点包含其他类型的节点。

1. 元素节点 element node
   DOM的原子是元素节点。这些元素在文档中的布局形成了文档的结构。
   节点树的根元素;

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

3. 属性节点 attribute node
   属性节点用来对元素做出更具体的描叙，所有属性都被元素包裹。
   （DOM并不是与网页结构打交道的唯一技术，我们还可以通过层叠样式表css告诉浏览器如何显示一份文档的内容，继承是CSS技术中的一项强大的功能类似于DOM，CSS也把文档内容视为一颗节点树，节点树的各个元素将继承其父元素的样式属性）

1.4 获取元素

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

• getElementByID
• getElementsByTagName （注意：返回的是一个对象伪数组）
• getElementsByClassName (HTML5中新增 返回的是伪数组)
• querySelector / querySelectorAll (返回伪数组)

1.5 获取和设置属性

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

1. 标签固有属性，对应的DOM对象也有该属性，这些属性是一一对应的，只要修改了对象的属性，标签的属性也就跟着修改了。
2. 若果是自定义属性（非标准属性），对应的对象是不存在的，只有固有属性才存在于对象。
3. attribute方法用于直接添加或修改标签的属性，无论是固有还是非标准的属性
4. .语法是对标签对应对象添加或修改属性，可以改变标签的固有属性（标准属性），但无法操作标签的非标准属性

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);
功能：有父盒子调用，删除里面的一个子元素。