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

時間 2019-11-11

原文原文鏈接

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

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

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

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

經過元素.childNodes獲取子節點
    childNodes 獲取到的是一個集合
        集合中 包含了 元素的 全部子節點
            其中有 元素 子節點 ,註釋,文本節點...

舉例說明，如下是所有代碼：html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background: red;
        }

    </style>
</head>
<body>
    <div id="box" class="content">
        <div id="inner">inner</div>
        一句話
        <!--這裏是註釋-->
    </div>
    <script>
        var box=document.getElementById("box");
        console.log(box.nodeType);//1
//--------------------------------------------
        console.log(box.attributes);
        console.log(box.attributes[0]);//id="box"
        console.log(box.attributes[1]);//class="content"
        console.log(box.attributes[0].nodeType);//2
//--------------------------------------------
        console.log(box.childNodes);
        console.log(box.childNodes[0]);//#text 這裏指的是box所指的div和inner所指的div換行之間的內容，就是不少個空格，計算機認定爲文本。
        console.log(box.childNodes[0].nodeType);// 3
        console.log(box.childNodes[3].nodeType);// 8
    </script>
</body>
</html>

2.nodeName

<body>
    <div id="box" class="content">
        <div id="inner">inner</div>
        <p>一句話</p>
        <!--這裏是註釋-->
    </div>
    <script>
        var box = document.getElementById("box");
        var p=document.getElementsByTagName("p")[0];
        console.log(box.nodeName);//DIV
        console.log(p.nodeName);//P
//----------------------------------------------------
        console.log(box.childNodes[0].nodeName);//#text
        console.log(box.childNodes[5].nodeName);//#comment
//----------------------------------------------------
        console.log(document.nodeName);//#document
    </script>
</body>

3.parentNode,children,childNodes

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

舉例說明，能夠把代碼粘貼，本身運行看看：code

<body>
<!--
    node.parentNode 父節點
    children 獲取節點的一級的元素子節點，返回的是集合
    childNodes 獲取節點的子節點，可能獲取到元素節點，文本節點，註釋節點，返回的是集合
-->
<div id="wrap">
    <div id="content">
        <div id="inner"></div>
    </div>
    <p>p</p>
    一句話
</div>
<script>
    var content=document.getElementById("content");
    console.log(content.parentNode);
    console.log(content.parentNode.parentNode);
    console.log(content.parentNode.parentNode.parentNode);
    console.log(content.parentNode.parentNode.parentNode.parentNode);
//-----------------------------------------------------------------------
    console.log(content.childNodes);//NodeList(3) [text, div#inner, text]    
    console.log(content.children);//HTMLCollection [div#inner]
</script>
</body>

4.node.previousElementSibling和node.nextElementSibling

兄弟關係htm

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

舉例說明，能夠把代碼粘貼，本身運行看看：ip

<body>
<ul id="list">
    <li>1</li>
    <li id="item">2</li>
    <li>3</li>
    <li>4</li>
</ul>
<script>
    var list = document.getElementById("list");
    var item = document.getElementById("item");
    console.log(list.previousElementSibling);//null 由於是嵌套關係，因此沒有上一個兄弟節點
    console.log(item.previousElementSibling);//<li>1</li>
    console.log(item.nextElementSibling);//<li>3</li>
    console.log(item.nextElementSibling.nextElementSibling);//<li>4</li>
</script>
</body>

5.node.firstElementChild和node.lastElementChild

嵌套關係文檔

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

舉例說明，能夠把代碼粘貼，本身運行看看：get

<body>
<div id="wrap">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>
<script>
    var wrap = document.getElementById("wrap");
    console.log( wrap.firstElementChild );//<div>1</div>
    console.log( wrap.lastElementChild );//<div>4</div>
</script>
</body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。