JavaScript学习之DOM（节点、节点层级、节点操作）
目录
- 节点
-
- 概念
- 节点的属性
- 节点层级
-
- 概念
- 节点操作
-
- 创建新节点
- 增添和删除节点
- 复制节点
- 练习
节点
概念
一个页面就是一个节点树，页面中的内容就是节点。
例如：HTML文档可以看作是一个节点树，网页中的所有内容都是节点。
节点的属性
(1)节点类型(nodeType)
A、1表示为元素节点(即标签)
B、2表示为属性节点(标签的属性)
C、3表示为文本节点(标签的内容)，文本节点包括文字、空格、换行等
(2)节点名称(nodeName)
(3)节点值(nodeValue)
节点层级
概念
一个HTML文件可以看作是所有元素组成的一个节点树，各元素节点之间有级别的划分。
DOM根据HTML中各节点的不同作用，可将其分别划分为标签节点（元素节点）、文本节点和属性节点。
(1)节点之间的层级关系：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>节点层级title>
head>
<body>
<p>段落...p>
<a href="#">a>
body>
html>
根节点：标签是整个文档的根节点，有且仅有一个
父节点：指的是某一个节点的上级节点
子节点：指的是某一个节点的下级节点
兄弟节点：两个节点同属于一个父节点(p标签和a标签就是兄弟节点)
(2)获取父节点的方式：
parentNode属性：来获得离当前元素的最近的一个父节点
(3)获取子节点、子元素的方式：
A、childNodes属性：返回当前节点的所有子节点的集合,返回的节点包括元素、文本和其他节点
B、children属性：只返回子元素节点的集合(标签的集合)
C、firstChild属性：返回第一个子节点(元素节点或文本节点)
D、firstElementChild属性：返回第一个子元素（第一个子标签）
E、lastChild属性：返回最后一个子节点(元素节点或文本节点)
F、lastElementChild属性：返回最后一个子元素）（最后一个子标签）
obj.children[0] // 获取第一个子元素节点
obj.children[obj.children.length - 1] // 获取最后一个子元素节点
(4)获取兄弟节点、兄弟元素的方式
A、nextSibling属性：返回后一个兄弟节点
B、previousSibling属性：返回前一个兄弟节点
C、nextElementSibling属性：返回下一个兄弟元素
D、previousElementSibling属性：返回前一个兄弟元素
节点操作
创建新节点
(1)通过createElement创建元素节点(创建标签)；
通过createTextNode创建文本节点
(2)补充：
动态创建元素节点的3种常见方式如下：
document.write()创建元素，如果页面文档流加载完毕，再调用会导致页面重绘
element.innerHTML将内容写入某个DOM节点，不会导致页面全部重绘
document.createElement()创建多个元素效率稍微低一点，但是结构更加清晰
增添和删除节点
appendChild()方法，将一个节点添加到指定父节点的子节点列表末尾
insertBefore(child, 指定元素)方法，将一个节点添加到父节点的指定子节点前面
removeChild(child)用于删除节点，该方法从DOM中删除一个子节点，返回删除的节点
复制节点
cloneNode(deep)
注意：
deep是逻辑值，true表示深拷贝,即复制当前节点及其所有子节点(默认值)
false表示浅拷贝，只复制当前节点不复制其子节点。
练习
<h3 id="h">插入节点h3>
<form name="frm">
输入文本：<input type="text" name="txt">
<input type="button" value="插入节点" onclick="insertNode('h',document.frm.txt.value)">
form>
<script>
function insertNode(nodeid,str){
//创建一个p标签
var newNode=document.createElement('p')
//创建一个文本节点
var newTxt=document.createTextNode(str)
//将文本节点插入到p标签中
newNode.appendChild(newTxt)
var ref=document.querySelector('#'+nodeid)
//判断ref是否有父节点，若节点没有父节点，则无法插入节点
if(ref.parentNode){
ref.parentNode.insertBefore(newNode,ref)
}
}
script>
