//创建元素节点
var a=document.createElement("div");
var b=document.createElement("div");
var c=document.createElement("div");
//创建文本节点
var txt1=document.createTextNode("第一个div");
var txt2=document.createTextNode("第二个div");
var txt3=document.createTextNode("第三个div");
//把创建的文本添加到页面上(在节点之后添加)
a.appendChild(txt1);
b.appendChild(txt2);
c.appendChild(txt3);
a.style.border="royalblue 1px solid";
a.style.height=500+"px";
b.style.height=300+"px";
b.style.border="red 1px solid";
c.style.height=100+"px";
c.style.border="yellow 1px solid";
document.body.appendChild(a);
document.getElementsByTagName("div")[0].appendChild(b);
document.getElementsByTagName("div")[1].appendChild(c);
//在某节点之前添加[父元素.insertBefore(要移动的节点,某节点)]
function Repl(){
var ul=document.getElementsByTagName("ul")[0];
var li3=document.getElementsByTagName("li")[2];
var li4=document.getElementsByTagName("li")[3];
ul.insertBefore(li4,li3);
}
//用新的节点替换某节点replaceChild(要添加的节点,某节点)
.....
//克隆某节点[父元素.cloneNode(boolean),参数表示全部克隆还是只是克隆标签]
function copy(){
var ul=document.getElementsByTagName("ul")[0];
var li=document.getElementsByTagName("li")[0];
var li1=li.cloneNode(true);
var li2=document.getElementsByTagName("li")[1];
ul.insertBefore(li1,li2);
}
//父亲删除儿子
parent.removeChild(b);
//自杀
child.remove();
//父亲找儿子【parent.children 所有的元素节点;parent.childNodes 包含所有文本节点】
//nodeName 标签--标签名 属性--属性名 文本---text
//nodeType 节点类型 : 元素=1,文本=2,属性=3
//父亲找第一个儿子【parent.firstElementChild】
//父亲找最后一个节点 【parent.lastElementChild】
//儿子找父亲【child.parentElement】
//儿子找爷爷【child.parentElemt.parentElemt】
//找弟弟【child.nextElementSibling】
JS获取子节点、父节点、兄弟节点
最新推荐文章于 2024-08-15 23:54:05 发布