JS基礎入門篇（二十四）—DOM（上）

ChristmasBoy 發布于2019-08-02 10:41 / 972人閱讀

摘要：常用的節點類型，，，。一句話這里是注釋找到的父節點獲取節點的一級的元素子節點，只獲取元素，返回的是集合。

1.常用的節點類型，nodeType，attributes，childNodes。

1.元素節點 - 1
2.屬性節點 - 2
3.文本節點 - 3
4.注釋節點 - 8
5.文檔節點 - 9

查看節點類型
    node.nodeType(返回的是數字)

屬性節點
    元素.attributes(獲取的是集合)
    元素.attributes[0]

通過元素.childNodes獲取子節點
    childNodes 獲取到的是一個集合
        集合中 包含了 元素的 所有子節點
            其中有 元素 子節點 ,注釋,文本節點...

舉例說明，以下是全部代碼：




    
    Title
    


    
        inner
        一句話

2.nodeName


    
        inner
        一句話

3.parentNode,children,childNodes

node.parentNode：找到node的父節點
children：獲取節點的一級的元素子節點，只獲取元素，返回的是HTMLCollection集合。
childNodes：獲取節點的一級子節點，可能獲取到元素節點，文本節點，注釋節點等，返回的是Nodelist集合.

舉例說明，可以把代碼粘貼，自己運行看看：

4.node.previousElementSibling和node.nextElementSibling

兄弟關系

    node.previousElementSibling 上一個元素兄弟節點
    node.nextElementSibling 下一個元素兄弟節點

舉例說明，可以把代碼粘貼，自己運行看看：

5.node.firstElementChild和node.lastElementChild

嵌套關系

    node.previousElementSibling 第一個子級
    node.nextElementSibling 最后一個子級

舉例說明，可以把代碼粘貼，自己運行看看：

GPU云服務器云服務器二十四第二十四 js零基礎入門視頻入門篇

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52518.html

JS基礎入門篇（二十四）—DOM（上）

摘要：常用的節點類型，，，。一句話這里是注釋找到的父節點獲取節點的一級的元素子節點，只獲取元素，返回的是集合。 1.常用的節點類型，nodeType，attributes，childNodes。 1.元素節點 - 1 2.屬性節點 - 2 3.文本節點 - 3 4.注釋節點 - 8 5.文檔節點 - 9 查看節點類型 node.nodeType(返回的是數字) 屬性節點 ...

Amio 2019-08-22 18:02 評論0 收藏0
JS基礎入門篇（二十四）—DOM（上）

摘要：常用的節點類型，，，。一句話這里是注釋找到的父節點獲取節點的一級的元素子節點，只獲取元素，返回的是集合。 1.常用的節點類型，nodeType，attributes，childNodes。 1.元素節點 - 1 2.屬性節點 - 2 3.文本節點 - 3 4.注釋節點 - 8 5.文檔節點 - 9 查看節點類型 node.nodeType(返回的是數字) 屬性節點 ...

Songlcy 2019-08-30 15:53 評論0 收藏0
JS基礎入門篇（二十四）—DOM（下）

摘要：到定位父級節點的距離返回值是一個對象，包含了元素盒模型的詳細信息可視大小取對象中詳細的屬性值相對于瀏覽器可視區域。移入移出效果移入當前數字，數字的前后背景變色。 1.offsetLeft/offsetTop offsetLeft/offsetTop : 到定位父級節點的距離. Title div{ padding...

bladefury 2019-08-02 16:02 評論0 收藏0
JS基礎入門篇（二十四）—DOM（下）

摘要：到定位父級節點的距離返回值是一個對象，包含了元素盒模型的詳細信息可視大小取對象中詳細的屬性值相對于瀏覽器可視區域。移入移出效果移入當前數字，數字的前后背景變色。 1.offsetLeft/offsetTop offsetLeft/offsetTop : 到定位父級節點的距離. Title div{ padding...

SmallBoyO 2019-08-29 15:43 評論0 收藏0
JS基礎入門篇（二十四）—DOM（下）

摘要：到定位父級節點的距離返回值是一個對象，包含了元素盒模型的詳細信息可視大小取對象中詳細的屬性值相對于瀏覽器可視區域。移入移出效果移入當前數字，數字的前后背景變色。 1.offsetLeft/offsetTop offsetLeft/offsetTop : 到定位父級節點的距離. Title div{ padding...

mcterry 2019-08-22 18:03 評論0 收藏0