1、childNodes
js
复制代码
获取标签的所有子级节点
2、children
js
复制代码
获取标签的所有子级元素节点
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
graph TD
Start --> Stop
3、firstChild
js
复制代码
获取标签内的第一个子级节点
4、lastChild
js
复制代码
获取标签内的最后一个节点
5、firstElementChild
js
复制代码
获取 标签内第一个子级元素节点
6、lastElementChild
js
复制代码
获取标签的最后一个子级元素节点
7、nextSibling
js
复制代码
获取下一个兄弟节点
8、previousSibling
js
复制代码
获取上一个兄弟节点
9、nextElementSibling
js
复制代码
获取下一个兄弟元素节点
10、previousElementSibling
js
复制代码
获取 上一级 兄弟元素节点
11、parentNode
js
复制代码
获取到当前元素的父级
12、attributes
js
复制代码
获取到当前标签的所有属性节点
13、节点属性
js
复制代码
<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>
获取节点类型
js
复制代码
console.log('元素节点：',elemNode.nodeType)
console.log('元素节点：',textNode.nodeType)
console.log('元素节点：',attriNode.nodeType)
获取节点名称
js
复制代码
console.log('元素节点：',elemNode.nodeName)
console.log('元素节点：',textNode.nodeName)
console.log('元素节点：',attriNode.nodeName)
获取节点的值
js
复制代码
console.log('元素节点：',elemNode.nodeValue)
console.log('元素节点：',textNode.nodeValue)
console.log('元素节点：',attriNode.nodeValue)
14、添加DOM
js
复制代码
<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、指定元素插入指定位置
js
复制代码
<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、删除/修改元素
js
复制代码
<!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>
```js
const myDiv = document.createElement('div')
const div2 = document.querySelector('.div2')
//删除 div2
div2.remove()
</script>
js
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
```js
我是p标签
<script>
const span1 = document.createElement('span')
const p1 = document.querySelector('p')
const div1 = document.querySelector('.div1')
span1.innerHTML = '我是span标签'
div1.replaceChild(span1,p1)
````js`
</script>
</body>
</html>
17、克隆DOM
js
复制代码
<!DOCTYPE html>
<html lang="en">
```js
ol {
width: 200px;
height: 200px;
background-color: green;
margin-top: 20px;
}
</style>
- 你好~
</ol>
<script>
var myLi = document.querySelector('.box')
var myOl = document.querySelector('ol')
var cloneLi = myLi.cloneNode(true)
myOl.appendChild(cloneLi)
</script>
