DOM

DOM

DOM是Document Object Model（文档对象模型），W3C国际组织的一套Web标准。是针对HTML和XML文档的一个API，它定义了访问HTML文档对象的一套属性、方法和事件。

常说要减少DOM的操作，那么DOM的操作有那些呢，DOM操作的就是对节点的操作，四个字概括：增、删、查、改。

那到底为何要减少DOM的操作，因为DOM操作慢，看浏览器的渲染原理：

1. 解析HTML结构
2. 加载外部脚本和样式表文件
3. 解析并执行部分脚本代码 (写在页面内的脚本，如自调用函数)
4. DOM树构建(body里面元素构建完成）完成 //DOMContentLoaded
5. 加载图片等外部文件
6. 页面加载完毕 //window.onload

DOM操作多了，浏览器渲染就慢，用户体验就不好了。先不管了，先看DOM都有些什么吧。

节点类型

• 每个节点都有一个nodeType属性，用于表明节点的类型。

• 常用节点类型与对应nodeType值：

  • 元素节点 <==> 1

    • 我们平时用的标签都是元素节点

  • 文本节点 <==> 3

    • 直接写在html中，没有标签包裹的内容，空格也算。html结构导致标签之间的换行会存在一个文字节点的。例如

      <a href="">元素节点1</a>
      <p>元素节点2</p>
      

      a ,p不是无间隔一起的，他们之间就会存在着一个空格，也就是文字节点

  • 属性节点 <==> 2

    • 每个 HTML 属性是属性节点

节点的获取方法

1、元素节点获取

代码	查找方式
document.getElementById(‘btn’);	通过id名字	速度最快
document.getElementsByClassName(‘one’);	通过class名	返回一个伪数组，有length，但是不能调用其他数组的方法
list.getElementsByTagName(‘li’);	通过标签名，list限制查找范围	返回伪数组
document.getElementsByName()	通过name属性获取元素节点	返回伪数组
document.querySelector(’#id’);	获取单个元素的	与ById一样
document.querySelectorAll(’#move a’)	在move下面查找a，a可以是class名，也可是TagName

以下几点为节点的常用重要方法。

创建节点

document.createElement(‘元素类型名’)	创建一个元素节点（最常用）
document.createTextNode()	创建一个文本节点
document.createAttribute()	创建一个属性节点

注意：单纯的建创建 节点是没用的，创建必须搭配插入使用才有效

插入节点

parent.appendChild(a)	给parent节点在最后插入节点a
parent.insertBefore(new,node)	在指定的子节点node前插入新的子节点new。
ele.setAttributeNode(attrNode)	在指定元素中插入一个属性节点

复制节点

cloneNode( true | false )	复制节点，为true是深复制。

删除节点

parent.removeChild(ele)	删除（并返回）当前节点parent的指定子节点ele。

判断是否含有子节点

parent.hasChildNodes()	判断当前节点是否拥有子节点,返回布尔值

以上parent表示父级元素，ele表示元素

节点间的关系来操作节点

• 获取父级节点
  • ele.parentNode 得到ele元素的父节点，可以点多几次，一直往外层访问
• 访问子节点
  • ele.childNodes 返回伪数组，ele的全部子节点可能包含有文字节点和元素节点和属性节点等等
  • ele.children 返回伪数组，返回的是元素节点
  • ele.children[i] 获取第 i 个元素节点
  • ele.firstChild 第一个子节点 ，相对于childNodes获取到的子节点来说的
  • ele.lastChild 最后一个元素 ，相对于childNodes获取到的子节点来说的
• 获取兄弟节点
  • ele.nextSibling 下一个兄弟节点 有可能是获取到文字节点
  • ele.previousSibling 上一个兄弟节点有可能是获取到文字节点

所有的节点都是可以通过n层的关系的来访问的。类似ele.children[0].children[0].children[0] 只要该元素存在，都可以访问到。

元素节点关系操作元素

• parentElement 获取父级节点元素
• children 获取元素的全部子元素
• firstElementChild 获取第一个子元素
• lastElementChild 获取最后一个子元素
• previousElementSibling 获取前一个元素
• nextElementSibling 获取下一个元素

元素节点的操作

属性操作

这些常用的属性都是可以通过 . 来访问的，能获取到就可以设置（简单的赋值就可以），除非是某些只可读不可写的属性。

常用属性	描述，返回值
tagName	标签名，大写字母形式返回
id	返回id名
name	name属性
style	内联样式，应用：ele.style.width 一般是这么用的
className	class属性
innerHTML	获取当前元素的内容
outerHTML	获取当前元素的内容（包含其标签的代码）
innerText	取位于元素标签内的文本
outerText	(包括标签)或获取(不包括标签)元素的文本

上面style只是获取到内联的样式而已，下述方法是读取到最终起效的样式，可以是内联，外部，行内样式，但是只可读不可写。内联的样式权值最大，我们可以通过ele.style 来设置样式 getComputedStyle 来读取样式。

getComputedStyle(h1)['height']
getComputedStyle(h1).height

getComputedStyle兼容性：IE8- 时 elel. currentStyle. 属性

标准的自定义属性： data- 后加自己定义的名称 js中实现：元素.dataset.名字，

元素方法（对属性的操作）

方法	描述
ele.getAttribute(attr)	获取元素的属性值（自定义属性获取）
ele.setAttribute(attr,val);	设置元素的属性
ele.removeAttribute(attr)	删除属性attr
ele.hasAttribute(attr)	判断是否存在属性attr，返回bool值