声明:只收录常用的API
1.增
.appendChild():添加元素节点作为最后一个子节点
.append():添加元素或者文本节点作为最后一个子节点
以上两个之间的区别:.append()可以同时传入多个节点或者字符串没有返回值;
.appendChild()只能传入一个节点,且不支持字符串。
.prepend():添加元素节点或者文本节点作为第一个子节点
.insertBefore( , ):把一个新的元素节点插入到一个已有的节点前边
2.删
.remove():把一个元素自身删掉
.removeChild():通过父节点删除子节点
3.删
.innerText():用字符串替换标签内部的信息
.innerHTML():用标签结构替换原有信息
4.查
document.body:直接找到body
document.head:直接找到head
document.documentElement:直接找到根标签HTML
document.all:找到文档中所有标签
getElementById, getElementsByClassName, querySelecter...:通过固定条件进行查找
<!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>元素节点</title>
</head>
<body>
<div id="d1" class="d2" name="d4">1</div>
<div id="d1" class="d2" name="d4">2</div>
<script>
// 声明: 此课件只收录常用API
var body = document.body;
// 1, 增
document.write("<h1>标题</h1>")
var h2 = document.createElement("h2")
h2.innerText = "二标题"
body.appendChild(h2) // 添加元素节点作为最后一个子节点
body.append("text1") // 添加文本节点作为最后一个子节点
body.prepend(h2) // 添加元素节点作为第一个子节点
body.prepend("text2") // 添加文本节点作为第一个子节点
var first = body.childNodes[3]
console.log(body.childNodes)
var h3 = document.createElement("h3")
h3.innerText = "h3"
body.insertBefore(h3, first) // 把一个新的元素节点插入到一个已有的节点前边
// 2, 删
var h1 = document.getElementsByTagName("h1")[0]
h1.remove() // 把一个元素自身删掉
body.removeChild(body.childNodes[0]) // 通过父节点删除子节点
// 3,改
var u = document.createElement("u");
u.innerText = "下划线"
body.replaceChild(u, body.children[0])
// body.innerText = "<h1>123</h1>" // 用字符串替换标签内部的信息
// body.innerHTML = "<h1>123</h1>" // 用标签结构替换原有信息
// 4,查
console.log(document.documentElement) // 直接找到根标签html
console.log(document.body) // 直接找到body
console.log(document.head) // 直接找到head
console.log(document.all) // 找到文档中所有的标签
var d1 = document.getElementById('d1') // 通过id找到第一个符合条件的元素
console.log(d1.innerText) // 在js中会自动生成与元素的id值同名的变量指向这个元素
var d2 = document.getElementsByClassName("d2") // HTMLCollection
console.log(d2) //通过class类名找到所有符合条件的元素集合
var d3 = document.getElementsByTagName("div") // HTMLCollection
console.log(d3) //通过标签名找到所有符合条件的元素集合
var d4 = document.getElementsByName("d4") // NodeList
console.log(d4) //通过name属性找到所有符合条件的节点列表
var d5 = document.querySelector("body .d2") // Element
console.log(d5) //通过样式选择器找到第一个符合条件的元素
var d6 = document.querySelectorAll("body .d2") // NodeList
console.log(d6) //通过样式选择器找到所有符合条件的元素节点列表
// 查找标签有时获得的是元素集合HTMLCollection或节点列表NodeList, 他们都不是数组,而是类数组,可通过以下三种方式遍历
// 1, for循环遍历
for (var i = 0; i < d6.length; i++) {
console.log(d6[i])
}
// 2, 把类数组转化成数组,使用forEach遍历
Array.from(d6).forEach(function(item) {
console.log(item)
})
// 3, 使用forof循环
for (var item of d6) {
console.log(item)
}
// 总结: 元素节点和文本节点常用的增删改查API
// 增:documen.write, append, appendChild, prepend, insertBefore
// 删:remove, removeChild
// 改:replaceChild, innerText, innerHTML
// 查:document.body, getElementById, getElementsByClassName, querySelecter
// 上边的元素查找都是通过document查找的, 也可以不用document,而用任意元素查找
// 补充: 使用元素上下左右查找
console.log(1, h3.parentElement) // 找到父元素
console.log(2, h3.parentNode) // 找到父节点
console.log(3, h3.children) // 找到所有子元素
console.log(4, h3.childNodes) // 找到所有子节点
console.log(5, h3.childElementCount) // 子元素个数
console.log(6, h3.previousSibling) // 找到元素前边相邻的一个兄弟节点
console.log(7, h3.previousElementSibling) // 找到元素前边相邻的一个兄弟元素
console.log(8, h3.nextSibling) // 找到元素后边相邻的一个兄弟节点
console.log(9, h3.nextElementSibling) // 找到元素后边相邻的一个兄弟元素
</script>
</body>
</html>