Javascript中的DOM节点

1.什么是DOM节点

1.DOM树里每一个内容都称为节点

1649255949927

2.节点的类型

1.元素节点(重点)

1.所有的标签都是元素节点例如 body、 div ul li a 等等

2.HTML是根节点

2.属性节点

1.所有属性的比如href src style 等

3.文本节点

1.所有的文本

4.其他节点

1.注释

2.空白

3.查找节点

1.父节点的查找

1.parentNode属性

属性,返回的是父节点,如果当前没找到就返回null值

语法书写:

子元素.parentNode

<body>

    <div>

        <img src="" alt="">

    </div>

    <script>

        //获取dom元素img
        let imgs = document.querySelector('img')

         console.log(imgs.parentNode);   //父节点div

    </script>
</body>

2.子节点的查找

1.childNodes属性

获得所有子节点、包括文本节点（空格、换行）、注释节点等

语法书写:

父元素.childNodes (注意的是获取到的是一个伪数组)

 <script>
         //获取dom元素

         let div = document.querySelector('div')

        div.childNodes //获取div中所有的子节点



    </script>

2.children属性

1.仅获得所有元素节点

2.返回的还是一个伪数组

语法书写:

父元素.children (得到一个伪数组需要注意)

 <script>

div.children  //获取div元素中的子元素节点
    </script>

3.兄弟节点的查找

1. previousElementSibling 属性

返回当前节点的前一个兄弟节点,没有则返回null

语法书写:

Node.previousElementSibling


    <div>

        <img src="" alt="">
        <a href=""></a>
        <p>我是段落</p>
    </div>

    <script>

        //获取dom元素
        let a = document.querySelector('a')
        
        a.previousElementSibling //返回a上一个img节点

  </script>

2.nextElementSibling属性

返回当前节点的下一个兄弟节点,没有则返回null

语法书写:

Node.nextElementSibling

  <div>

        <img src="" alt="">
        <a href=""></a>
        <p>我是段落</p>
    </div>

    <script>

        //获取dom元素
        let a = document.querySelector('a')
        
        a.nextElementSibling //返回a下一个p节点

  </script>

4.节点的增删添属性

1.创建节点

HTML 文档中，Document.createElement() 方法是用来创建一个标签名称 tagName 指定的 HTML 元素。

语法书写:

document.createElement(创建的节点标签)

 <script>    
        //1.创建新节点
        let li = document.createElement('li')
 </script>

2.追加节点

要想在界面看到，还得插入到某个父元素中

插入到父元素的最后一个子元素:

语法书写:

父元素.appendChild('新建节点标签') 追加到父元素的最后

父元素.insertBefore('新建节点标签',在那个标签前面) 追加到父元素的某一个标签前面

<body>
    <div>
        <h3></h3>
        <span></span>
    </div>

<script>
    //获取父元素
    let div = document.querySelector('div')
    //创建新的标签元素
    let h2 = document.createElement('h2')

    let img = document.createElement('img')
   
    //获取添加某个节点前面元素
    let span =document.querySelector('span')

    //添加到父元素最后
    div.appendChild(h2)

    //添加到父元素某个元素前面
    div.insertBefore(img,span)
</script>
</body>

3.append属性添加多个节点

目地方便在添加节点时,实现多节点的添加

语法书写:

父元素.append(节点1,节点2,节点3)

<body>
    <div>

    </div>
    <script>

        //append 属性可以添加多个新标签
        let div = document.querySelector('div')

        //新创建节点

        let img = document.createElement('img')

        let p = document.createElement('p')

        let h3 = document.createElement('h3')

        //父元素添加节点
        div.append(img,p,h3)
    </script>
</body>

5.删除节点

若一个节点在页面中已不需要时，可以删除它

在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除

语法书写:

父元素.removechild(删除的目标节点)

元素.remove 是删除当前节点

<body>
    
    <button>删除ul中的一个li标签</button>
    <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
       <li>5</li>
    </ul>
    <script>
        //获取事件源
        let btn = document.querySelector('button')

        let ul = document.querySelector('ul')
        //通过点击事件进行删除节点
        btn.addEventListener('click',function () {
            let li = document.querySelector ('li:nth-child(3)'); //如果在删除元素在点击事件里面 那么每次点击时删除元素本身会变化
            //删除的节点
            ul.removeChild(li)
        })
        	
        let li = document.querySelector('li:nth-child(4)')
        	li.remove    //删除第4个li元素节点
    </script>
</body>

5.克隆节点Node.cloneNode()

Node.cloneNode()的方法是返回一个为调用该方法的值

语法书写:

Node.cloneNode()

<body>
    <div>
    </div>
    <script>
        //1.获取克隆的元素
        let box = document.querySelector('div')
        //2.克隆元素
        let newBox = box.cloneNode() //如果克隆属性括号里面不写值 默认 false 不克隆子代元素  true 为深拷贝 连子代节点一起克隆
        //2.导入body中  放在body节点末端
        document.body.appendChild(newBox)

    </script>
</body>

6.时间对象

时间对象：用来表示时间的对象

作用：可以得到当前系统时间

1.时间的实例化(构造函数)

代码存在New关键字,可以将此操作称为实例化

可以创建一个时间对象获取当前系统时间

语法书写:

let 变量名 = new Date()

获得指定时间形式

let date = new Date('1970-10-01')

 <script>
 //建立时间实例化  
        let date = new Date();
  </script>

2.时间对象的方法

时间对象中存在很多方法

例如:

getFullyear() 获取时间对象的年份获取四位数年份

getMonth() 获取月份取值为0-11 如果需要当前月份需要加1

getDate() 获取月份中的每一天不同月份取值不一样

getday() 获取一个星期的天数取值为0-6 注意的是星期天为0

getHours() 获取当前系统的小时取值为0- 23

getminutes() 获取当前系统的分取值为0-59

getseconds() 获取当前系统秒取值为0-59

 <script>
   			//建立时间实例化  
            let date = new Date();

            //获取时间的属性
                    
            let year = date.getFullYear() //2022年
                    
            let month = date.getMonth() + 1   //3 +1 月
                    
            let date1 = date.getDate()    //7 号

            let day = date.getDay() //星期4
                    
            let hours = date.getHours() //14小时

            let minute = date.getMinutes()  //22分
                    
            let sce = date.getSeconds() //34秒
   </script>

3.时间戳(getTime())

时间戳是一个数值,表示从1970年1月1日0时0分0秒开始计算的毫秒数

距离该日期对象所代表的毫秒数

getTime()返回值是一个数值

1.获取时间戳的三种方法

 <script>

        //获取时间戳的方法
        let date = new Date()

        //第一种方法
        console.log(date.getTime());//比较麻烦

        //第二种 利用隐式转换
        console.log(+new Date());  
        

        //第三种转换
        console.log(Date.now()); //时间对象的now方法
        //时间戳的作用一般用来实现生成随机数
    </script>

7.运用时间对象做的时钟案例

需求是打开页面,显示现在时间的时钟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }


        .box {
            width: 400px;
            height: 400px;
            border-radius: 50%;
            background-color:pink;
            margin: 100px auto;
            border:2px solid #ccc;
            position: relative;
            background-image: url(http://md.zbztb.cn/uploads/859340248846/时钟.jpg);
            background-size: 100%;
        }   

        .hours {
            height: 80px;
            width: 4px;
            background-color: #ccc;
            position: absolute;
            z-index: 3;
            left: 50%;
            transform: translateX(-50%);
            bottom: 50%;
            transform-origin: center bottom;
        }

        .mintue {
            width:5px;
            height: 100px;
            background-color: #333;
            position: absolute;
            z-index: 2;
            left: 50%;
            transform: translateX(-50%);
            bottom: 50%;
            transform-origin: center bottom;
        }

         .sec {
            width: 5px;
            height: 120px;
            background-color: skyblue;
            position: absolute;
            z-index: 1;
            left: 50%;
            transform: translateX(-50%);
            bottom: 50%;
            transform-origin: center bottom;
       
            
         }


    </style>
</head>
<body>
    <div class="box">
        <div class="hours"></div>
        <div class="mintue"></div>
        <div class="sec"></div>
    </div>


    <script>

        //获取事件源 
        let sec = document.querySelector('.sec')
        let mintue  = document.querySelector('.mintue')
        let hours  = document.querySelector('.hours')

        getTime();
       
        setInterval( getTime,1000)


        function getTime() {
                //获取时间戳
                let date = new Date();

                let num1 = date.getSeconds();

                let minTime = date.getMinutes();
                //sec秒
                let  secNum =  num1*6

                let hourTime = date.getHours()


                sec.style.transform=`rotate(${secNum}deg)`;

                mintue.style.transform=`rotate(${minTime*6}deg)`;

                hours.style.transform=`rotate(${hourTime*30}deg)`;


                // if (secNum > 0 && secNum % 360 ===0) {
                //     hoursNum = hoursNum + 30
                //     hours.style.transform=`rotate(${hoursNum}deg)`;
                // }


        }

    </script>
</body>
</html>

JS中的DOM的一些知识

Javascript中的DOM节点

1.什么是DOM节点

2.节点的类型

1.元素节点(重点)

2.属性节点

3.文本节点

4.其他节点

3.查找节点

1.父节点的查找

1.parentNode属性

2.子节点的查找

1.childNodes属性

2.children属性

3.兄弟节点的查找

1. previousElementSibling 属性

2.nextElementSibling属性

4.节点的增删添属性

1.创建节点

2.追加节点

3.append属性添加多个节点

5.删除节点

5.克隆节点Node.cloneNode()

6.时间对象

1.时间的实例化(构造函数)

2.时间对象的方法

3.时间戳(getTime())

1.获取时间戳的三种方法

7.运用时间对象做的时钟案例