💻 【JavaScript】获取和操作 DOM 节点 🏠专栏：JavaScript
👀个人主页：繁星学编程🍁
🧑个人简介：一个不断提高自我的平凡人🚀
🔊分享方向：目前主攻前端，其他知识也会阶段性分享🍀
👊格言：☀️没有走不通的路，只有不敢走的人！☀️
👉让我们一起进步，一起成为更好的自己！！！🎁
文章目录
【JavaScript】获取和操作 DOM 节点一. DOM节点分类二. 获取节点(1) 获取元素节点1. 非常规元素节点2. 常规元素节点 (2) 获取节点的方式 三. 操作节点(1) 创建节点(2) 插入节点(3) 删除节点(4) 替换节点(5) 克隆节点(6) 节点属性 四. 案例：微博发布【JavaScript】获取和操作 DOM 节点
一. DOM节点分类
实例：
<div class="box">hello<p>你好</p><!-- 注释 --><p>p2</p>world</div>
问：div标签里面一共有多少个子节点，分别是什么？
文本节点：一个回车 + 4个空格 + hello + 一个回车+ 4个空格元素节点：<p>你好</p>文本节点：一个回车 + 4个空格注释节点：<!-- 注释 -->文本节点：一个回车 + 4个空格元素节点：<p>p2</p>文本节点：一个回车 + 4个空格 + world + 一个回车
二. 获取节点
(1) 获取元素节点
1. 非常规元素节点
html：document.documentElementbody：document.bodyhead：document.head2. 常规元素节点
document.getElementByIddocument.getElementsByClassNamedocument.getElementsByTagNamedocument.querySelectordocument.querySelectorAll(2) 获取节点的方式
<p>p1</p><div class="box">ni<p>p2</p><!-- 注释1 --><!-- 注释2 --><p>p3</p>hao</div><p>p4</p>
实例：
var div = document.querySelector("div");// 1. childNodesconsole.log(div.childNodes); // [text, p, text, comment, text, comment, text, p, text]伪数组// 2. childrenconsole.log(div.children); // [p, p]// 3. firstChildconsole.log(div.firstChild); // " ni "// 4. firstElementChildconsole.log(div.firstElementChild); // <p>p2</p>// 5. lastChildconsole.log(div.lastChild); // " hao "// 6. lastElementChildconsole.log(div.lastElementChild); // <p>p3</p>// 7. previousSiblingconsole.log(div.previousSibling); // #text// 8. previousElementSiblingconsole.log(div.previousElementSibling); // <p>p1</p>// 9. nextSiblingconsole.log(div.nextSibling); // #text// 10. nextElementSiblingconsole.log(div.nextElementSibling); // <p>p4</p>// 11. parentNodeconsole.log(div.parentNode); // <body>...</body>// 12. parentElementconsole.log(div.parentElement); // <body>...</body>// 13. attributesconsole.log(div.attributes); // NamedNodeMap {0: class, class: class, length: 1}
三. 操作节点
(1) 创建节点
只是创建不会显示到页面上，要显示到页面上得使用下面的插入节点。
创建元素节点
语法：
document.createElement('标签名')
返回值：创建好的元素节点。
var div = document.createElement("div"); console.log(div); // <div></div>
创建文本节点
语法：
document.createTextNode("文本内容")
返回值：创建好的文本节点。
var text = document.createTextNode("好的");console.log(text); // "好的"
(2) 插入节点
appendChild()
语法：
父节点.appendChild(子节点)
作用：把子节点插入到父节点中，并且是在最后面的位置插入
<div class="box"><span class="a">1</span></div><!-- 分割线 -->var box = document.querySelector(".box");var div = document.createElement("div");box.appendChild(div);/*<div class="box"><span class="a">1</span><div></div></div>*/
insertBefore()
语法：
父节点.insertBefore(子节点, 谁的前面)
作用：把子节点插入到父节点中，并且放到指定一个节点的前面。
注意：第二个参数必须写，但是第二个参数有没有可以忽略。
<div class="box"><span class="a">1</span></div><!-- 分割线 -->var box = document.querySelector(".box");var span1 = document.querySelector(".a");var span2 = document.createElement("span");box.insertBefore(span2, span1);/*<div class="box"><span></span><span class="a">1</span></div>*/
(3) 删除节点
removeChild()
语法：
父节点.removeChild(子节点)
作用：将子节点从父节点中删除。
<div class="box"><p>1</p><p>2</p><p>3</p></div><h1>标题</h1><!-- 分割线 --> var div = document.querySelector(".box");var p1 = document.querySelector("p:first-child")div.removeChild(p1); /*<div class="box"><p>2</p><p>3</p></div>*/
remove()
语法：节点.remove()
作用：将该节点删除
<div class="box"><p>1</p><p>2</p><p>3</p></div><!-- 分割线 --> var div = document.querySelector(".box");div.remove(); // <h1>标题</h1>
注：若删除的节点中有子节点会一并删除。
(4) 替换节点
replaceChild()
语法：
父节点.replaceChild(换上节点, 换下节点)
作用：在父节点中，使用换上节点替换换下节点
<div><h1>你好</h1></div><button>点击替换</button><!-- 分割线 --> <script>var div = document.querySelector("div");var h1 = document.querySelector("h1");var btn = document.querySelector("button");var h2 = document.createElement("h2");h2.innerHTML = "好的";btn.onclick = function () {// 父节点.replaceChild(换上节点, 换下节点)div.replaceChild(h2, h1);/*<div><h2>好的</h2></div>*/};</script>
(5) 克隆节点
cloneNode()
语法：
节点.cloneNode(参数)
参数：
true 克隆后代节点false 默认 不克隆后代节点
作用：把该节点复制一份一模一样的
<div class="box" style="width: 300px; height: 300px; background-color: pink"><p style="width: 100px; height: 100px; background-color: yellow"><span style="background-color: green">spanspan</span></p></div><button>复制</button><script>var btn = document.querySelector("button");var box = document.querySelector(".box");btn.onclick = function () {var res = box.cloneNode(true);document.body.appendChild(res);};</script>
(6) 节点属性
节点类型（nodeType）
节点名称（nodeName）
节点内容（nodeValue）
四. 案例：微博发布
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>textarea {width: 400px;height: 200px;margin: 30px;}* {margin: 0;padding: 0;}ul {margin: 30px;}li {list-style: none;border: 1px solid #000;padding: 10px;width: 400px;height: 50px;position: relative;}.btnStyle {width: 40px;height: 30px;position: absolute;top: 10px;right: 10px;}</style></head><body><textarea name="" id="" cols="30" rows="10"></textarea><button>发布</button><ul></ul><script>// 获取元素var ul = document.querySelector("ul");var textarea = document.querySelector("textarea");var btnOrigin = document.querySelector("button");btnOrigin.onclick = function() {// 获取文本域内容var text = textarea.value;// 判断文本域的内容是否为空if (text === '') {alert('请输入内容');return;}// 创建li标签var li = document.createElement("li");// 创建删除按钮var btn = document.createElement("button");// 将文本域内容放入li中li.innerText = `${text}`;// 在页面中ul里最前面显示li标签ul.insertBefore(li, ul.firstElementChild);// li渲染后清空文本域中的内容textarea.value = "";// 在创建的li标签中添加按钮li.appendChild(btn, li);// 给创建的按钮添加类名btn.classList.add("btnStyle");// 给创建的按钮添加文本btn.innerText = "x";// var btn1 = document.querySelector(".btnStyle");btn.onclick = function() {if (confirm("你确定要删除吗？")) {li.remove();}}}</script></body></html>
效果图：
结束语：
希望对您有一点点帮助，如有错误欢迎小伙伴指正。
👍点赞：您的赞赏是我前进的动力！
⭐收藏：您的支持我是创作的源泉！
✍评论：您的建议是我改进的良药！
一起加油！！！💪💪💪
