一、节点的介绍
1.节点 : 网页一切内容皆为节点
* 节点作用 : 为了渲染引擎可以更好的渲染dom树
2.网页有四大节点 : 元素节点 、 文本节点 、 属性节点 、 注释节点
* 最重要的是 元素节点
二、查找节点
2.获取兄弟节点 :
2.1 获取上一个元素 : 元素.previousElementSibling
2.2 获取下一个元素 : 元素.nextElementSibling
3.获取父元素 : 元素.parentNode
* 父节点一定是元素,因为只有元素节点才会有儿子
三、新增节点
1.介绍dom中新增元素有三种语法
1.1 document.write( '字符串' ) : 几乎不用.(可能会覆盖原来的内容)
1.2 元素.innerHTML : 少用(使用的时候会有性能问题,低于100个元素就可以使用)
覆盖操作: 元素.innerHTML = '字符串'
新增操作: 元素.innerHTML += '字符串'
1.3 元素.createElement() : dom推荐
2. 重点掌握 createElement三个流程
(1)在内存中 创建 空标签: let newLi = document.createElement('标签名')
(2)设置标签内容
(3)添加到dom树 : 父元素.appendChild(子元素)
3. 元素添加到最后面 与 最前面
添加到最后面: 父元素.appendChild(子元素)
添加到元素前面: 父元素.insertBefore(子元素, 哪个元素前面 )
四、克隆节点
克隆节点 ： 复制节点
元素.cloneNode(true)
默认false : 浅克隆。 只克隆自己,不可隆自己后代
true : 深克隆。 克隆自己+克隆后代
五、删除节点
查子元素: 元素.children
查兄弟元素:
上一个元素： 元素.previousElementSibling
下一个元素： 元素.nextElementSibling
查父元素 : 元素.parentNode
2.增 ： document.createElement()
(1)内存创建空节点： document.createElement('标签名')
(2)设置标签内容
(3)添加到页面dom
新增到最后面 ： 父元素.appendChild(元素)
新增到元素前面 ： 父元素.insertBefore(要加的元素,哪一个元素前面)
3.删 ： 父元素.removeChild(子元素)
六、定时器
2.定时器语法 ：
2.1 永久定时器 : 一旦开启, 间隔时间永久执行。只能手动清除
开启: let timeID = setInterval( function(){} , 间隔时间 )
关闭: clearInterval(timeID)
2.2 一次定时器 : 间隔时间内,只会执行一次。执行完毕后自动清除。
开启: let timeID = setTimeout( function(){}, 间隔时间 )
关闭 : clearTimeout(timeID)
* @description: 开启定时器
* @param {function} 一段代码
*回调函数 : 如果一个函数的参数也是函数，那么这个参数函数 叫做回调函数
* @param {number} 间隔时间 单位 毫秒 1s = 1000ms
* @return: 一个页面可以开启很多个定时器,浏览器为了便于管理这些定时器。会给每一个定时器一个编号，称之为定时器ID
开启定时器
let timeID = setInterval(function(){
pp.innerText++
},1000)
关闭定时器
document.querySelector('.btn').onclick = function(){
/**
* @description: 清除定时器
* @param {number} 定时器id
* @return: 无
*/
clearInterval(timeID)
}
一次性定时器
let timeID = setTimeout(function(){
pp.innerText++
},5000)
