DOM 常見的節點類型

時間 2019-11-08

標籤 dom 常見的節點類型欄目 HTML 简体版

原文原文鏈接

看代碼：javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--nodeName nodeValue實驗-->
<div id="container" class="d">
    這是一個元素節點
</div>

<script type="text/javascript">
    //nodeName;nodeValue實驗

    var divNode=document.getElementById("container");

    //元素節點
    document.write("元素節點nodeName是"+divNode.nodeName);
    document.write("<br/>元素節點nodeValue是"+divNode.nodeValue);

    //屬性節點
    var attrNode=divNode.attributes;
    console.log(attrNode);//一個類數組
    document.write("<br/>div的第一個屬性節點nodeName是"+attrNode[0].nodeName);
    document.write("<br/>div的第一個屬性節點nodeValue是"+attrNode[0].nodeValue);

    //文本節點
    var textNode=divNode.childNodes;
    console.log(textNode);//一個類數組
    document.write("<br/>文本節點nodeName是"+textNode[0].nodeName);
    document.write("<br/>文本節點nodeValue是"+textNode[0].nodeValue); //div後的空白沒有當成文本節點

    //註釋節點
    var commentNode=document.body.childNodes;
    console.log(commentNode);
    document.write("<br/>註釋節點的nodeName是"+commentNode[1].nodeName);
    document.write("<br/>註釋節點的nodeValue是"+commentNode[1].nodeValue); //script標籤裏的內容也是body的子標籤

    //文檔類型節點，不須要獲取，直接輸出就能夠
    document.write("<br/>文檔節點的nodeName是"+document.doctype.nodeName);
    document.write("<br/>文檔節點的nodeValue是"+document.doctype.nodeValue);
    document.write("<br/>文檔節點的nodeType是"+document.doctype.nodeType);

    //文檔片斷節點
    var frag=document.createDocumentFragment();
    document.write("<br/>文檔片斷節點的nodeName是"+frag.nodeName);
    document.write("<br/>文檔片斷節點的nodeValue是"+frag.nodeValue);
</script>
</body>
</html>

相關標籤/搜索

每日一句

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