DOM基础知识

DOMTree

节点类型

节点：一个文档中包含的所有内容都是节点 node

获取节点的方式

描述和获取节点之间关系的属性:已知一个节点，基于这些属性可以获取到任何跟其相关的节点

childNodes

语法：[container].childNodes

意义：获取所有的子节点

注意：包含各种类型

获取内容：集合NodeList

children

语法：[container].children

意义：获取当前元素所有的元素子节点

注意：获取的是一个元素集合，只有元素节点

获取内容：集合HTMLCollection

parentNode

语法：[node].parentNode

意义：获取其唯一的父节点

previousSibling

语法：[node].previousSibling

意义：获取其哥哥节点

注意：只获取一个，紧挨着的这一个，而且不一定是元素节点

previousElementSibling

语法：[node].previousElementSibling

意义：获取其元素哥哥节点

注意：不兼容IE低版本浏览器

nextSibling

语法：[container].nextSibling

意义：获取其弟弟节点

注意：只获取一个，紧挨着的这一个，而且不一定是元素节点

nextElementSibling

语法：[container].nextElementSibling

意义：获取其元素弟弟节点

注意：不兼容IE低版本

firstChild

语法：[container].firstChild

意义：获取其所有子节点中的第一个{大儿子}

firstElementChild

语法：[container].firstElementChild

意义：获取其所有元素子节点中的第一个

lastChild

语法：[container].lastChild

意义：获取其所有子节点中的最后一个{小儿子}

lastElementChild

语法：[container].lastElementChild

意义：获取其所有元素子节点中的最后一个{小儿子}

如果找不到自己想要的，结果都是null

节点的增删改

加入到页面指定容器中

• 容器.appendChild(元素对象) 把元素对象放置到容器的末尾

把A{新增的}放到B{现有的}的前面
(B.parentNode).insertBefore(A,B)
复制代码

动态创建一个元素节点(元素标签)

var link = document.createElement('a');
link.href = 'http://www.zhufengpeixun.cn';
link.innerHTML = '珠峰培训';
复制代码

动态创建一个文本节点

var text = document.createTextNode('我是文本的内容');
复制代码

删除节点

box.parentNode.removeChild(box);
复制代码

克隆

//节点.cloneNode(false/true)  克隆当前的节点，设置为true是把其后代一起克隆，默认是false
var box2 = box.cloneNode(true);
document.body.appendChild(box2);
复制代码