1、childNodes
获取标签的所有子级节点
2、children
获取标签的所有子级元素节点
3、firstChild
获取标签内的第一个子级节点
4、lastChild
获取标签内的最后一个节点
5、firstElementChild
获取 标签内第一个子级元素节点
6、lastElementChild
获取标签的最后一个子级元素节点
7、nextSibling
获取下一个兄弟节点
8、previousSibling
获取上一个兄弟节点
9、nextElementSibling
获取下一个兄弟元素节点
10、previousElementSibling
获取 上一级 兄弟元素节点
11、parentNode
获取到当前元素的父级
12、attributes
获取到当前标签的所有属性节点
13、节点属性
<ul a="周一来了">
<li>国庆快乐</li>
</ul>
<script>
const oUl = document.querySelector('ul')
const elemNode = oUl.firstElementChild
const textNode = oUl.firstChild
const attriNode = oUl.attributes[0]
</script>
获取节点类型
console.log('元素节点：',elemNode.nodeType)
console.log('元素节点：',textNode.nodeType)
console.log('元素节点：',attriNode.nodeType)
获取节点名称
console.log('元素节点：',elemNode.nodeName)
console.log('元素节点：',textNode.nodeName)
console.log('元素节点：',attriNode.nodeName)
获取节点的值
console.log('元素节点：',elemNode.nodeValue)
console.log('元素节点：',textNode.nodeValue)
console.log('元素节点：',attriNode.nodeValue)
14、添加DOM
<script>
const myDiv = document.createElement('div')
myDiv.style.width = '100px'
myDiv.style.height = '100px'
myDiv.style.backgroundColor = 'red'
document.querySelector('body').appendChild(myDiv)
</script>
15、指定元素插入指定位置
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<script>
const myDiv = document.createElement('div')
const div2 = document.querySelector('.div2')
myDiv.style.width = '100px'
myDiv.style.height = '100px'
myDiv.style.backgroundColor = 'red'
myDiv.innerHTML = 'div4'
document.querySelector('body').insertBefore(myDiv,div2)
</script>
16、删除/修改元素
<!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>
.div1{
width: 100px;
height: 100px;
background-color: yellow;
}
.div2{
width: 100px;
height: 100px;
background: pink;
}
.div3{
width: 100px;
height: 100px;
background: green;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<script>
const myDiv = document.createElement('div')
const div2 = document.querySelector('.div2')
//删除 div2
div2.remove()
</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>
</head>
<body>
<div class="div1">
<p>我是p标签</p>
</div>
<script>
const span1 = document.createElement('span')
const p1 = document.querySelector('p')
const div1 = document.querySelector('.div1')
span1.innerHTML = '我是span标签'
div1.replaceChild(span1,p1)
</script>
</body>
</html>
17、克隆DOM
<!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>
* {
padding: 0;
margin: 0;
}
ul {
width: 200px;
height: 200px;
background-color: pink;
}
ol {
width: 200px;
height: 200px;
background-color: green;
margin-top: 20px;
}
</style>
</head>
<body>
<ul>
<li class="box"><span>你好~</span></li>
</ul>
<ol>
</ol>
<script>
var myLi = document.querySelector('.box')
var myOl = document.querySelector('ol')
var cloneLi = myLi.cloneNode(true)
myOl.appendChild(cloneLi)
</script>
</body>
</html>
