DOM节点

每个html标签、标签属性、内容、注释...都被看成dom节点，DOM就是html结构中一个一个的节点构成的
DOM节点分类

整个文档是一个文档节点
每个HTML元素是元素节点
HTML元素内的文本是文本节点
每个HTML属性是属性节点
注释是注释节点

常用的三大类：元素节点/文本节点/属性节点

元素节点：通过getElementEBy... 获取到的都是元素节点
属性节点：通过getAttribute获取的就是元素的属性节点
文本节点：通过innerText 获取到的就是元素的文本节点

DOM节点树状结构

QQ截图20220829171333.png

DOM节点关系

根节点：在HTML文档中，html就是根节点。
父节点：一个节点之上的节点就是该节点的父节点，例如ul的父节点就是body。body的父节点就是html。
子节点：一个节点之下的节点就是该节点的子节点，例如ul就是body的子节点。
兄弟节点：如果多个节点在同一层次，并拥有相同的父节点，那么这几个节点就是兄弟节点。例如所有li是兄弟节点，因为他们拥有相同的父节点ul

获取节点

获取元素节点

getElement系列
querySelector系列

层次关系获取节点

QQ截图20220829172810.png

children : 获取某一节点下所有的子一级元素节点

<body>
    <div>
        <p>hello</p>
    </div>
    <script>
        //这个oDiv获取的是页面中的div元素，就是一个元素节点
        var oDiv = document.querySelector('div')
        console.1og(oDiv.children)
        /*
        HTMLCollection [P]
        0: p
        Length: 1
        proto_ : HTMLCollection
    </script>
</body>

我们发现只有一个节点了，因为children 只要元素节点,div下面又只有一个元素节点，就是p,所以就只有一个，虽然只有一个，但是也是一个伪数组

层次关系图

QQ截图20220829173512.png

非常规节点获取

获取html根节点：document.documentElement
获取body节点：document.body
获取head：document.head

节点属性

QQ截图20220829173954.png

操作DOM节点

创建节点

createElement :用于创建一个元素节点

//创建一个div元素节点
var oDiv = document.createElement('div')
console.1og(oDiv) // <div></div>

创建出来的就是一个可以使用的div元素

createTextNode :用于创建一个文本节点

//创建一个文本节点
var oText = document.createTextNode('我是一个文本')
console.1og(oText) //“我是一个文本”

创建属性节点

createAttribute: 创建属性节点 setAttruibuteNode:给元素节点设置属性节点

var pEle = document.createElement( 'p') // <p></p>
var idAttr = document.createAttribute( "id')//创建属性id
idAttr.value = 'p1' //给属性节点赋值id = 'p1'
pEle.setAttributeNode(idAttr)//给元素节点设置属性节点〈p id ="p1"></p>
// 1.input元素节点
var inputEle = document.createElement( 'input') // <input/>
// 2．添加属性
inputEle.id = "submit'
inputEle.type = 'button"
inputEle.value ="提交"
// <input id="submit" type="button" value="提交"/>

2. 加入节点

appendChild:是向一个元素节点的末尾追加—个节点

语法：父节点.appendChild(要插入的子节点)

//创建一个div元素节点
var oDiv = document.createElement( 'div ')
var oText = document.createTextNode('我是一个文本')

//向div中追加—个文本节点
oDiv.appendChild(oText)

console.log(oDiv) // <div>我是—个文本</ div>

appendChild:是向一个元素节点的末尾追加—个节点

语法：父节点.insertBefore(要插入的节点,插入在哪一个节点的前面)

<body>
    <div>
        <p>我是一个p标签</p></ div>
    
    <script>
        var oDiv = document.querySelector( 'div ')var oP = oDiv.querySelector( "p')
        
        //创建一个元素节点
        var oSpan = document.createElement( ' span ')
        
        //将这个元素节点添加到div 下的p的前面
        oDiv.insertBefore(ospan,oP)
        
        console.log(oDiv)
        /*
            <div>
                <span></span>
                <p>我是一个p标签</p>
            </div>
        */
    </script>
</ body>

3. 删除节点

removeChild：移除某一节点下的某一个节点

语法：父节点.removeChild(要移除的字节点)

<body>
    <div>
        <p>我是一个p标签</p>
    </div>
    
    <script>
        var oDiv = document.querySelector('div')
        var oP = oDiv.querySelector('p')
        
        //移除div 卜面的p标签
        oDiv.removeChild(oP)
        
        console.log(oDiv) // <div></div>
    </script>
</body>

remove：移除当前节点

语法：oDiv.remove()移除oDiv节点

替换节点

replaceChild:将页面中的某一个节点替换掉

语法︰父节点.replaceChild(新节点,旧节点)

<body>
    <div>
        <p>我是一个p标签</p>
    </ div>
    
    <script>
        var oDiv = document.querySelector('div')
        var oP = oDiv.querySelector('p')
        
        //创建一个 span节点
        var oSpan = document.createElement('span')
        //向span元素中加点文字
        oSpan.innerHTAL ='我是新创建的span标签'
        
        //用创建的span标签替换原先div 下的p标签
        oDiv.replaceChild(oSpan，oP)
        
        console.log(oDiv)
        /*
            <div>
                <span>我是新创建的span标签</ span>
            </div>
        */
    </script>
</body>

5. 复制节点

语法:节点.cloneNode(truelfalse)

true:复制节点包含节点下所有子节点

false:复制当前节点

获取元素的偏移量

offsetLeft 和offsetTop

获取的是元左边的偏移量和上边的偏移量，分成两个情况来看：

没有定位的情况下

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

有定位的情况下

获取元素边框外侧到定位父级边框内侧的距离（其实就是我们写的left和top 值)

获取元素尺寸(宽、高)三种方式

offsetWidth =内容width + padding + border

clientWidth =内容width + padding

window.getComputedStyle(divEle).width =内容width

QQ截图20220829232410.png

DOM（下）