一,节点
DOM将所有的文档中的内容都定义为节点
根据不同的类型分为12种节点。
需要记住的有: 1 元素 2 属性 3 文本 8 注释 9 文档
// 节点属性 节点值 节点名 节点类型
var box1 = document.getElementById("box1");
// 获取节点集合
var nodeList = box1.childNodes;
// 获取不同的节点
var p = nodeList[1];
var text = nodeList[2];
var comment = nodeList[3];
var attr = box1.attributes[0];
var document = document;
// 节点名
console.log(p.nodeName); // 元素的节点名 就是大写的标签名 tagName
console.log(text.nodeName); // 文本的节点名 是 #text
console.log(comment.nodeName); // 注释的节点名 是 #comment
console.log(attr.nodeName); // 属性的节点名 是属性名 id
console.log(document.nodeName); // 文档的节点名 是 #document
// 节点值:
console.log(p.nodeValue); // 元素没有节点值
console.log(text.nodeValue); // 文本的节点值就是文本内容
console.log(comment.nodeValue); // 注释的节点值就是注释内容
console.log(attr.nodeValue); // 属性的节点值就是属性值
console.log(document.nodeValue); // 文档没有节点值
// 节点类型
console.log(p.nodeType); // 1
console.log(text.nodeType); // 3
console.log(comment.nodeType); // 8
console.log(attr.nodeType); // 2
console.log(document.nodeType); // 9
二,节点关系: 父子关系、兄弟关系
从父亲找儿子:
1 找所有儿子,所有节点集合 parent.childNodes
2 找所有元素儿子 ,所有的元素节点集合 parent.children
3 找大儿子,第一个子节点 parent.firstChild
4 找大元素儿子 ,第一个子元素parent.firstElementChild
5 找小儿子,最后一个子节点parent.lastChild
6 找小元素儿子,最后一个子元素 parent.lastElementChild
子找父:
parentNode
三,节点操作
创建节点
var p = document.createElement("p");
追加节点
父元素.appendChild(子元素)
父元素.append(字符串或节点)
document.body.appendChild();
document.body.append(p)
删除节点
父元素.removeChild(子元素);
子元素.remove();
setTimeout(function() {
// document.body.removeChild(p)
p.remove();
}, 5000)
插入节点
父元素.insertBefore(子元素, 标杆元素)
document.body.insertBefore(p, box1);
替换节点
父元素.replaceChild(新子元素,旧子元素)
document.body.replaceChild(p, box1);
克隆节点
var p1 = p.cloneNode(true); // 如果参数为true 表示克隆子元素 如果没有参数 表示只克隆自身
console.log(p1);