DOM

DOM: Document Object Model（文档对象模型）,DOM 是 W3C（万维网联盟）的标准。“W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分：

• 核心 DOM - 针对任何结构化文档的标准模型
• XML DOM - 针对 XML 文档的标准模型
• HTML DOM - 针对 HTML 文档的标准模型

DOM 节点

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

• 整个文档是一个文档节点
• 每个 HTML 元素是元素节点
• HTML 元素内的文本是文本节点
• 每个 HTML 属性是属性节点
• 注释是注释节点

HTML DOM 节点树（DOM 树）

HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：

通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。

HTML DOM 对象 - 方法和属性

获取页面元素

* document.getElementById('list')  ---- 返回DOM节点 速度最快
* document.getElementsByTagName('div)  ---- 返回类数组
* document.getElementsByClassName('list') ---- 返回类数组 ie8 有兼容性问题
* document.getElementsByName()   --- 返回类数组 如：获取表单name属性
* ducument.body ---- 获取body
* 通过id 获取不到返回null，其他几项返回 [].

DOM 对象方法预览

节点的类型

nodetype 节点的属性

节点的属性

• nodetype 取值：1,2,3
• nodeName 取值元素的标签名 如 DIV。 文本：#text
• nodeValue 获取节点的值
  1. 文本
  2. 属性

DOM 节点的增删查改

• 创建元素节点

document.createElement('div');

• 创建文本节点

document.creatTextNode('你好');

• 插入节点

var parent=document.getElementById("div1"); //父元素

1. parent.appendChild()  //往后面加

2. parent.insertBefoer(new,node); //通过父级在node节点前面添加新的节点

ps:已经存在页面上的元素，如果使用 appendchild,insertBefore 操作则会移动这个元素

• 复制节点

ele.cloneNode(boolean);
ele.cloneNode(boolean,true); // true为深复制

• 删除节点

parent.removeChild(ele);

• 判断是否存在节点

parent.hasChildNode() //返回布尔值

ps:
1.标准浏览器中：换行会解析为一个文本节点（即解析空格）。
2.在 ie8 中会忽略上述问题

节点关系和元素关系

属性节点

注意：只有 html 的标准属性才能直接获取
例如：id ,className,title 等

• 设置非标准属性

setAttribute(attr,val)

• 获取非标准属性

ele.getAttribute('name');

• 判断是否存在某费标准属性

ele.hasAttribute(attr) //返回布尔值

• 删除属性

ele.removeAttribute(attr)

CSS:style 属性

ps:ele.style 设置或改变的是内联样式

• 获取非内联样式

getComputedStyle(ele); //计算过后
getComputedStyle(ele).fontSize;
getComputedStyle(ele).[font-size];//[attr]

• 获取伪元素样式

getCompuyedStyle(ele,"::before").color;
getCompuyedStyle(ele,"::before").fontSize;
getCompuyedStyle(ele,"::before").[font-size];//兼容ie8-