JavaScript详解十三 ——节点操作
目录
节点操作
1、创建节点
2、创建文本
3、添加节点 (先有父母才能生孩子)
4、替换节点
5、删除节点
6、克隆节点
7、创建节点另外几种方式
（1）、element.innerHTML
（2）、 element.innerText
（3）、document.write()
（4）、insertAdjacentHTML()
节点操作
1、创建节点
docment.createElement('节点')
参数：标签名字符串
这些元素原先不存在，是根据需求动态生成的，所以也成为动态创建元素节点，会将创建好的对象作为返回值返回
2、创建文本
document.createTextNode()可以用来创建一个文本节点对象
参数：文本内容字符串，并将新的节点返回
3、添加节点 (先有父母才能生孩子)
father.appendChild(child) 追加元素 类似数组中的push()
将一个节点添加到指定父节点的子节点列表的末尾。类似css里面的after伪元素
father.insertBefore(child,指定元素)
将一个节点添加到父节点的指定子节点前面。类似css里面的before伪元素
段落
- 创造节点
- 创造/完善节点内容
- 确定节点和内容的关系
- 确定新节点与原有内容的关系
4、替换节点
replaceChild()
-可以使用指定的子节点替换已有的子节点
-语法：父节点.replaceChild(新节点，旧节点) 通知父亲换新号（舍旧迎新）
5、删除节点
写法一、father.removeChild(child) 通过父亲买走孩子
写法二、child.parentNode.removeChild(child) 通过孩子找父亲买走他
可以在DOM中删除一个子节点，返回删除的节点
- 《红楼梦》
- 《三国演义》
- 《西游记》
- 《金瓶梅》
6、克隆节点
node.cloneNode() 返回调用该方法的节点的一个副本
参数：布尔值
false 只克隆节点本身，不克隆里面的子节点
true 拷贝节点，拷贝内容
box盒子
7、创建节点另外几种方式
（1）、element.innerHTML
允许更改html元素的内容,可以设置或返回表格行的开始和结束标签之间的HTML，可以解析html标签
（2）、 element.innerText
获取或设置元素的文本----以纯文本的方式直接显示，不可以解析html标签
（3）、document.write()
直接将内容写入页面的内容流，但是文档执行完毕，则会导致页面全部重绘
- 《红楼梦》
（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文本
可以结合``字符串使用
- 《红楼梦》