1.写一下节点增删改
(1) document.createElement()
(2).appendChild()
(3).insertBefore()
(4).cloneNode(true) / .cloneNode(false)
(5).removeChild()
(6).replaceChild()
var parent = document.getElementById('.parent');
var d = document.createElement('div'); //动态创建元素div,不会在页面显示
var s = document.createElement('span');
parent.appendChild('d') //在parent的最后一个子节点后面添加 d
parent.insertBefore(s,d) //(新元素,已有元素) 要判断第二个参数是否存在
s.cloneNode(true) //克隆
parent.removeChild('d'); //移除
var a = document.createElement('a');
parent.replaceChild(a,s); //(新元素节点,原有元素节点)
2.如何获取元素的父节点和兄弟节点
父节点:
.parentNode
.parentElement
.offsetParent
子节点:
.parentNode.children[n];
.previousElementSibling;
.previousSibling (previousSibling会匹配字符, 包括换行和空格,而不是节点。)
.nextElementSibling
.nextSibling (nextSibling会匹配字符, 包括换行和空格,而不是节点。)
// 获取父节点:
// 1. parentNode获取父节点
// 获取的是当前元素的直接父元素。
var p = document.getElementById("test").parentNode;
// 2. parentElement获取父节点
// parentElement和parentNode一样,只是parentElement是ie的标准。
var p1 = document.getElementById("test").parentElement;
// 3. offsetParent获取所有父节点
var p2 = document.getElementById("test").offsetParent;
获取兄弟节点:
// 1. 通过获取父亲节点再获取子节点来获取兄弟节点
var brother1 = document.getElementById("test").parentNode.children[1];
// 2. 获取上一个兄弟节点
// 在获取前一个兄弟节点的时候可以使用previousSibling
// 和previousElementSibling。
// 他们的区别是previousSibling会匹配字符,
// 包括换行和空格,而不是节点。
// previousElementSibling则直接匹配节点。
var brother2 = document.getElementById("test").previousElementSibling;
var brother3 = document.getElementById("test").previousSibling;
// 3. 获取下一个兄弟节点
var brother4 = document.getElementById("test").nextElementSibling;
var brother5 = document.getElementById("test").nextSibling;
网友评论