js中node节点操作和获取

no more better

已于 2023-02-06 10:42:21 修改

阅读量1k

点赞数

文章标签： javascript Powered by 金山文档

于 2023-01-13 10:15:39 首次发布

本文链接：https://blog.csdn.net/qq_55748881/article/details/128670231

版权

DOM (Document Object Model):文档对象模型，DOM的目标: 浏览器为js提供的操作网页文档的接口（apl），浏览器渲染解析文档为dom树，js可以通过dom，来操作节点树。

节点的类型

文档节点 : Document 整个文档

元素节点： Element html元素

文本节点： Text 文本

注释节点: Comment 注释

属性节点: Attr 属性

节点是可获取的获取后进行下列：增，删，改，操作 js节点操作

根据id

document.getElementById(id名称);

// 返回的是一个节点对象返回节点对象。

根据name

document.getElementsByName(name名称);

//返回的是一个数组

根据className 类名

document.getElementsByClassName(类名);

// 返回的是一个数组

根据tagName 标签名

document.getElementsByTagName(标签名);

//返回的是一个数组

根据选择器来查询

document.querySelector() // 返回一个dom节点对象，没有返回Null 返回节点对象。

document.querySelectorAll() //返回的是一个数组，没有返回空数组

获取元素节点相关的其它节点

获取上一个节点

prevSibling: 返回当前节点的上一个节点

prevElementSibling :返回当前节点的上一个元素节点

获取下一个节点

nextSibling : 返回当前的节点下一个节点

nextElementSibling:返回当前节点的下一个元素节点

获取子节点的方法

childNodes; //返回当前节点的所有子节点

children; //返回当前节点的所有元素子节点

firstChild; //返回当前节点的第一个子节点

lastChild; //返回当前节点的最后一个子节点

firstElementChild; //返回当前节点的第一个元素子节点

lastElementChild; //返回当前节点的最后一个元素子节点、

获取父节点

parentNode:返回当前节点的父节点

对于document.getElement... 与 document.querySelector.. 的区别

动态就是选出的元素会随文档改变：获取某些标签后，进行操作增加，选出的这些元素数量会变化，下面的长度变化，影响for循环。

静态就是取出来之后就和文档的改变无关了，获取某些标签后，进行操作增加，之前进行的选取的结果不会被影响。比如：

var ul = document.querySelector('ul');

var list = ul.querySelectorAll('li');

for(var i = 0; i < list.length; i++){

ul.appendChild(document.createElement('li'));

}

console.log('list.length：',list.length); //输出的结果仍然是 3，不是此时 li 的数量 6

querySelector 与 getElementById 方法的区别

节点操作

createElement 一个由标签名称 tagName 指定的 HTML 元素只能对document生效。 document.createElement(elementName)

document.createTextNode 只能对document对象生效。

父节点.appendChild(子节点)：添加子节点;

注；如何子节点是网页存在的子节点，那么添加相当于是移动

<body>    <div id="div1">The text above has been created dynamically.</div>  
 <div id="div3">Hi there and greetings!</div>  
 <div id="div2">The text above has been created dynamically.</div>  
<script>        //fdsfsdf;        addElement ()
function addElement () {   //创建一个新的 div 元素  
let newDiv = document.createElement("div"); 只能对document生效。 
 let newDiv1 = document.createElement("div");  //给它一些内容  let newContent = document.creat
TextNode("Hi there and greetings!");  
let newContent1 = document.createTextNode("Hi there and greetings!");  // 添加文本节点 到这个新的 div 元素  
newDiv.appendChild(newContent); 
newDiv1.appendChild(newContent1);  // 将这个新的元素和它的文本添加到 DOM 中  
let currentDiv = document.getElementById("div1");  
let currentDiv1 = document.getElementById("div2");
  document.body.insertBefore(newDiv, currentDiv);  //第一个在第二个之前插入  
document.body.insertBefore(newDiv1, currentDiv1);}    
</script>
</body>

结论：大概不能重复使用一个增加的节点，可以用两个变量，完成同种类型的节点的插入。。

appendChild移动括号里的节点。。。。。。。

父节点.removeChild(子节点) 删除

父节点.cloneNode() 复制

node.cloneNode()方法返回调用该方法的结点的一个副本。也称为克隆节点或者拷贝节点

。括号里面为空或者false为浅拷贝，只复制结点不复制内容。

括号里面为true为深拷贝，则该节点的所有后代节点和内容也都会被克隆