jsday11学习笔记

DOM节点：

                从文档对象模型DOM角度看：

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

                        DOM 就是我们 html 结构中一个一个的节点构成的

                DOM 节点类型：

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

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

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

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

                        5.注释是注释节点

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

                getElementBy... 获取到的都是元素节点

                getAttribute  获取的是元素的属性节点

                innerHTML  获取到的是元素文本节点

                DOM节点关系：

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

                父节点：一个节点之上的节点就是该节点的父节点，例如ul的父节点就是body，body的父节点就是html。
                子节点：一个节点之下的节点就是该节点的子节点，例如ul就是body的子节点。

                兄弟节点：如果多个节点在同一层次，并拥有相同的父节点，那么这几个节点就是兄弟节点。例如所有li是兄弟节点，因为他们拥有相同的父节点ul

parentNode  返回的是父节点

childNodes   返回的是节点的集合 childNodes[ i ]

firstChild       返回的是第一个子节点，最普遍的用法就是访问该元素的文本节点

lastChild       返回的是最后一个子节点

nextSibling   下一个节点

previousSibling    上一个节点

                层次节点获取元素节点：

                firstElementChild        返回的是第一个子节点

                lastElementChlid        返回的是最后一个子节点

                nextElementSibling        下一个节点

                previousElementSibling        上一个节点

                节点属性：

                 元素节点        nodeType =>1        nodeName => 大写标签名        nodeValue=>null

                 属性节点        nodeType =>2        nodeName => 属性名       nodeValue=>属性值

                 文本节点        nodeType =>3        nodeName => #text       nodeValue=>文本内容

操作DOM节点：

                创建节点：

                createElement =>用于创建一个元素节点

                createTextNode =>用于创建一个文本节点

                创建属性节点：

                        createAttribute: 创建属性节点

                        setAttruibuteNode: 给元素节点设置属性节点

                加入节点：

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

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

                删除节点：

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

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

                替换节点：

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

                        语法：父节点.repalceChild（新节点，旧节点）

                复制节点：                        

                        语法： 节点.cloneNode(true|false)

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

                        false: 复制当前节点

获取元素的非行间样式：

                getComputedStyle和currentStyle

                getComputedStyle（非IE使用）

                currentStyle（IE使用）

获取元素的偏移量：

                offsetLeft 和 offsetTop        

        获取的是元左边的偏移量和.上边的偏移量
        分成两个情况来看
        没有定位的情况下
        获取元素边框外侧到页面内侧的距离
        有定位的情况下
        获取元素边框外侧到定位父级边框内侧的距离(其实就是我们写的left和top值)

                offsetWidth 和 offsetHeight

        获取元素内容宽高+ padding宽高 + border宽高的和