js第11天（DOM节点）

目录​​​​​​​

前言

一、DOM节点是什么？

二、节点对象

1.节点对象分类

2.节点结构

 3.节点关系

4.获取节点对象

 三、动态操作DOM节点

四、获取元素的偏移量

五、获取元素尺寸（宽高）的三种方式：

​​​​​​​

---

前言

今天主要学习DOM节点，根据 DOM，XML 文档中的每个成分都是一个节点；DOM 是这样规定的：整个文档是一个文档节点 从每个 XML 标签是一个元素节点 包含在 XML 元素中的文本是文本节点 每一个 XML 属性是一个属性节点 注释属于注释节点。

---

一、DOM节点是什么？

从dom文档对象模型角度看，整个html文档就是一个对象（document文档对象 ），以及元素的内容、属性、样式都是一个节点对象。

---

 

二、节点对象

1.节点对象分类

1.元素节点：标签         eg:h2,div

2.文档节点：标签内容

3.属性节点：标签属性

4.document文档节点

5.注释节点

---

 

2.节点结构

节点结构为树型结构

---

 

 3.节点关系

节点关系：

①父子关系

②兄弟关系

4.获取节点对象

1.getElement系列

           ①getElmentById('id名')

           ②getElmentByClassName('class名')

           ③getElmentsByTagName('标签名')

           ④getElmentByName('name属性')         

2.querySelector系列

           ①querySelector(选择器)

           ②querySelectorAll(选择器)

 3.层次结构   

           ①通过父节点找所有子节点       childNodes   (返回什么类型的节点）

           ②第一个子节点                         firstChild

           ③最后一个子节点                      lastChild

           ④下一个节点                              nextSibling

           ⑤上一个节点                               previousSibling                  

           ⑥获取元素节点                            children

    层次结构图如下：

​​​​​​​

  ​​​​​​​层次关系获取元素节点：

            ①firstElementChild             返回节点的第一个子节点(多用于访问该元素的文本节点)

            ②lastElementChild           ​​​​​​​  返回节点的最后一个子节点     

            ③nextElementSibling         下一个节点

            ​​​​​​​④previousElementSibling   上一个节点  

            ⑤attributes                            获取元素节点的所有属性节点

代码如下（示例）： 

<div>  <p>层次关系获取元素节点</p>  </div>

<script>
  
     var divEle=document.querySelector(div)
     console.log(divEle.firstElementChild)  //输出为<p>层次关系获取元素节点</p>
</script>

非常规节点获取：

            ①duocument.dicumentElement                  获取html根节点

            ②ducument.body                                          获取body节点

            ③document.head                                          获取head节点  

 

 4.节点属性 ​​​​​​​

 三、动态操作DOM节点

1.创建dom节点（标签元素）

document.createElement('标签名')

eg：document.createElement('div')            //<div>  </div>

   document.createTextNode('元素一')        //添加文本节点

2.添加dom节点

①父节点.appendChild(子节点)          //该方法是追加，如果父元素已经有子节点，该方法是在原有的子节点后追加节点

②父节点.insertBefore(新节点，原节点)       //在原有的子节点前面追加节点

3.删除节点

父节点.removeChild(子节点)

节点.remove()               //删除当前节点

4.替换节点

父节点.replaceChild(新节点,原节点)

5.复制节点/克隆节点

节点.cloneNode()            //返回克隆的新节点

当值为true时，复制节点包含节点下所有子节点

当值为false时只复制当前节点

 真实的树型结构：

                                                        document

                                                            html

                                          head                            body

                                           title                           img,h2,div      

代码如下（示例）： 

<div class="root">
        <p>元素二</p>
    </div>
    <button class="removeBtn">删除节点</button>
    <button class="replaceBtn">替换节点</button>
    <button class="cloneBtn">克隆节点</button>
    <script>
        function test1(){
            // 1. 创建节点
            var pEle = document.createElement('p') // <p></p>
            // pEle.innerHTML = '元素一'
            var textNode = document.createTextNode('元素一')
            pEle.appendChild(textNode)  // <p>元素一</p>

            // 2. 添加节点
            var divEle = document.querySelector('.root')
            // divEle.appendChild(pEle)
            var oldPEle = divEle.firstElementChild
            divEle.insertBefore(pEle,oldPEle)
        }
        // test1()
        function test2(){
            var divEle = document.querySelector('.root')
            var oldPEle = divEle.firstElementChild
            // divEle.removeChild(oldPEle)
            oldPEle.remove()
        }
        
        // 删除节点
        var removeBtn = document.querySelector('.removeBtn')
        removeBtn.onclick = function(){
            test2()
        }

        //替换节点
        var replaceBtn = document.querySelector('.replaceBtn')
        replaceBtn.onclick = function(){
            var h2Ele = document.createElement('h2')
            h2Ele.innerHTML = '标题'  //<h2>标题</h2>

            var divEle = document.querySelector('.root')
            var pEle = document.querySelector('.root>p')

            divEle.replaceChild(h2Ele,pEle)
        }

        // 克隆节点
        var cloneBtn = document.querySelector('.cloneBtn')
        cloneBtn.onclick = function(){
            var divEle = document.querySelector('.root')
            var newDivEle = divEle.cloneNode(true)
            // 添加body下
            document.body.appendChild(newDivEle)
        }


    </script>

---

四、获取元素的偏移量

1.offsetLeft 和 offsetTop       //获取的是元素左边的偏移量和上边的偏移量 

1.当父元素没有定位时

           获取元素边框外侧到页面内侧的距离

2.当父元素有定位时

            获取元素边框外侧到定位父级边框内侧的距离（相对于父元素）

2.offsetWidth 和 offsetHeight          内容宽高+padding宽度+border宽高

---

五、获取元素尺寸（宽高）的三种方式：

1.offsetWidth           //内宽width+padding+border

2.clientWidth           //内宽width+padding

3.window.getComputeStyle(divEle).width           /

---