dom 节点篇

Posted 2020-08-26 改变

1，创建元素

document.createElement(‘要创建的元素名‘);

2.插入节点

appendChild 和insertBefore 

3.删除节点

removeChild  用法 removeChild(‘要删除的是哪个节点‘);

例子，将两种节点的对比，以及删除

//插入节点，有两种方式，appendChild 和insertbefore 二者的区别比较 appendChild是在指定节点里面插入一个新节点，位置是在最后面，insertBefore(新节点，已存在节点的位置)；插在指定节点里面的第一个节点位置
var oUl=document.createElement(‘ul‘);
var oDiv=document.createElement(‘div‘);
var oText=document.createTextNode(‘添加新项:‘);
var oInpu=document.createElement(‘input‘);
var oBtn=document.createElement(‘button‘);
var oTxt=document.createTextNode(‘点击‘);
var oBtn1=document.createElement(‘button‘);
var oTx=document.createTextNode(‘删除‘);
function appChd(){
oBtn.appendChild(oTxt);
oBtn1.appendChild(oTx);
oDiv.appendChild(oInpu);
oDiv.insertBefore(oText,oInpu);//insertbefore 添加一个参数是总是报错，得两个参数
//oUl.appendChild(oDiv);
document.body.appendChild(oUl);
document.body.appendChild(oDiv);
document.body.appendChild(oBtn);
document.body.appendChild(oBtn1);
}
appChd();
oBtn.onclick=function(){
var intV=oInpu.value;//获取到的值
var aLi=document.createElement(‘li‘);
var intN=document.createTextNode(intV);//创建一个文本节点，把获取到的值，放进去
aLi.appendChild(intN);
//oUl.appendChild(aLi);新添加的节点都放到最后了
if(oUl.childNodes.length==0){ //判断一下，父结点里面的子节点是否存在，如果不存在执行append语句
//alert(1);
oUl.appendChild(aLi);
}else{
oUl.insertBefore(aLi,oUl.firstChild);
}
}
//删除节点 removeChild();
oBtn1.onclick=function(){
if(oUl.hasChildNodes()){
//oUl.removeChild(oUl.firstChild);//删除父节点里面的第一个节点
oUl.removeChild(oUl.lastChild);//删除父结点里面的最后一个节点
oUl.removeChild(oUl.childNodes[3]);//删除父节点里面任意一个位置的子节点，oUl.childNodes[i],i可以为任意值
}
}