1. 访问兄弟节点
nextSibling && previousSibling
var bd = doucument.body;
bd.childNodes[0].nextSibling;
bd.previousSibling;
2. 访问首尾节点
firstChild && lastChild
firstChild相当于 childNodes[0] , lastChild 相当于 childNodes[childNodes.length - 1]
var bd = doucument.body;
bd.firstChild;
bd.lastChild;
3. 遍历DOM
function walkDOM(n){
do {
console.log(n);
if(n.hasChildNodes()) {
walkDOM(n.firstChild)
}
}while(n = n.nextSibling)
}
walkDOM(document.documentElement);
walkDOM(document.body);
4. 修改DOM节点内容
innerHTML
var my = document.getElementById("idName");
my.innerHTML = "我时修改后的内容~";
innerHTML可以接收任何HTML代码,所以我们也可以这么写
var my = document.getElementById("idName");
my.innerHTML = "<em>我时修改后的内容~<em>";
也可以使用nodeValue属性对文本进行修改
my.firstChild.nodeValue = "呀,我是修改后的内容!"
5. 修改样式
style
var p = document.getElementsByTagName[0];
p.style.border = "1px solid #ccc";
如果是有短横线的css属性,js中是不可以用的,但是可以将短横线后面的第一个字母大写,比如: padding-top 可以写成 paddingTop
var p = document.getElementsByTagName[0];
p.style.border = "1px solid #ccc";
6. 新建和插入DOM节点
createElement() && appendChild() && insertBefore()
appendChild() 只能将新节点添加到指定节点的末端, insertBefore() 可以精确地控制插入节点的位置,它比 appendChild() 多一个参数,该参数用于指定将新节点插入到哪一个元素的前面
var my = document.createElement("p");
my.innerHTML = "我是新建的节点哦~";
将新建的节点添加到DOM树结构中,这里是添加到了body最后一个子节点的后面
var my = document.createElement("p");
document.body.appendChild(my);
将新建节点插入到body元素的第一个子节点的前面
document.body.appendChild(my, document.body.firstChild);
纯DOM方法
var p = document.createElement('p');
var t1 = document.createTextNode("新文本节点1");
var t2 = document.createTextNode("新文本节点2");
p.appendChild(t1);
p.appendChild(t2);
document.body.appendChild(p);
document.body.appendChild(p);
7. 克隆节点(cloneNode())
cloneNode() 有一个布尔类型的参数, true 代表深拷贝(包括所有的子节点), false 代表浅拷贝,只针对当前节点
var e = document.getElementsByTagName("p")[1];
document.body.appendChild(e.cloneNode(true));
8. 移除节点(removeChild())
var p = document.getElementsByTagName[0];
var removed = document.body.removeChild(p);
虽然该节点已经不在DOM树中,但是仍然可以对其调用所有的DOM方法
removed.firstChild;
9. 替换节点(replaceChild())
在移除节点的同时,将另一个节点放在该位置
var p = document.getElementsByTagName("P")[1];
var replaced = document.body.replaceChild(remove, p);
如果想将某个子树中的内容一并抹去,最便捷的方式是将它的 innerHTML 设置为空字符串
document.body.innerHTML = "";
纯DOM删除的话,必须对所有的子节点进行遍历,逐个删除
function removeAll(n) {
while (n.firstChild) {
n.removeChild(n.firstChild);
}
}
现在,如果想删除body中所有的子节点,可以用 removeAll()
removeAll(document.body);