节点操作
1、创建节点
docment.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 spanTest = document.createTextNode("我是一个span");
//1.3将文本内容放入到span节点里
span.appendChild(spanTest);
// 1.2追加节点
box.appendChild(span);
};
//需求2
btns[1].onclick = function () {
// 2.1 创建节点
var h1 = document.createElement("h1");
//2.2创建h1文本内容
var h1Test = document.createTextNode("我是一个h1");
//2.3 将h1Test放入到节点内
h1.appendChild(h1Test);
//2.4 添加节点
box.insertBefore(h1, p);
};
</script>
</body>- 创造节点
- 创造/完善节点内容
- 确定节点和内容的关系
- 确定新节点与原有内容的关系
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 newLiTest = document.createTextNode("《水浒传》");
newLi.appendChild(newLiTest);
// 替换节点
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()直接输出内容 ）
let bodyElement=document.body.innerHTML+liElement
document.write(bodyElement);
//第四种 利用（insertAdjacentHTML() ）
ul.insertAdjacentHTML('beforebegin',liElement)
};
</script>
</body>（4）、insertAdjacentHTML()
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>