Dom节点介绍

什么是节点在HTML文档中一切皆节点(HTML文档本身,标签属性,注释内容,文本) 什么是元素

元素在HTML中叫做标签,在js的dom称为元素
HTMl标签属于节点的一种叫做元素节点

节点三要素

节点类型:标签属性注释文本
节点名称:p div class...
节点的值:one(属性的值)

查找子节点

获取子节点 : 父元素.childNodes
获取子元素节点（重点）: 父元素.children

<li>我是第一个</li>
<li>我是第二个</li>
<li>我是第三个</li>
<li>我是第四个</li>
</ul>
let ul=document.querySelector('li')
ul.childNodes
ul.cheildren

查找父节点 语法:子元素.parentNode

<li>我是第一个</li>
<li id="id">我是第二个</li>
<li>我是第三个</li>
<li>我是第四个</li>
</ul>
let id=document.querySelector('#id')
id.parentNode//ul

新增节点

语法:document.createElement('标签名')
设置内容:变量名.innerText='内容'
追加后前面:父元素.appendChild(子元素)
追加到指定的元素前面:父元素.insertBefore(A元素,B元素)

      <li>我是班长1</li>
      <li id="li2">我是班长2</li>
      <li>我是班长3</li>
      <li>我是班长4</li>
      <li>我是班长5</li>
    </ul>
    <script>
      //1.内存中创建一个空节点 
        let newLi = document.createElement('li')
        //2.设置节点内容
        newLi.innerText = '我是新增节点'
        //3.追加到页面
        
        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>

克隆节点语法:ul.cloneNode(布尔类型)

默认false：不克隆后代节点
true:克隆后代节点

    <div class="box">
        <a href="我是链接"></a>
        <p>我是p标签</p>
        <ul>
            <li>我是ikun1</li>
            <li>我是ikun2</li>
        </ul>
    </div>
    <script>
        let box = document.querySelector('.box')	
        document.querySelector('.btn').onclick = function(){
            //克隆节点  false:不克隆后代节点  true:克隆后代节点
            let newBox = box.cloneNode(true)
            document.body.appendChild(newBox)
        }
    </script>

删除节点语法: 父元素.removeChild(子元素)

    <ul>
        <li>我是班长1</li>
        <li id="li2">我是班长2</li>
        <li>我是班长3</li>
        <li>我是班长4</li>
        <li>我是班长5</li>
    </ul>
    <script>
         let ul = document.querySelector('ul')
         let li2 = document.querySelector('#li2')
        document.querySelector('.btn').onclick = function(){
            //删除节点
            ul.removeChild(li2)
        }
    </script>

定时器

定时器分为两种在这个阶段第一种是永久定时器第二种是一次性定时器

永久定时器语法:setInterval(function(){},间隔时间)

<button class="btn">移除定时器</button>
    <p id="pp">0</p>
     <script>
      /* 
        1.定时器作用 ：一件事 在 间隔时间 反复执行

        2.定时器语法 ：
            2.1 添加定时器
                let timeID = setInterval(回调函数,时间间隔)
            2.2 移除定时器
                clearInterval(timeID)

      /**
       * @description: 添加定时器
       * @param {function} 回调函数  做什么事
       * @param {number} 间隔时间 单位: ms
       * @return: number类型 : timeID 定时器id
       * 一个页面可以开启很多定时器，浏览器为了便于识别这些浏览器，所以给每一个定时器都添加一个编号，这个编号称之为定时器id
       */
       let timeID = setInterval(function () {
        console.log('哈哈')
        document.querySelector('#pp').innerText++
      }, 1000)

      document.querySelector('.btn').onclick = function () {
        //参数： 你想要清除的定时器id
        clearInterval(timeID)
      }
    </script>

一次性定时器

    <button id="btn2">移除定时器</button>
    <p id="pp">0</p>

    <script>
      /* 
        1.定时器作用 ：一件事 在 间隔时间 反复执行

        2.定时器语法 ：
            2.1 添加定时器
                let timeID = setInterval(回调函数,时间间隔)
                let timeID = setTimeout(回调函数,时间间隔)
            2.2 移除定时器
                clearInterval(timeID)
                clearTimeout(timeID)
        3.定时器应用场景 ：
            3.1 电商类网站： 秒杀功能
            3.2 动画
         */


      document.querySelector('#btn1').onclick = function () {
        /**
         * @description: 添加定时器
         * @param {function} 回调函数  做什么事
         * @param {number} 间隔时间 单位: ms
         * @return: number类型 : timeID 定时器id
         * 一个页面可以开启很多定时器，浏览器为了便于识别这些浏览器，所以给每一个定时器都添加一个编号，这个编号称之为定时器id
         */
         let timeID = setTimeout(function () {
          alert('我是一次定时器，我一旦触发之后，会自动移除')
        }, 5000)
      }

      document.querySelector('#btn2').onclick = function () {
        //参数： 你想要清除的定时器id
        clearTimeout(timeID)
      }
    </script>

两个定时器区别

setInterval与setTimeout区别

setInterval :永久定时器。一旦开启，在间隔时间永久执行，除非手动清除
setTimeout : 一次定时器。间隔时间内只执行一次，完毕后自动清除

Date日期内置对象使用

       /* Date:日期对象 */     
       let d = new Date()
       console.log(d)
       
       //1.获取年 月 日 时 分 秒
       console.log( d.getFullYear() )//年 2021
       console.log( d.getMonth() )//月 范围0-11   8下标：9月份
       console.log( d.getDate() )//日 25
       console.log( d.getDay() )//星期 0-6 日0-六6
       console.log( d.getHours() )//时
       console.log( d.getMinutes() )//分
       console.log( d.getSeconds() )//秒
       
       //2.获取时间戳 : 返回 1970 年 1 月 1 日至今的毫秒数   (应用场景：适配时区)
       console.log( Date.now() )//1632554590674
       console.log( new Date().getTime() )//1632554590674
    </script>

好好努力吧毕竟机会都是留给努力的人

dom节点和定时器

Dom节点介绍

定时器