节点介绍
网页内容由 节点 组成 ： 一切内容皆节点
- 元素(标签)节点 ： 例如 div 标签
- 属性节点 ： 例如 class 属性
- 文本节点 ： 例如标签里面的文字
- 注释节点 ： 例如 HTML 中的注释
一、查找节点
1.查找子节点
- childNodes ：所有子节点
- children ：所有子元素节点
<!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>
<ul>
<li>我是小li1</li>
<li class="li2">我是小li2</li>
<li>我是小li3</li>
<li>我是小li4</li>
<li>我是小li5</li>
</ul>
</body>
<script>
let ul = document.querySelector(`ul`)
let li2 = document.querySelector('.li2')
// 1.获取 ul 的所有子节点
console.log(ul.childNodes)
// NodeList(11) [text, li, text, li.li2, text, li, text, li, text, li, text]
// 2.获取 ul 的所有子元素节点(常用)
console.log(ul.children)
// HTMLCollection(5) [li, li.li2, li, li, li]
// 3.修改 ul 的子元素节点的颜色
ul.children[1].style.backgroundColor = 'green'
// li2.style.backgroundColor = 'green'
</script>
</html>
复制代码2.查找父节点
- parentNode ：父节点
<!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>
<ul>
<li>我是小li1</li>
<li class="li2">我是小li2</li>
<li>我是小li3</li>
<li>我是小li4</li>
<li>我是小li5</li>
</ul>
</body>
<script>
let li2 = document.querySelector('.li2')
//获取父节点
console.log(li2.parentNode)//ul
console.log(li2.parentNode.parentNode)//body
console.log(li2.parentNode.parentNode.parentNode)//html
console.log(li2.parentNode.parentNode.parentNode.parentNode)//document
console.log(li2.parentNode.parentNode.parentNode.parentNode.parentNode)//null(万物皆空)
</script>
</html>
复制代码3.查找兄节点
- previousElementSibling：上一个兄弟节点
- nextElementSibling：下一个兄弟节点
<!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 class="box">我是ul的上一个兄弟</div>
<ul>
<li>我是小li1</li>
<li class="li2">我是小li2</li>
<li>我是小li3</li>
<li>我是小li4</li>
<li>我是小li5</li>
</ul>
<p>我是ul的下一个兄弟</p>
</body>
<script>
let ul = document.querySelector(`ul`)
let li2 = document.querySelector(`.li2`)
// 1.设置 ul 的上一个兄弟节点的 backgroundColor
ul.previousElementSibling.style.backgroundColor = 'pink'
// 2.设置 ul 的下一个兄弟节点的 backgroundColor
ul.nextElementSibling.style.backgroundColor = 'skyblue'
// 3.设置 li2 的上一个兄弟节点的 backgroundColor
li2.previousElementSibling.style.backgroundColor='green'
// 4.设置 li2 的下一个兄弟节点的 backgroundColor
li2.nextElementSibling.style.backgroundColor='blue'
</script>
</html>
复制代码二、新增节点
- 父元素.appendChild(新增的元素)：添加在最后面
- 父元素.insertBefore(新增的元素，插入的位置)：添加在指定位置
<!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>
<button class="btn1">添加到最后面</button>
<button class="btn2">添加到li2的后面</button>
<button class="btn3">添加到li2的前面</button>
<button class="btn4">添加到最前面</button>
<ul>
<li>我是li1</li>
<li id="li2">我是li2</li>
<li>我是li3</li>
<li>我是li4</li>
<li>我是lil5</li>
</ul>
</body>
<script>
let li2=document.querySelector('#li2')
let ul =document.querySelector('ul')
// 1.添加到最后面
let btn1=document.querySelector('.btn1')
btn1.onclick=function(){
let li=document.createElement('li')
li.innerText='我是添加到最后面的li'
// li2.parentNode.appendChild(li)
ul.appendChild(li)
}
// 2.添加到 li2 的后面
let btn2=document.querySelector('.btn2')
btn2.onclick=function() {
let li=document.createElement('li')
li.innerText='我是添加到li2后面的li'
// li2.parentNode.insertBefore(li,li2.nextElementSibling)
ul.insertBefore(li,li2.nextElementSibling)
}
// 3.添加到 li2 的前面
let btn3=document.querySelector('.btn3')
btn3.onclick=function(){
let li=document.createElement('li')
li.innerText='我是添加到li2的前面的li'
// li2.parentNode.insertBefore(li,li2.parentNode.children[1])
ul.insertBefore(li,li2)
}
// 4.添加到最前面的
let btn4=document.querySelector('.btn4')
btn4.onclick=function(){
let li=document.createElement('li')
li.innerText='我是添加到最前面的li'
// li2.parentNode.insertBefore(li,li2.parentNode.children[0])
ul.insertBefore(li,ul.children[0])
}
</script>
</html>
复制代码三、克隆节点
- cloneNode(true)：克隆样式和内容
- cloneNode(false)：克隆样式，不克隆内容
<!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>
.box {
width: 300px;
height: 150px;
border: 1px solid pink;
margin-top: 10px;
}
</style>
</head>
<body>
<button class="btn">点我克隆节点</button>
<div class="box">
<a href="javascript:;">我是小 a </a>
<p>我是p标签</p>
<ul>
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
</ul>
</div>
</body>
<script>
// 获取数据
let btn = document.querySelector('.btn')
let box = document.querySelector('.box')
let body = document.body
// 注册事件
btn.onclick = function () {
//如果是false,克隆的只有样式,没有内容
let cloneBox = box.cloneNode(true)
body.appendChild(cloneBox)
}
</script>
</html>
复制代码四、删除节点
- 父元素.removeChild(子元素)
- 自己.remove(自己)
<!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>
<button class="btn">点我删除节点</button>
<ul>
<li>我是li1</li>
<li id="li2">我是li2</li>
<li>我是li3</li>
<li>我是li4</li>
<li>我是li5</li>
</ul>
<script>
// 获取元素
let btn = document.querySelector('.btn')
let ul = document.querySelector('ul')
let li2 = document.querySelector('#li2')
let body = document.body
// 注册事件
btn.onclick = function () {
// 1.点击删除 li2
// btn.nextElementSibling.removeChild(btn.nextElementSibling.children[1])
// ul.removeChild(li2)
li2.remove(li2)
// 2.点击删除 ul
// btn.parentNode.removeChild(btn.nextElementSibling)
// ul.parentNode.removeChild(ul)
// body.removeChild(ul)
// ul.remove(ul)
// 3.点击删除自己
// ul.parentNode.removeChild(btn)
// btn.remove(btn)
// 4.点击删除自己和 ul
// btn.parentNode.parentNode.removeChild(body)
// body.remove(body)
}
</script>
</body>
</html>
复制代码