HTML节点操作(html常用页面节点标签)
HTML节点的基本操作: 添加节点, 替换节点, 删除节点, 绑定事件, 访问子节点, 访问父节点, 访问兄弟节点 文档对象模型Document Object Model, 简称DOM, 是W3C组织推荐的处理可扩展标记语言XML的标准编程接口, 是一种与平台和语言无关的应用程序接口API
添加节点
<div id="t1"></div> <script type="text/kavascript"> let d1 = document.createElement("div"); // 创建一个节点 d1.style.color = "blue"; // 设置CSS样式 d1.setAttribute("id", "d1"); // 设置属性 d1.innerText = "innerText"; // 写入纯文本内容 let tn1 = document.createTextNode("CreateTextNode"); d1.appendChild(tn1); // 将tn1节点添加到d1节点后 document.getElementById("t1").appendChild(d1); // 将d1节点追加到t1节点后 let b1 = document.createElement("div"); b1.innerText = "添加到d1前" document.getElementById("t1").insertBefore(b1, document.getElementById("d1")); // 将b1节点添加到t1节点内的d1节点前 复制代码替换节点
<div id="t2"> <div>被替换的节点</div> </div> <script type="text/javascript"> let d2 = document.createElement("div"); d2.style.color = "green"; d2.innerText = "被我替换了"; // 第一个参数是要替换的节点, 第二个参数是被替换的节点 document.getElementById("t2").replaceChild(d2, document.querySelector("#2 > div:first-child")); </script> 复制代码删除节点
<div id="t3"> <div>下一个div将被删除</div> <div>被删除</div> </div> <script type="text/javascript"> document.getElementById("t3").removeChild(document.querySelector("#t3 > div:nth-child(2)")); </script> 复制代码绑定事件
<div id="t4" style="color:red;">点我</div> <script type="text/javascript"> document.getElementById("t4").addEventListener("click", e => { console.log("点击事件"); }); </script> 复制代码访问子节点
<div id="t5" style="color:grey;"> <div>1</div> <div>2</div> </div> <script type="text/javascript"> console.log(document.getElementById("t5").childNodes); // 获取所有子节点 console.log(document.getElementById("t5").childElementCount); // 获取子节点数量 console.log(document.getElementById("t5").firstChild); // 获取第一个子节点, 会匹配#text console.log(document.getElementById("t5").firstElementChild); // 获取第一个子节点 console.log(document.getElementById("t5").lastChild); // 获取最后一个子节点, 会匹配#text console.log(document.getElementById("t5").lastElementChild); // 获取最后一个子节点 </script> 复制代码访问父节点
<div style="color:yellow;"> <div id="t6">1</div> </div> <script type="text/javascript"> console.log(document.getElementById("t6").parentNode); </script> 复制代码访问兄弟节点
<div style="color: brown;"><div>1</div><div id="t7">2</div><div>3</div></div> <script type="text/javascript"> console.log(document.getElementById("t7").previousSibling); // 访问上一个兄弟节点, 会匹配#text console.log(document.getElementById("t7").priviousElementSibling); // 不匹配文本节点, 注释节点 console.log(document.getElementById("t7").nextSibling); // 访问下一个兄弟节点, 会匹配#text console.log(document.getElementById("t7").nextElementSibling); // 不匹配文本节点, 注释节点 </script>
作者：Tourscholar
链接：https://juejin.cn/post/7035155030734798856