DOM 文档对象模型

1 DOM概述

1.1 什么是DOM

• 文档对象模型 Document Object Model

• 文档对象模型 是表示和操作 HTML和XML文档内容的基础API

• 文档对象模型，是W3C组织推荐的处理可扩展标志语言的标准编程接口

1.2 DOM分类

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

• XML DOM - 针对 XML 文档的标准模型

• HTML DOM - 针对 HTML 文档的标准模型

1.3 DOM树

2 节点

 

2.1 什么是节点

文档中的每一个部分都是节点,包括document 元素  属性 文本...

2.2 节点的分类

• doctype 文档类型

• document 文档

• Element 元素

• Attr 属性

• Text 文本

• Comment 注释

2.3 节点属性

• nodeName 节点名字

• nodeValue 节点值

• nodeType 节点类型

3 获取元素对象

3.1 通过js选择器

• getElement系列

• querySelector系列

4 文档结构和遍历文档

4.1 节点关系

• 父节点 父元素

• 子节点 子元素

• 同辈节点 同辈元素

• 祖先节点 祖先元素

• 后代节点 后代元素

4.2 作为节点树的文档

• parentNode 父节点

• childNodes 所有子节点的集合

• firstChild 第一个子节点

• lastChild 最后一个子节点

• nextSibling 下一个兄弟节点

• previousSibling 上一个兄弟节点

4.3 作为元素树的文档

• parentElement 父元素（大部分情况下 parentElement 等同于 parentNode）

• children 所有子元素的集合

• firstElementChild第一个子元素

• lastElementChild 最后一个子元素

• nextElementSibling 下一个兄弟元素

• previousElementSibling 上一个兄弟元素

 

5 属性

5.1 HTML标签的属性和元素对象的属性

HTMLElement对象映射了元素的HTML属性

5.2 获取和设置非标准的HTML属性

• getAttribute(attrname) 获取自定义或内置属性的值

• setAttribute(attrnane, value) 设置自定义或内置属性

• hasAttribute(attrname) 判断是否存在该属性

• removeAttribute() 移出自定义或内置的属性

5.3 作为Attr节点的

• setAttributeNode()

• getAttributeNode()

• document.createAttribute() 创建属性节点

var attr = document.createAttribute('class');
attr.value = 'active';
box.setAttributeNode(attr);

6 元素的内容

6.1 作为HTML的元素内容

• innerHTML

• outerHTML

6.2 作为纯文本的元素内容

• innerText 会忽略多余空白

6.3 作为Text节点的元素内容

文本节点的方法

appendData()    向文本节点追加内容
deleteData()    删除文本节点的一部分内容
insertData()    向文本节点中插入内容
replaceData()    替换内容
substringData()    截取内容

创建文本节点

document.createTextNode()

 

7 创建、插入、删除 元素节点

7.1 创建节点

document.createElement()

7.2 插入节点

appendChild()    在元素的最后追加一个子元素
insertBefore()    在元素指定的位置插入一个子元素

7.3 删除节点

removeChild()

7.4 替换节点

replaceChild(new_node, old_node)

7.5 克隆节点

cloneNode()
    参数
    true    克隆元素以及所有的厚点节点
    false    仅仅克隆节点本身