文章目录
前言
这部分学习DOM节点
一、节点
1.节点属性
（1）nodeType:节点类型，属性值为数字，表示不同的节点类型，共12中，只读
1元素节点 2属性节点 3文本节点
（2）nodeName：节点名称（标签名称），只读
（3）nodeValue：节点值，返回当前设置的节点值，元素节点的值始终为null。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box">div1</div>
<script>
// 获取节点
var box = document.getElementById("box");
//元素节点
console.dir(box);
//属性节点
var isNode = box.getAttributeNode("id");
console.dir(isNode);
isNode.nodeValue = "demo";
//文本节点
var childNode = box.childNodes;
console.dir(childNode);
childNode[0].nodeValue = "我爱你";
</script>
</body>
</html>
2.节点层级-父子节点属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box">
<p>这是一个段落</p>
<span>这是一个小盒子</span>
</div>
<script>
//获取元素
var box = document.getElementById("box");
//子节点1
console.log(box.childNodes);//获取所有类型的子节点
console.log(box.children);//获取所有元素类型的子节点
console.log(box.firstChild);//获取所有类型中的第一个子节点
console.log(box.lastChild);//获取所有类型中的最后一个子节点
console.log(box.lastElementChild);//获取元素类型的最后一个子节点
//父节点
console.log(box.parentNode);
console.log(box.parentElement);
</script>
</body>
</html>
案例：父子节点-隔行换色案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
td{
width: 100px;
height: 40px;
}
</style>
</head>
<body>
<table border="1" style="border-collapse: collapse;">
<tbody id="tb">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<script src="common.js"></script>
<script>
//调用获取元素
var tb = my$("tb");
//获取所有元素子节点
var trs = tb.children;
console.log(trs);
//隔行变色
for (var i = 0;i < trs.length;i++) {
if (i % 2 == 0) {
trs[i].style.backgroundColor = "pink";
} else {
trs[i].style.backgroundColor = "lightgray";
}
}
</script>
</body>
</html>
3.兄弟节点属性
注意:nextElementSibling 和 previousElementSibling有兼容性问题，IE9以后才支持。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
//获取元素
var p3 = document.getElementById("p3");
//获取下一个同级节点
var p4 = p3.nextSibling;
//获取上一个同级节点
var p2 = p3.previousSibling;
//获取下一个同级元素节点
var p44 = p3.nextElementSibling;
//获取上一个同级元素节点
var p22 = p3.previousElementSibling;
console.log(p4);
console.log(p2);
console.log(p44);
console.log(p22);
</script>
</body>
</html>
4.创建节点的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//创建新的节点
var div = document.createElement("div");
console.dir(div);
var cla = document.createAttribute("class");
console.dir(cla);
var txt = document.createTextNode("txt");
console.dir(txt);
</script>
</body>
</html>
注意：只是存储到内存里，并没有直接加载到DOM树之上。
5.添加节点的方法
parentNode. appendChild(child):将一个节点添加到指定父节点的子节点列表末尾。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box">
<p>段落内容 1</p>
<p id="p2">段落内容 2</p>
<p>段落内容 3</p>
<p>段落内容 4</p>
</div>
<script src="common.js"></script>
<script>
// 创建新的节点
var div = document.createElement("div");
var cls = document.createAttribute("class");
var txt = document.createTextNode("hello");
//创建新的节点是存储到内存中的，并没有添加到DOM树中
//获取元素
var box = my$("box");
var p2 = my$("p2");
//添加节点
box.appendChild(div);
//文本节点也可以添加到元素内部
div.appendChild(txt);
//自己创建的节点本身也是一个对象，可以进行添加属性等操作，将操作的元素加载到DOM树中，依旧保留
//将节点从原始位置删除，添加到新的指定位置
box.appendChild(p2);
</script>
</body>
</html>
6.替换、插入、删除子节点的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box">
<p>段落内容 1</p>
<p id="p2">段落内容 2</p>
<p>段落内容 3</p>
<p>段落内容 4</p>
</div>
<script src="common.js"></script>
<script>
// 创建新的节点
var div = document.createElement("div");
var cls = document.createAttribute("class");
var txt = document.createTextNode("hello");
// 创建的新的节点，是存储在内存中的，但是并没添加到 DOM 树上
div.appendChild(txt);
// 获取元素
var box = my$("box");
var p2 = my$("p2");
//替换节点
// box.replaceChild(div,p2);
//在指定位置插入节点
box.insertBefore(div,p2);
//在末尾插入节点
box.insertBefore(div,null);
//删除节点
box.removeChild(p2);
</script>
</body>
</html>
7.克隆节点
.cloneNode():深度克隆，返回值为true，克隆的是某节点以及内部所有的子节点。浅度克隆，返回值为false，克隆的是节点本身。
注意：标签上的属性和属性值也会被克隆，在标签上行内绑定的事件也会被克隆，而在js中绑定的事件不会被克隆。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box">
<p>段落内容 1</p>
<p id="p2">段落内容 2</p>
<p>段落内容 3</p>
<p>段落内容 4</p>
</div>
<script src="common.js"></script>
<script>
// 获取元素
var box = my$("box");
var p2 = my$("p2");
//浅度克隆
// var newBox = box.cloneNode(false);
// document.body.appendChild(newBox);
//深度克隆
var newBox = box.cloneNode(true);
document.body.appendChild(newBox);
</script>
</body>
</html>
8.节点判断的方法
判断有没有子节点的方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box">
<p>段落内容 1</p>
<div>
<p id="p2">段落内容 2</p>
</div>
<p>段落内容 3</p>
<p>段落内容 4</p>
</div>
<div id="demo">
</div>
<script src="common.js"></script>
<script>
//获取元素
var box = my$("box");
var p2 = my$("p2");
var demo = my$("demo");
//判断有没有子节点，不区分元素的
console.log(box.hasChildNodes());
console.log(demo.hasChildNodes());
//判断节点内部是否有后代节点
console.log(box.contains(p2));
//判断内部有子节点的方法有三种
//1.firstChilds() !== null
console.log(box.firstChild !== null);
//2.chlidNode.length > 0
console.log(box.childNodes.length > 0);
//3.hasChildNodes()
console.log(box.hasChildNodes());
</script>
</body>
</html>
二、案例
1.动态创建列表案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box">
</div>
<script>
var box = document.getElementById("box");
var nams = ["刘备","关羽","曹操","赵云"];
//创建子节点
var ul = document.createElement("ul");
//添加子节点
box.appendChild(ul);
for (var i = 0;i < nams.length;i++) {
//创建子节点
var li = document.createElement("li");
//添加子节点
ul.appendChild(li);
li.innerText = nams[i];
}
</script>
</body>
</html>
2.动态创建表格案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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: "zs",subject: "语文",score: 80},
{name: "ls",subject: "数学",score: 56},
{name: "ww",subject: "英语",score: 88},
{name: "lb",subject: "物理",score: 76},
{name: "cc",subject: "化学",score: 90},
{name: "gy",subject: "生物",score: 100}
];
//for循环换遍历数组
for (var i = 0;i < datas.length;i++) {
//创建节点
var tr = document.createElement("tr");
//添加节点
tb.appendChild(tr);
//定义一个变量存储数组中的每一个对象
var data = datas[i];
//遍历对象
for (var k in data) {
//创建节点
var td = document.createElement("td");
//添加节点
tr.appendChild(td);
//向td中添加数据
td.innerText = data[k];
}
//删除的td
var td = document.createElement("td");
//添加节点
tr.appendChild(td);
//创建td中的a标签
var a = document.createElement("a");
a.innerText = "删除";
a.href = "javascript:void(0);"
//将a添加到td中
td.appendChild(a);
//添加点击事件
a.onclick = function () {
tb.removeChild(this.parentNode.parentNode);
}
}
</script>
</body>
</html>
3.选择水果案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</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");
//添加btn1全选的点击事件
btn1.onclick = function () {
var opts = all.children;
var n = opts.length;
for (var i = 0;i < n;i++) {
choose.appendChild(opts[0]);
}
};
//添加btn2全选的点击事件
btn2.onclick = function () {
var opts = choose.children;
var n = opts.length;
for (var i = 0;i < n;i++) {
all.appendChild(opts[0]);
}
};
//添加btn3单选的点击事件
btn3.onclick = function () {
var opts = all.children;
var arr = [];
for (var i = 0;i < opts.length;i++) {
if (opts[i].selected === true) {
arr.push(opts[i]);
}
}
for (var j = 0;j < arr.length ; j++) {
choose.appendChild(arr[j]);
arr[j].selected = false;
}
};
//添加btn4单选的点击事件
btn4.onclick = function () {
var opts = choose.children;
var arr = [];
for (var i = 0;i < opts.length;i++) {
if (opts[i].selected === true) {
arr.push(opts[i]);
}
}
for (var j = 0;j < arr.length ; j++) {
all.appendChild(arr[j]);
arr[j].selected = false;
}
};
</script>
</body>
</html>
总结
这部分学习了节点的各种操作方法，创建节点、添加节点、删除、替换、插入、克隆节点等操作，还学习了怎么样获取父子级和兄弟级的节点，以及如何判断有无子节点。坚持学习前端~
1850
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
