1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
| <!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>
<div class="parent">
<div class="son"></div>
</div>
<span>brother</span>
<ul>
<li>aaa</li>
</ul>
<button>删除第一个li节点</button>
<script>
// 元素节点 nodeType为1
// 属性节点 nodeType为2
// 文本节点 nodeType为3
var par = document.querySelector(".parent");
///////////////////////////////获取子节点和元素//////////////////////////////
//获取所有子节点
console.log("所有子节点:",par.childNodes); // div有三个子节点，分别是"换行符"、"div .son"、"换行符"
// 获取第一个和最后一个子节点
console.log("第一个子节点:",par.firstChild);
console.log("最后一个子节点:",par.lastChild);
// 获取所有子元素
console.log("所有子元素:",par.children);
// 获取第一个和最后一个子元素
console.log("第一个子元素:",par.firstElementChild);
console.log("最后一个子元素:",par.lastElementChild);
//////////////////////////////获取兄弟节点和元素//////////////////////////////
//获取上一个和下一个兄弟节点
console.log("下一个兄弟节点:",par.nextSibling);
console.log("上一个兄弟节点:",par.previousSibling);
//获取上一个和下一个兄弟元素
console.log("下一个兄弟元素:",par.nextElementSibling); // 下一个兄弟节点是span
console.log("上一个兄弟元素:",par.previousElementSibling); // 上一个兄弟节点是null
//////////////////////////////获取父弟节点和元素//////////////////////////////
console.log("父节点:",par.parentNode);
console.log("父元素:",par.parentElement);
//////////////////////////////创建元素节点//////////////////////////////
// 父元素中追加一个新的元素
// 先获取父级标签
var ul = document.querySelector("ul")
// 创建一个新的元素
var li = document.createElement("li")
// 填写内容和追加
li.innerHTML="我是追加的"
ul.appendChild(li)
// 在某个元素的前面插入
//获取在谁前面插入
// var aaa = document.querySelector("ul>li")
var aaa = ul.children[0]
// 创建一个新的元素
var li2 = document.createElement("li")
// 填写内容和追加
li2.innerHTML = "我是插入的"
ul.insertBefore(li2,aaa)
//////////////////////////////删除节点//////////////////////////////
var btn = document.querySelector("button")
btn.onclick = function(){
if (ul.children[1] === undefined){
this.disabled=true
}
ul.removeChild(ul.children[0])
}
</script>
</body>
</html>
|
SoulChild
微信号
微信打赏