DOM节点

1.dom节点

    每个html标签,标签属性,内容,注释...都被看做dom节点

2.节点分类

    元素节点    我们通过getElementBy... 获取到的都是元素节点

    属性节点    我们通过getattribute获取的就是元素的属性节点

    文本节点    我们通过innerText 获取到的就是元素的文本节点

3.DOM节点类型

    1.整个文档是一个文档节点

    2.每个 HTML 元素是元素节点

    3.HTML 元素内的文本是文本节点

    4.每个 HTML 属性是属性节点  

    5.注释是注释节点

4.节点树形结构

            document

               html

          head      body

         - getElement系列

         - queryselector系列


 - 层次结

        在HTML文档中,html就是根节点。

        parentElement  父节点 一个节点之上的节点就是该节点的父节点,例如ul的父节点就是body,body的父节点就是html。

        children  子元素节点 一个节点之下的节点就是该节点的子节点,例如ul就是body的子节点。

        firstElementChild

        lastElementChild

        nextElementSibling

        previousElementSibling

    - 非常规节点获取

        document.body      

使用js代码操作节点

    创建节点

        var div1 = document.createElement('div') //创建元素节点

        var text1 = document.createTextNode('teat') //创建文本节点

        var attr1 = document.createAttribute('id') //创建属性节点

    添加节点

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

        父元素.appendChild.(要插入的子节点)

        insertBefore:向某一个节点前插入一个节点

        父元素.insertBefore.(要插入的子节点,插入在哪一节点之前)

    移除节点

        父节点.removeChild(子节点)

        节点.remove()

    替换节点

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

     复制节点

        语法:

        节点.cloneNode(true|false)

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

          false: 复制当前节点

    获取元素的样式

            var divEle = document.querySelector('div')

            console.log(divEle.style.width); //获取行内样式

            var divEle = document.querySelector('div')

            console.log(window.getComputedStyle(divEle).width)//获取非行内样式,非IE使用

    获取元素尺寸( 宽高 )

        function testSize() {

            var divEle = document.querySelector('div') //获得这个节点

            console.log('内容宽', window.getComputedStyle(divEle).width);

            console.log('内容宽+padding', divEle.clientWidth);

            console.log('内容宽+padding+border', divEle.offsetWidth);

        }

        testSize()      

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容