节点
1.节点 node ： 网页一切内容皆为节点
* 节点作用 ： 让渲染引擎准确的渲染dom树
2.四种节点： 元素节点、 属性节点 、 文本节点 、 注释节点
* 最重要： 元素节点(标签)
查询节点之查询子节点
代码格式:父元素.children
<!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>
<ul>
我是文本哈
<li>我是班长1</li>
<li>我是班长2</li>
<li>我是班长3</li>
<li>我是班长4</li>
<li>我是班长5</li>
</ul>
<script>
let ul = document.querySelector('ul')
console.log(ul.children)
</script>
</body>
</html>
查询兄弟节点
代码格式:
查询上一个兄弟元素:元素.previousElementSibling
查询下一个兄弟元素:元素.nextElementSibling
<!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">点我操作li2的兄弟节点</button>
<ul>
<li>我是班长1</li>
<li id="li2">我是班长2</li>
<li>我是班长3</li>
<li>我是班长4</li>
<li>我是班长5</li>
</ul>
<script>
let li2 = document.querySelector('#li2')
console.log(li2.previousElementSibling)
console.log(li2.nextElementSibling)
</script>
</body>
</html>
查询父元素节点
代码格式:子元素.parentNode
<!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>
<ul>
<li>我是班长1</li>
<li id="li2">我是班长2</li>
<li>我是班长3</li>
<li>我是班长4</li>
<li>我是班长5</li>
</ul>
<script>
let li2 = document.querySelector('#li2')
console.log(li2.parentNode)
</script>
</body>
</html>
创建节点
代码格式:document.createElement('标签名')
新增节点的3个步骤:
1.创建节点
let li = document.createElement('标签名')
2.为节点添加内容(方法很多)
li.innerText=''
3.添加到dom树
ul.appendChild(li)
<!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>
<ul>
<li>我是班长1</li>
<li id="li2">我是班长2</li>
<li>我是班长3</li>
<li>我是班长4</li>
<li>我是班长5</li>
</ul>
<script>
let newLi = document.createElement('li')
newLi.innerHTML = '<a href="#">你好,小吴</a>'
document.querySelector('ul').appendChild(newLi)
</script>
</body>
</html>
添加到dom树的方式
新增到最后面与新增到指定位置
新增到最后面
父元素.apprenChild()
新增到指定位置
父元素.insertBefore(子元素,要新增到那元素前面)
克隆节点
代码格式:元素.cloneNode(布尔值)
元素.cloneNode(false):克隆自身
元素.cloneNode(true):克隆自身+子元素
删除节点
代码格式:父元素.removeChild(子元素)
定时器
永久定时器
代码格式:let newLi = setInterval(function(){},间隔时间)
手动清除定时器:clearInterval(newLi)
<!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>
<p id="pp">0</p>
<script>
let pp = document.querySelector('#pp')
let btn = document.querySelector('.btn')
let newID = setInterval(function () {
console.log('小吴,你好呀!')
pp.innerText++
}, 100)
btn.onclick = function () {
clearInterval(newID)
}
</script>
</body>
</html>
间隔定时器
在间隔时间里只执行一次,执行完毕后自动清除
代码格式:let newLi = setTimeout(function(){},间隔时间)
手动清除:clearTimeout(newLi)
<!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>
<p id="pp">0</p>
<script>
let btn = document.querySelector('.btn')
let newID = setTimeout(function () {
console.log('哈哈哈哈哈')
}, 3000)
btn.onclick = function () {
clearTimeout(newID)
}
</script>
</body>
</html>
