Wapi-节点增删减查1.节点是(HTML文档本身标签属性注释内容文本) 元素与节点是包含关系节点三要素：节

1.节点是(HTML文档本身标签属性注释内容文本)

元素与节点是包含关系

节点三要素：

节点类型：标签、属性、注释、文本
节点名称：p、div、class（标签名）
节点的值：one（属性的值）

1.网页内容是由标签组成是：不严谨的

2.网页内容由节点组成：一切内容皆节点

元素(标签)节点：例如 div标签

属性节点：例如 class属性

文本节点：比如标签里面的文字

注释节点：比如HTML中的注释

3.DOM节点操作重点记住：元素节点

<body>
    <!-- 我是注释 -->
    <div class="box" id="box">我是班长</div>
    <p>我是班长的大哥</p>


    金榜题名


    <script>
      
    </script>
</body>

2.查询节点语法使用(单词要记住)

 1.获取子元素 :  父元素.children
        2.获取兄弟元素 : 
          获取上一次元素 ： 元素.previousElementSibling
          获取下一次元素 ： 元素.nextElementSibling
        3.获取父元素 : 父元素.parentNode

  <script>
 
    //1.获取元素
    let li2 = document.querySelector('#li2')
    console.log(li2.parentNode) //ul  父亲
    console.log(li2.parentNode.parentNode)  //body  爷爷
    console.log(li2.parentNode.parentNode.parentNode)   //html  曾爷爷
    console.log(li2.parentNode.parentNode.parentNode.parentNode)   //document
    console.log(li2.parentNode.parentNode.parentNode.parentNode.parentNode)   //null
  </script>
</body>

3.新增节点(单词要记住)

复习dom树新增元素有三种方式

学习目标：新增节点三个流程

1.内存中创建一个空节点： document.createElement('标签名')

2.设置节点内容

3.追加到页面

追加到最后面：父元素.appendChild(子元素)

追加指定元素前面：父元素.insertBefore(子元素,哪个元素的前面)

    <script>
        //1.在内存中创建一个空节点 
        let newLi = document.createElement('li')
        //2.设置节点内容
        newLi.innerText = '我是新增节点'
        //3.追加到dom树页面
        
        let ul = document.querySelector('ul')
        let li2 = document.querySelector('#li2')
        //3.1 追加到最后面    ：   父元素.appendChild(子元素)
        ul.appendChild(newLi)
        //3.2 追加指定元素前面 ：  父元素.insertBefore(A元素,B元素)
        ul.insertBefore(newLi,li2)
    </script>

4.克隆节点

克隆节点：复制节点

元素.cloneNode(true)

默认false : 浅克隆，只克隆元素自身

true : 深克隆，克隆元素自身 + 所有后代元素

        document.querySelector('.btn').onvlick = function () {
            //获取box
            let box = document.querySelector('.box')
            //1.在内存中克隆节点
            let cBox = box.cloneNode(true)
            console.log(cBox)


            //2.添加到dom树
            document.body.appendChild(cBox)
        }

5.删除节点

语法：父元素.removeChild(子元素)

<body>
    <button class="btn">点我删除节点</button>
    <ul>
        <li>我是班长1</li>
        <li id="li2">我是班长2</li>
        <li>我是班长3</li>
        <li>我是班长4</li>
        <li>我是班长5</li>
    </ul>


    <script>
        /*学习目标：  删除节点
            父元素.removeChild(子元素) 
         */


         let ul = document.querySelector('ul')
         let li2 = document.querySelector('#li2')
        document.querySelector('.btn').onclick = function(){
            //删除节点
            ul.removeChild(li2)
        }
    </script>
</body>

6.内置日期对象

    <script>
        //1.创建日期对象    
        let d = new Date()
        console.log(d)


        //2.转换日期格式
        console.log( d.toLocaleString() )//2022/1/18 下午3:02:53
        console.log( d.toLocaleDateString() )//2022/1/18
        console.log( d.toLocaleTimeString() )//下午3:03:29


        //3.获取 年月日时分秒
        console.log( d.getFullYear() )//2022
        //范围下标 0-11 对应 1-12月
        console.log( d.getMonth() )//0 下标  第1个月
        console.log( d.getDate() )//18
        //星期下标 0-6 对应 周日-周六
        console.log( d.getDay() )//2
        console.log( d.getHours() )//15
        console.log( d.getMinutes() )//5
        console.log( d.getSeconds() )//44


        //4.获取时间戳  ： 1970年1月1日0秒 伦敦时间 -> 现在时间总毫秒数
        //时间戳作用 ： 解决浏览器时区兼容性    UTC时区:全球时区   GMT时区：东8区
        console.log( Date.now() )//1642489697575
        console.log( +new Date() )//1642489741950
        console.log( new Date().getTime() )//1642489741950
        
    </script>

7.定时器

7.1setInterval 永久定时器

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

2.定时器语法：

2.1 setInterval : 永久定时器。一旦开启，永久重复执行，只能手动清除

(1)开启： let timeID = setInterval( 回调函数 , 间隔时间 )

(2)清除： clearInterval( timeID )

<script>
      
      /**
      * @description: 开启定时器
      * @param {function} 一段代码
        * 回调函数 ： 如果一个函数的参数也是函数，这个参数函数就叫做回调函数   
      * @param {number} 间隔时间  单位毫秒  1s = 1000ms
      * @return: 定时器id
        * 一个页面可以开启很多定时器，浏览器为了更好管理这些定时器。会给每一个定时器一个编号。称之为定时器id   
      */
      let timeID =  setInterval( function(){
        let pp = document.querySelector('#pp')
        pp.innerText++//pp.innerText = Number( pp.innerText ) + 1
      } ,1000 )


      //点击按钮：关闭定时器
      document.querySelector('.btn').onclick = function(){
        //参数： 定时器id
        clearInterval(timeID)
      }
    </script>

7.2setTimeout 一次定时器