节点属性
- nodeType 节点的类型，属性值为数字，表示不同的节点类型，共 12 种，只读
1= 元素节点
2= 属性节点
3= 文本节点 - nodeName 节点的名称(标签名称)，只读
-
nodeValue 节点值，返回或设置当前节点的值
元素节点的 nodeValue 始终是 null
节点层级
父子节点属性
- childNodes：只读属性，获取一个节点所有子节点的实时的集合，集合是动态变化的
- children：只读属性，返回一个节点所有的子元素节点集合，是一个动态更新的HTML元素集合
- firstChild：只读属性，返回该节点的第一个子节点，如果该节点没有子节点就返回null
- lastChild：只读属性，返回该节点的最后一个子节点，如果没有子节点就返回null
- parentNode：返回一个当前节点的父节点，没有这样的节点，比如说像这个节点是树结构的顶端或者没有插入一棵树中，这个属性返回null
- parentElement：返回当前节点的父元素节点，如果该元素没有父节点，或者父节点不是一个DOM元素，返回null
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="box">
<p>段落</p>
<span>span 小盒子</span>
</div>
<script>
var box = document.getElementById("box");
// 获取子节点
console.log(box.childNodes); //获取所有类型的子节点
console.log(box.children); //获取所有元素类型的子节点
console.log(box.firstChild); //获取所有类型的子节点的第一个
console.log(box.lastChild); //获取所有类型的子节点的最后一个
console.log(box.firstElementChild);//获取所有元素类型的子节点的第一个
console.log(box.lastElementChild); //获取所有元素类型的子节点的最后一个
// 获取父级
console.log(box.parentNode);
console.log(box.parentElement);
</script>
</body>
</html>
如图所示，childNodes会讲文本节点也包含进来，div头部到p标签有一个换行，p到span有一个换行，span到div尾部也有一个换行，总共三个text文本节点
nodeType类型为3，nodeValue为换行符，nodeName为"#text"
而往后我们一般用的更多的都是children和last/fristElementChild，这样可以只看元素，而不用把文本节点也算进来
兄弟节点属性
- nextSibling ：只读属性，返回和该节点同级的下一个节点，没有就返回null
- previousSibling：只读属性，返回与该节点同级的上一个节点，没有就返回null
- nextElementSibling ：只读属性，返回与该节点同级的下一个元素节点，如果没有返回null。
- previousElementSibling： 只读属性，返回与该节点同级的上一个元素节点，如果没有返回null。
（与lastChild和lastElementChild类似的道理）
nextElementSibling和previousElementSibling有兼容性问题，IE9以后才会支持
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="box">
<p>这是段落1</p>
<p>这是段落2</p>
<p id="p3">这是段落3</p>
<p>这是段落4</p>
<p>这是段落5</p>
</div>
<script src="common.js"></script>
<script>
// 获取元素
var p3 = my$("p3");
// 上一个兄弟节点
console.log(p3.previousSibling);
// 下一个兄弟节点
console.log(p3.nextSibling);
// 上一个兄弟元素的节点
console.log(p3.previousElementSibling);
// 下一个兄弟元素的节点
console.log(p3.nextElementSibling);
</script>
</body>
</html>
同理，文本节点换行符，previousElementSibling和nextElementSibling则是直接看到元素的兄弟节点
创建节点的方法
- document.createElement("div") 创建元素节点
- document.createAttribute("id") 创建属性节点
- document.createTextNode("hello") 创建文本节点
- 一般将创建的新节点存在变量中，方便使用。
<script>
// 创建新的节点
var div = document.createElement("div");
console.dir(div);
var cls = document.createAttribute("class");
console.dir(cls);
var txt = document.createTextNode("hello");
console.dir(txt);
// 创建的新的节点，是存储在内存中的，但是并没添加到 DOM 树上
</script>
文本节点和属性节点的相关属性
元素节点相关属性
节点常用操作方法
添加
- parentNode.appendChild(child)：将一个节点添加到指定父节点的子节点列表末尾。
添加
appendChild()原有的节点可以传到appendChild的参数，分为两步：1.将节点从原始位置删除。2.添加到新的指定位置。原因：内存中这个原有节点只有一个，渲染时只能有一个位置
替换，插入，删除节点
- parentNode.replaceChild(newChild, oldChild)：用指定的节点替换当前节点的一个子节 点，并返回被替换掉的节点。
- parentNode.insertBefore(newNode,referenceNode)：在参考节点之前插入拥有指定父节点的子节点，referenceNode 必须设置，如果 referenceElement 为 null 则 newNode 将被插入到子节点的末尾。
-
parentNode.removeChild(child)：移除当前节点的一个子节点。这个子节点必须存在于当 前节点中。
未进行任何操作的显示内容
替换节点的代码
替换
插入代码
在p2之前插入子节点
第二个参数为null时插入到子节点末尾
移除代码
移除
克隆节点
- Node.cloneNode()：克隆一个节点，并且可以选择是否克隆这个节点下的所有内容。参数为Boolean 布尔值，表示是否采用深度克隆,如果为 true,则该节点的所有后代节点也都会被克隆,如果为 false,则只克隆该节点本身，默认值为 true，节点下的内容会被克隆。
- 注意：克隆时，标签上的属性和属性值也会被复制，写在标签行内的绑定事件可以被复制， 但是通过 JavaScript 动态绑定的事件不会被复制。
// 浅度克隆
var newBox = box.cloneNode(false);
document.body.appendChild(newBox);
浅克隆
var newBox = box.cloneNode(true);
document.body.appendChild(newBox);
深度克隆
克隆之后id会出现相同的情况，容易引发冲突，要记得更改id
<div id="box" onclick="alert(2)">
<!-- 行内事件是可以克隆的 -->
var box = my$("box");
var p2 = my$("p2");
box.onclick = function(){
alert(2);
}
// 通过js绑定的时间是不可以克隆的
节点判断方法
- Node.hasChildNodes()：没有参数，返回一个 Boolean 布尔值，来表示该元素是否包含有子节点。
不区分节点类型的判断 - Node.contains(child)：返回一个 Boolean 布尔值，来表示传入的节点是否为该节点的后代节点。
不局限于父子关系，包含节点就会返回true
判断方法总结
1.node.firstChild !== null
2.node.childNodes.length > 0
如果涉及到只判断元素节点的话可以使用first/lastElement或者children来进行判断，道理一样
3.node.hasChildNodes()
节点案例一：动态创建列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>动态创建列表</h1>
<div id="box">
<!-- <ul>
<li>刘备</li>
</ul> -->
</div>
<script src="common.js"></script>
<script>
// 获取元素
var box = my$("box");
// 创建一组数据
var names = ["刘备","曹操","孙权","孙尚香"];
// 生成ul元素
var ul = document.createElement("ul");
// 添加ul元素到box内部
box.appendChild(ul);
// 根据数组的项数往ul添加数据
for(var i = 0;i<names.length;i++){
// 每次都要新生成一个li标签元素添加到ul内部
var li = document.createElement("li");
ul.appendChild(li);
// 给每个生成的li添加内容
li.innerText = names[i];
}
</script>
</body>
</html>
节点案例二：动态创建表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
border-collapse: collapse;
}
thead{
background-color: #ccc;
}
th,td{
width: 100px;
height: 40px;
text-align: center;
}
</style>
</head>
<body>
<h1>动态创建表格</h1>
<table id="wrap" border="1">
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tb">
</tbody>
</table>
<script src="common.js"></script>
<script>
// 获取元素
var tb = my$("tb");
// 模拟后台传输的数据
var datas = [
{name:"张三",subject:"语文",score:"90"},
{name:"李四",subject:"数学",score:"80"},
{name:"王五",subject:"英语",score:"70"},
{name:"刘备",subject:"物理",score:"60"},
{name:"曹操",subject:"生物",score:"87"},
{name:"孙权",subject:"化学",score:"100"}
];
// 根据数组中的数据个数，生成对应个数的tr
// 将生成的tr添加到tbody中
// 数组遍历
for(var i =0;i < datas.length; i++){
// 每一个数据生成tr
var tr = document.createElement("tr");
tb.appendChild(tr);
// 每一个tr中还需要添加对应的td
// 每一行内部的td中的数据来自于datas数组的每一项
var data = datas[i];// {name:"张三",subject:"语文",score:"90"}
// 遍历data对象，根据他的项数确定添加td的个数
for(var k in data){
// 生成一个td
var td = document.createElement("td");
// 添加到tr中去
tr.appendChild(td);
// 添加给每一个td的数据
td.innerText = data[k];
}
// 除了前面动态获取的数据td之外，还有一个删除的操作的td
td = document.createElement("td");
// 添加到tr中蛆
tr.appendChild(td);
// 最后一个td中需要添加一个a标签
var a = document.createElement("a");
a.innerText = "删除";
a.href = "javascrpit:void(0)";
// 将a添加到td中
td.appendChild(a);
// 给新生成的每个a添加一个点击事件，移除当前所在的行
a.onclick = function(){
// 找到所在的行的tr
// 移除
tb.removeChild(this.parentNode.parentNode);
}
}
</script>
</body>
</html>
节点案例三：选择水果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
select {
width: 200px;
height: 200px;
background-color: #33cccc;
font-size: 20px;
}
</style>
</head>
<body>
<select id="all" size="5" multiple="multiple">
<option>苹果</option>
<option>橘子</option>
<option>梨</option>
<option>西瓜</option>
<option>水蜜桃</option>
</select>
<input type="button" value=">>" id="btn1">
<input type="button" value="<<" id="btn2">
<input type="button" value=">" id="btn3">
<input type="button" value="<" id="btn4">
<select id="choose" multiple="multiple">
</select>
<script src="common.js"></script>
<script>
// 获取元素
var all = my$("all");
var choose = my$("choose");
var btn1 = my$("btn1");
var btn2 = my$("btn2");
var btn3 = my$("btn3");
var btn4 = my$("btn4");
// 给第一个按钮添加点击事件，让all中的所有子元素移动到choose中
btn1.onclick = function(){
// 获取all中所有的子元素
var opts = all.children;//内部的元素都是动态添加的
// 所以要获取最开始的数组的个数
var n = opts.length;
// 将所有的opts的元素添加到choose
// 因为是动态变化的，所以每次取出的都是下标为0的元素
for(var i = 0;i < n; i++){
choose.appendChild(opts[0]);
}
};
// 从choose全部退还到all是同理
btn2.onclick = function(){
var opts = choose.children;
var n = choose.length;
for(var i = 0;i < n;i++){
all.appendChild(opts[0]);
}
};
btn3.onclick = function(){
var opts = all.children;
// 移动的内容希望可以是固定的一个数组的项
var arr = [];
// 通过判断条件可以往arr中添加需要移动的元素
for(var i =0 ; i<opts.length;i++){
if(opts[i].selected === true){
arr.push(opts[i]);
}
}
console.log(arr);
// 对需要移动的固定数组进行遍历
for(var j = 0;j<arr.length;j++){
choose.appendChild(arr[j]);
arr[j].selected = false;
}
};
btn4.onclick = function(){
var opts = choose.children;
// 移动的内容希望可以是固定的一个数组的项
var arr = [];
// 通过判断条件可以往arr中添加需要移动的元素
for(var i =0 ; i<opts.length;i++){
if(opts[i].selected === true){
arr.push(opts[i]);
}
}
console.log(arr);
// 对需要移动的固定数组进行遍历
for(var j = 0;j<arr.length;j++){
all.appendChild(arr[j]);
arr[j].selected = false;
}
};
</script>
</body>
</html>
思考：动态添加数据的话怎么修改？
