JavaScript---DOM文檔 - caofangsheng－IT工程師數位筆記本

文章出處

DOM文檔中，每個節點都有一些重要的屬性：

最重要的是nodeType,它描述該節點是什么---元素（element）、屬性（attribute）、注釋（comment）、文本（text）或者其他幾種類型（共12個），nodeType:1表示元素節點，3表示文本節點。
另外一個重要的性質是nodeName,它表示元素的名字，如果是文本節點的話，則表示#text,根據文檔類型和用戶代理，nodeName可以是大寫的，也可以是小寫的，正是由于這個原因，在測試特定名稱的時候，最好將其轉化為小寫。可以使用string對象的toLowerCase()方法來實現：if(obj.nodeName.toLowerCase()=='li'{});對于元素節點，可以使用tagName屬性
nodeValue是節點的值：如果這個節點是元素，則它為null,如果元素是文本節點，則它為文本內容。對于文本節點，可以讀取或設置nodeValue，從而能夠更改元素的文本內容；

            //修改文本節點的內容,文本節點是nodeValue---
            //這樣寫不起作用，第一個段落是一個元素節點，要改變段落內部的文本，就要訪問內部的文本節點，即，這個段落標簽的第一個子節點
            var firstP = document.getElementsByTagName("p")[0].nodeValue = "hello world";
            alert(firstP);
            var SecondP = document.getElementsByTagName("p")[0].firstChild.nodeName = "hello world again";
            alert(SecondP);

<body>
    <h1>我是標題1</h1>
    <p>我是段落標簽</p>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li><a href="http://www.baidu.com">百度一下，你就知道</a></li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
    <p>段落尾部1</p>
    <p>段落尾部2</p>
</body>

HTML

修改前效果圖：

修改后效果圖:

從父節點到子節點

firstChild屬性是個簡便用法，每個元素都可以有任意數量的子節點，可以通過childNodes屬性列出來:

childNodes是所有該元素第一層子節點列表--并不包括向下更深的層次；
可以通過數組計數器或者item方法訪問當前元素的子元素；
簡便用法yourElement.firstChild和yourElement.lastChild是yourElement.childNodes[0]和yourElement.childNodes(yourElement.childNodes.length-1)的簡化版本，可以使訪問更簡便一些；
可以通過方法hasChildNodes()檢查一個元素是否，有子節點，他會返回一個bool值

現在我們來做一個例子，遍歷元素的子節點：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript">
        function MyFunction() {
            var domString = "";
            //判斷是否支持DOM
            if (!document.getElementById || !document.createTextNode) {
                return;
            }
            var demoList = document.getElementById("myList");
            //判斷給定Id的ul元素，是否定義過
            if (!demoList) {
                return;
            }
            //判斷ul元素是否有子節點
            if (demoList.hasChildNodes()) {
                //有子節點的話，就遍歷出來
                var ch = demoList.childNodes;  //獲取子節點
                for (var i = 0; i < ch.length; i++) {
                    //獲取子節點的名稱nodeName
                    domString += ch[i].nodeName + "\n";
                }
                alert(domString);
            }

        }
    </script>
</head>
<body>
    <form>
        <ul id="myList">
            <li>列表1</li>
            <li>列表2</li>
            <li><a href="http://www.baidu.com">百度一下，你就知道～～～</a></li>
            <li>列表4</li>
            <li><p>夕陽無限好,只是近黃昏</p></li>
            <li>列表6</li>
            <li>列表7</li>
        </ul>
        <input type="submit" onclick="MyFunction()" value="hello，點擊我呀～～～" />
    </form>
</body>
</html>

效果圖：

從子節點到父節點

通過parentNode屬性可以，從子節點到父節點。下面我們來，做一個例子：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>通過子節點獲取父節點</title>
    <script type="text/javascript">
        function MyFunction() {
            var myTaoBaoList = document.getElementById("myTaoBaoList");
            //獲取父節點的名稱
            var myfaterNode_TaoBao = myTaoBaoList.parentNode.nodeName;
            alert(myfaterNode_TaoBao);
            //獲取祖宗節點（父節點的父節點）
            var mygrantfaterNode_TaoBao = myTaoBaoList.parentNode.parentNode.nodeName;
            alert(mygrantfaterNode_TaoBao);
        }
    </script>
</head>
<body>
    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li><a href="http://www.taobao.com" id="myTaoBaoList">淘寶網</a></li>
        <li>列表4</li>
        <li>列表5</li>
    </ul>
    <input type="submit" value="點我呀，看你點不點～～～" onclick="MyFunction()" />
</body>
</html>