DOM节点增删改查

一.查找元素节点

(1)获取子元素

父元素.children

(2)获取兄弟节点

获取上一次元素: 元素.previousElementSibling

获取下一次元素: 元素.nextElementSibling

(3)获取父元素

子元素.parentNode

二.新增节点

1.复习介绍dom新增元素三种方式

1.1 document.write('') 开发中几乎不用(可能会覆盖原来的内容)

1.2 元素.innerHTML = '' 新增100以内的元素时可以用

覆盖操作： 元素.innerHTML = '<h1>标题</h1>'

新增操作： 元素.innerHTML += '<h1>标题</h1>'

1.3 document.createElement()

2.重点掌握 createElement 三个使用流程

(1)在内存中创建一个空标签
let newLi = document.createElement('li')
(2)设置样式和内容
newLi.innerText = ('我是新来的')
newLi.style.backgroundColor = 'yellow'
(3)添加到dom树: 父元素.appendChild(子元素)
   ul.appendChild(newLi)

3.新增到最后面与新增到指定位置

添加到最后面: 父元素.appenChild(子元素)

添加到元素前面:父元素.insertBefore(子元素,添加在选定元素前面)

三.克隆节点

克隆节点：复制节点

    元素.cloneNode(true)
    
        默认false : 浅克隆，只克隆元素自身 
        true : 深克隆，克隆元素自身  + 所有后代元素
    
    let box = document.querySelector('.box')
    document.querySelector('.btn').onclick = function () {
        //  (1)在内存克隆
        let cBox = box.cloneNode(true)
        //(2)添加到页面
        document.body.appendChild(cBox)
    }

四.删除节点

3.删：父元素.removeChild(子元素)

    let ul = document.querySelector('ul')
    let li2 = document.querySelector('#li2')
    document.querySelector('.btn').onclick = function () {
        ul.removeChild(li2)
    }

setInterval永久定时器

1.定时器作用：一段代码间隔时间自动执行

2.定时器语法：

2.1 永久定时器: 一旦开启,间隔时间永久执行,只能手动清除

      开启 : let timeID = setInterval(function(){},间隔时间)
      关闭: clearInterval(timeID)
    
let timeID = setInterval(function () {
  pp.innerText++
}, 1000)

//点击按钮关闭定时器
document.querySelector('.btn').onclick = function () {
  clearInterval(timeID)
}

setTimeout一次定时器

1.定时器作用：一段代码间隔时间重复执行 2.定时器语法： 2.2 一次定时器:间隔时间内,只会执行一次,执行完毕后自动清除.

   开启: let timeID = setTimeout(function(){},间隔时间)
    关闭: clearTimeout(timeID)
    
     let timeID = setTimeout(function () {
      pp.innerText++
    }, 5000)

DOM增删改查操作及定时器分类