【JavaScript】DOM—对节点的操作

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/cxh6863/article/details/83045904

1、获得节点

（1）获得页面中指定id的节点对象

document.getElementById("id的字符串")；

（2）获得页面中所有标签名符合要求的标签

document.getElementsByTagName("标签名")；

（3）获得指定父节点下的所有名字符合要求的节点

父节点.getElementsByTagName("标签名");

（4）获得节点下的所有子节点，首节点，尾节点

<node>.childNodes         //获得节点下的所有子节点
<node>.firstChild  或   <node>.childNodes[0]           //获得节点下的首节点
<node>.lastChild  或   <node>.childNodes[<node>.childNodes.length-1]     //获得节点下的尾节点

2、修改节点

修改节点就是修改节点的属性和包含的文本，有俩种方式

第一种方法

//添加属性
<node>.setAttribute("属性名","值");
//获取属性
文本 <node>.getAttribute("属性名");

第二种方法

//设置
<node>.属性名=值;
//获取
var v=<node>.属性名;

3、添加节点

（1）创建节点

//元素节点
var node=document.createElement("标签名");
//文本节点
var textNode=document.createTextNode("文本");
//属性节点
<节点>.setAttribute("属性名","值")

//设置文本节点中的文本内容
<节点>.innerHTML="文本"
<节点>.innerText="文本"

（2）追加节点

//追加到尾部
父节点.appendChild(子节点);
//插入到中间
父节点.insertBefore(新元素,旧元素);

4、删除节点

节点一般最好不要删除，要用隐藏。因为删除太消耗CPU,

//删除
父节点.removeChild(“节点”);
//隐藏
节点.style.display="none";