节点操作
1. 创建节点
document.createElement('节点')
- 参数：标签名字符串。
- 说明：这些元素原先不存在，是根据需求动态生成的，因此也称为动态创建元素节点。该方法会将创建好的对象作为返回值返回。
2. 创建文本
document.createTextNode() 可以用来创建一个文本节点对象。
- 参数：文本内容字符串，该方法会将新的节点返回。
3. 添加节点 (先有父母才能生孩子)
- father.appendChild(child) 追加元素，类似数组中的 push()。将一个节点添加到指定父节点的子节点列表的末尾，类似 CSS 里面的 after 伪元素。
- father.insertBefore(child, 指定元素) 将一个节点添加到父节点的指定子节点前面，类似 CSS 里面的 before 伪元素。
| <body> <!-- 需求1：在段落p的后面添加一个span标签，添加span的文本内容‘我是一个span’ 需求2：在段落p的前面添加一个h1标签，添加h1的文本内容，‘我是一个h1’ --> <div id="box"> <p>段落</p> </div> <button>添加span</button> <button>添加h1</button> <script> var btns = document.querySelectorAll("button"); var p = document.querySelector("p"); var box = document.getElementById("box"); //需求1 btns[0].onclick = function () { // 1.1创建节点 var span = document.createElement("span"); // 1.2 创建文本内容 var spanText = document.createTextNode("我是一个span"); //1.3将文本内容放入到span节点里 span.appendChild(spanText); // 1.2追加节点 box.appendChild(span); }; //需求2 btns[1].onclick = function () { // 2.1 创建节点 var h1 = document.createElement("h1"); //2.2创建h1文本内容 var h1Text = document.createTextNode("我是一个h1"); //2.3 将h1Text放入到节点内 h1.appendChild(h1Text); //2.4 添加节点 box.insertBefore(h1, p); }; </script> </body> |
- 创造节点：使用 document.createElement 创建元素节点。
- 创造 / 完善节点内容：通过 document.createTextNode 创建文本节点并添加到元素节点。
- 确定节点和内容的关系：将文本节点作为子节点添加到元素节点。
- 确定新节点与原有内容的关系：通过 appendChild 或 insertBefore 方法确定新节点在文档结构中的位置。
4. 替换节点
replaceChild()
- 功能：可以使用指定的子节点替换已有的子节点。
- 语法：父节点.replaceChild (新节点，旧节点) ，形象理解为 “通知父亲换新号（舍旧迎新）”。
5. 删除节点
- 写法一：father.removeChild(child) ，即 “通过父亲买走孩子”。
- 写法二：child.parentNode.removeChild(child) ，也就是 “通过孩子找父亲买走他”。这两种方法都可以在 DOM 中删除一个子节点，并返回删除的节点。
| <body> <!-- 需求一：点击按钮1，将《金瓶梅》替换为《水浒传》 需求二：点击按钮2，删除《金瓶梅》 --> <button>按钮1</button> <button>按钮2</button> <ul> <li>《红楼梦》</li> <li>《三国演义》</li> <li>《西游记》</li> <li>《金瓶梅》</li> </ul> <script> var btns = document.querySelectorAll("button"); var ul = document.querySelector("ul"); var jpm = ul.children[3]; btns[0].onclick = function () { // 创建《水浒传》节点 var newLi = document.createElement("li"); var newLiText = document.createTextNode("《水浒传》"); newLi.appendChild(newLiText); // 替换节点 ul.replaceChild(newLi, jpm); }; btns[1].onclick = function () { // 删除节点写法一 ul.removeChild(jpm); // 删除节点写法二 // jpm.parentNode.removeChild(jpm); }; </script> </body> |
6. 克隆节点
node.cloneNode() 返回调用该方法的节点的一个副本。
- 参数：布尔值。
- 说明：false 时只克隆节点本身，不克隆里面的子节点；true 时拷贝节点及其内容。
| <body> <!-- 需求:点击按钮克隆div元素--> <div id="box">box盒子</div> <button>克隆</button> <script> var box = document.getElementById("box"); document.querySelector("button").onclick = function () { // 克隆节点 // var newBox = box.cloneNode(); var newBox = box.cloneNode(true); //添加克隆节点 box.parentNode.appendChild(newBox); }; </script> </body> |
7. 创建节点另外几种方式
（1）element.innerHTML
- 功能：允许更改 HTML 元素的内容，可以设置或返回表格行的开始和结束标签之间的 HTML，并且可以解析 HTML 标签。
（2）element.innerText
- 功能：获取或设置元素的文本，以纯文本的方式直接显示，不可以解析 HTML 标签。
（3）document.write()
- 功能：直接将内容写入页面的内容流。但是文档执行完毕后使用该方法，会导致页面全部重绘。
| <body> <!-- 需求1：获取ul里面的li内容 需求2:在ul里添加《水浒传》到页面中 innerHTML、document.write() --> <button>获取</button> <button>添加</button> <ul> <li>《红楼梦》</li> </ul> <script> var btns = document.querySelectorAll("button"); var ul = document.querySelector("ul"); // 需求1 btns[0].onclick = function () { var test1 = ul.innerHTML; // console.log(test1, "test1"); var test2 = ul.innerText; // console.log(test2, "test2"); }; //需求2 btns[1].onclick = function () { // 第一种写法（创建标签并用innerHTML直接修改新标签内容） // var li = document.createElement("li"); // li.innerHTML = "《水浒传》"; // ul.appendChild(li); // 第二种写法（不创建新标签，直接用字符串拼接方法’+’ 修改元素自身的innerHTML内容） let liElement = `<li>《水浒传》</li>`; ul.innerHTML = ul.innerHTML + liElement; // 第三种写法 （通过document.write()直接输出内容 ） // 这里注意document.write在文档加载完成后使用会重绘页面，此写法需谨慎 let bodyElement = document.body.innerHTML + liElement; document.write(bodyElement); //第四种 利用（insertAdjacentHTML() ） ul.insertAdjacentHTML('beforebegin', liElement); }; </script> </body> |
（4）insertAdjacentHTML() /əˈdʒeɪsnt/
insertAdjacentHTML() 是 Element 的 API 中的一个方法，可以将字符串文本转化为你想要的节点（Node），并且插入到你想要插入的位置中。它不会像 innerHTML 一样替换掉已有的节点，而是插入到指定位置。
- 语法：element.insertAdjacentHTML(position, text)
- 参数 1 - position：表示想要插入的位置，一共有 4 个固定的值：
- 'beforebegin'：元素 element 自己的前面。
- 'afterbegin'：插入到元素 element 里面的第一个子节点之前（例如要插入 5 个节点，顺序是 1、2、3、4、5，那么需要以 5、4、3、2、1 的顺序插入，有一种栈结构先进后出的感觉）。
- 'beforeend'：插入元素 element 里面的最后一个子节点之后（即插入到最后一个节点后，例如插入 5 个节点，顺序是 1、2、3、4、5，正常按 1、2、3、4、5 的顺序插入即可，注意是在已有节点的后面）。
- 'afterend'：元素 element 自己的后面。
- 参数 2 - text：文本内容，可以结合模板字符串 `` 使用。
| <body> <button>获取</button> <button>添加</button> <ul> <li>《红楼梦》</li> </ul> <script> var btns = document.querySelectorAll("button"); var ul = document.querySelector("ul");
btns[1].onclick = function () { // 第三种写法 insertAdjacentHTML() var li = `<li>《水浒传》</li>`; ul.insertAdjacentHTML('beforeend', li); }; </script> </body> |