|
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.createTextNode("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为深拷贝，则该节点的所有后代节点和内容也都会被克隆 [妄想冤家于2023-01-13 09:08编辑了帖子]
|
|
公众号
