JS DOM深入

2020-08-27 本文已影响0人弱冠而不立

Node 的属性

通用属性

nodeName: 获取节点名称

获取节点标签名称
nodeType: 获取节点类型

返回的是一个数字代表节点类型
节点类型对应表

返回当前node的相关节点的属性

ownerDocument: 返回当前节点元素的顶层对象-document

nextSibling （获取下一个兄弟节点）和 nextElementSibling （获取下一个兄弟元素节点）的区别
previousSibling (获取上一个兄弟节点) 和 previousElementSibling (获取上一个兄弟元素节点)的区别

<body>
        <div>
            <p>这是一个p标签</p>
            <span>这是一个span标签</span>
        </div>
    </body>
    <script type="text/javascript">
        let p = document.getElementsByTagName("p")[0];
        console.log("p.nextSibling:",p.nextSibling);
        console.log("p.nextElementSibling:",p.nextElementSibling);
                console.log("span.previousSibling",span.previousSibling);
        console.log("span.previousElementSibling",span.previousElementSibling);
    </script>

nextSibling 获取的是紧挨着兄弟节点，如果有换行，获取的就是换行文本。而nextElementSibling 获取的是下一个标签元素的兄弟节点

同理 previousSibling 也是一样的思路

<!--改成一行以后-->
<div>
    <p>这是一个p标签</p><span>这是一个span标签</span>
</div>

因为从节点类型定义可以知道，元素类型的节点和文本节点都属于 Node, 所以只是采用获取相邻兄弟节点，而不是相邻兄弟元素节点时，也会获取换行的文本节点。

parentElement (获取父级元素节点) 和parentNode (获取父级节点) 的区别

因为 document_node 并不是元素节点，它的nodeType值为9

当前 node 的内容属性

innerHTML 和 innerText 的区别

innerHTML：设置或者返回html标签的直接内容，即document.body.innHTML = "<div>inHTML</div>" 能直接将 div 元素插入到body元素中

innerText：设置或者返回文本内容，即document.body.innHTML = "<div>inHTML</div>" 只是单纯的将引号之间的字符直接当作字符串插入到 body 中

textContent 设置或返回文本内容
textContent 和 innerText 的区别：
innerText 只有 HTML 元素才可调用，而textContent 任意的 node 节点都可以调用
innerText的值依赖于浏览器的显示，textContent 依赖于代码的显示

 <div>
        <span>这是第一个span</span>
        <span>这是第二个span</span>
 </div>

innerText 属性值的获取会考虑CSS样式，因此读取 innerText 的值将触发回流以确保计算出的样式是最新的，而回流在计算上很昂贵，会降低性能，因此应尽可能避免回流。而textContent只是单纯读取文本内容，因此性能更高。

nodeValue 返回文本节点的值，只对文本节点有用，其他类型的节点值该属性返回null

返回当前 node 的子节点的相关属性

代码样例：

<div>
        <p>这是一个p标签</p>
        <span>这是一个span标签</span>
</div>

firstChild (获取第一个子节点) 和 firstElementChild (获取第一个子元素节点)

firstChild 会获取到回车文本节点，而 firstElementChild 获取到的是第一个元素节点

lastChild (获取最后一个节点) 和 lastElementChild (获取最后一个元素节点)

和 first 方法同理

childNodes (获取所有子节点) 和 children (获取所有子元素节点)

childNodes不单单会获取元素节点还会获取文本节点等其他节点，而children只会获取HTML元素节点

node 的方法

节点的增删改查

appendChild 向后追加子节点
insertBefore 向前添加子节点
cloneNode 克隆子节点
removeChild 删除子节点

节点的判断

hasChildNodes 判断是否有子节点
contains 判断是否包含指定的子节点
isEqualNode 判断两个节点是否相等

HTML元素操作方法

元素位置的相关属性

offsetParent 和 offsetTop, offsetLeft (有定位的父元素的相对偏移量)

offsetParent: 是一个只读属性，返回一个指向最近的(包括层级上最近的)父级定位元素（position 不为 static）或者最近的table,td,th,body元素。当元素的display为none 即元素隐藏时，offsetParent返回为 null

offsetLeft: 返回当前元素相对于其 offsetParent元素的左部内边距的距离。

offsetTop: 返回当前元素相对于其 offsetParent元素的顶部内边距的距离。

代码示例：

  <div id="position-outside" style="position: relative;">
        <div id="position-inside" style="position: absolute;">
            <div id="position-static" style="position: static;">
                <div id="box"> 
                    <div id="box-inside" style="position: absolute; left: 20px; top: 40px;"></div>
                    <div id="box-hidden" style="display: none; position: absolute; left: -20px; top: -40px;"></div>
                </div>
            </div>
        </div>
    </div>

box 和 boxInside 的offsetParent均为最近的有定位且定位不为static的父级元素

因为 box-hidden 的 display 为 hidden 导致它没有 offsetParent 所以 offsetLeft, offsetTop 属性均为 0

元素宽高的相关属性

offsetWidth,offsetHeight 和 clientWidth,clientHeight 的区别

offsetWidth,offsetHeight 元素宽高，包括内边距(不包括外边距)，边框，滚动条

clientWidth,clientHeight 元素宽高，包括内边距，但不包括外边距，边框，滚动条

offsetWidth(Height) 比 clientWidth(Height) 多了边框和滚动条的距离

div {
            width: 100px;
            height: 100px;
            margin: 10px;
            padding: 10px;
            border: 1px solid red;
        }

多了两侧边框的距离