javascript之DOM操作

一、document.getElementById()    根據Id獲取元素節點

    <div id="div1">
        <p id="p1">
            我是第一個P</p>
        <p id="p2">
            我是第二個P</p>
    </div>
    
    window.onload = function () {
            var str = document.getElementById("p1").innerHTML;
            alert(str);        //彈出    我是第一個P
        }

二、document.getElementsByName()    根據name獲取元素節點

    <div id="div1">
        <p id="p1">
            我是第一個P</p>
        <p id="p2">
            我是第二個P</p>
        <input type="text" value="請輸入值" name="userName" />
        <input type="button" value="確定" onclick="fun1()">
    </div>
        
        function fun1() {
            var username = document.getElementsByName("userName")[0].value;
            alert(username);    //輸出userName里輸入的值
        }

三、document.getElementsByTagName()    根據HTML標簽名獲取元素節點，注意getElements***的選擇器返回的是一個NodeList對象，能根據索引號選擇其中1個，可以遍歷輸出。

    <div id="div1">
        <p id="p1">
            我是第一個P</p>
        <p id="p2">
            我是第二個P</p>
    </div>

    window.onload = function () {
            var str = document.getElementsByTagName("p")[1].innerHTML;
            alert(str);        //輸出  我是第二個P，因為獲取的是索引為1的P，索引從0開始
        }    

    window.onload = function () {
            var arr = document.getElementsByTagName("p");
            for (var i = 0; i < arr.length; i++) {
                alert(arr[i].innerHTML);
            }
        }

    window.onload = function () {
            var node = document.getElementById("div1");
         var node1 = document.getElementsByTagName("p")[1];    //從獲取到的元素再獲取
            alert(node1.innerHTML);
    }

四、document.getElementsByClassName()    根據class獲取元素節點

    <div id="div1">
        <p id="p1" class="class1">
            我是第一個P</p>
        <p id="p2">
            我是第二個P</p>
    </div>

    window.onload = function () {
            var node = document.getElementsByClassName("class1")[0];
            alert(node.innerHTML);
        }

五、javascript中的CSS選擇器

    document.querySelector()    //根據CSS選擇器的規則，返回第一個匹配到的元素
    document.querySelectorAll()    //根據CSS選擇器的規則，返回所有匹配到的元素

    <div id="div1">
        <p id="p1" class="class1">
            我是第一個P</p>
        <p id="p2" class="class2">
            我是第二個P</p>
    </div>

        window.onload = function () {
            var node = document.querySelector("#div1 > p");    
            alert(node.innerHTML);                //輸出  我是第一個P

            var node1 = document.querySelector(".class2");
            alert(node1.innerHTML);                //輸出  我是第二個P

            var nodelist = document.querySelectorAll("p");
            alert(nodelist[0].innerHTML + " - " + nodelist[1].innerHTML);    //輸出  我是第一個P - 我是第二個P
        }

六、文檔結構和遍歷
    (1)作為節點數的文檔
    1、parentNode    獲取該節點的父節點    
    2、childNodes    獲取該節點的子節點數組
    3、firstChild    獲取該節點的第一個子節點
    4、lastChild    獲取該節點的最后一個子節點
    5、nextSibling    獲取該節點的下一個兄弟元素
    6、previoursSibling    獲取該節點的上一個兄弟元素
    7、nodeType    節點的類型，9代表Document節點，1代表Element節點，3代表Text節點，8代表Comment節點，11代表DocumentFragment節點
    8、nodeVlue    Text節點或Comment節點的文本內容
    9、nodeName    元素的標簽名(如P,SPAN,#text(文本節點),DIV)，以大寫形式表示

    注意，以上6個方法連元素節點也算一個節點。

    <div id="div1">
            <p id="p1" class="class1">
                    我是第一個P</p>
            <p id="p2" class="class2">
                    我是第二個P</p>
        </div>
    
     window.onload = function () {
            var node1 = document.querySelector(".class2");
            alert(node1.parentNode.innerHTML); //輸出  <p id="p1" class="class1">我是第一個P</p><p id="p2" class="class2">我是第二個P</p>

            var nodelist = document.getElementById("div1");
            var arr = nodelist.childNodes;
            alert(arr[1].innerHTML + " - " + arr[3].innerHTML); //輸出    我是第一個P - 我是第二個P 為什么是1，3呢？因為本方法文本節點也會獲取，
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　也就是說0,2,4是文本節點
        }

    <div id="div1">
            文本1
            <p id="p1" class="class1">
                我是第一個P</p>
            文本2
            <p id="p2" class="class2">
                我是第二個P</p>
            文本3
        </div>

    window.onload = function () {        //依次輸出，文本1，我是第一個P，文本2，我是第二個P，文本3
            var node = document.getElementById("div1");
            for (var i = 0; i < node.childNodes.length; i++) {
                if (node.childNodes[i].nodeType == 1) {
                    alert(node.childNodes[i].innerHTML);
                }
                else if (node.childNodes[i].nodeType == 3) {
                    alert(node.childNodes[i].nodeValue);
                }
            }
        }

    (2)作為元素樹的文檔
    1、firstElementChild        第一個子元素節點
    2、lastElementChild        最后一個子元素節點
    3、nextElementSibling        下一個兄弟元素節點
    4、previousElementSibling    前一個兄弟元素節點
    5、childElementCount        子元素節點個數量
    注意，此5個方法文本節點不算進去

        <div id="div1">
            <p id="p1" class="class1">
                我是第一個P</p>
            <p id="p2" class="class2">
                我是第二個P</p>
      </div>

        window.onload = function () {
            var node = document.getElementById("div1");
            var node1 = node.firstElementChild;
            var node2 = node.lastElementChild;

            alert(node.childElementCount);  //輸出2，div1一共有兩個非文檔子元素節點
            alert(node1.innerHTML);         //輸出 我是第一個P
            alert(node2.innerHTML);         //輸出 我是第二個P
            alert(node2.previousElementSibling.innerHTML);  //輸出 我是第一個P(第二個元素節點的上一個非文本元素節點是P1)
            alert(node1.nextElementSibling.innerHTML);      //輸出 我是第二個P(第一個元素節點的下一個兄弟非文本節點是P2)
        }

七、javascript操作HTML屬性
    1、屬性的讀取，此處要注意的是，某些HTML屬性名稱在javascript之中是保留字，因此會有些許不同，如class,lable中的for在javascript中變為htmlFor,className。

    <div id="div1">
            <p id="p1" class="class1"> 我是第一個P</p>
            <img src="123.jpg" alt="我是一張圖片" id="img1" />
            <input type="text" value="我是一個文本框" id="input1" />
        </div>

        window.onload = function () {
            var nodeText = document.getElementById("input1");
            alert(nodeText.value);        //輸出 我是一個文本框
            var nodeImg = document.getElementById("img1");
            alert(nodeImg.alt);            //輸出 我是一張圖片
            var nodeP = document.getElementById("p1");
            alert(nodeP.className);        //輸出 class1    注意獲取class是className，如果寫成nodeP.class則輸出undefined
        }

    2、屬性的設置，此處同樣要注意的是保留字

    <div id="div1">
            <img src="1big.jpg" alt="我是一張圖片" id="img1" onclick="fun1()" />
        </div>

    function fun1() {
            document.getElementById("img1").src = "1small.jpg";        //改變圖片的路徑屬性。實現的效果為，當點擊圖片時，大圖變小圖。
        }

    3、非標准HTML屬性
    getAttribute();    //注意這兩個方法是不必理會javascript保留字的，HTML屬性是什么就怎么寫。
    setAttribute();

        <div id="div1">
            <img src="1big.jpg" alt="我是一張圖片" class="imgClass" id="img1" onclick="fun1()" />
        </div>

    function fun1() {
            document.getElementById("img1").setAttribute("src", "1small.jpg");
            alert(document.getElementById("img1").getAttribute("class"));
        }

    4、Attr節點的屬性
        attributes屬性  非Element對象返回null，Element一半返回Attr對象。Attr對象是一個特殊的Node,通過name與value獲取屬性名稱與值。
        如:document.getElementById("img1")[0];
           document.getElementById("img1").src;

    <div id="div1">
            <img src="1big.jpg" alt="我是一張圖片" class="imgClass" id="img1" onclick="fun1()" />
        </div>

    function fun1() {
            alert(document.getElementById("img1").attributes[0].name);    //輸出  onclick    注意，通過索引器訪問是寫在右面在排前面，從0開始
            alert(document.getElementById("img1").attributes.src.value);    //輸出1big.jpg
            document.getElementById("img1").attributes.src.value = "1small.jpg";    //點擊后改變src屬性，實現了點擊大圖變小圖效果
        }

八、元素的內容
    1、innerText、textContent    innerText與textContent的區別，當文本為空時，innerText是""，而textContent是undefined
    2、innerHTML

    <div id="div1">
            <p id="p1">我是第一個P</p>
            <p id="p2">我是第<b>二</b>個P</p>
        </div>
    
    window.onload = function () {
            alert(document.getElementById("p1").innerText);  //注意火狐瀏覽器不支持innerText
            alert(document.getElementById("p1").textContent);    //基本都支持textContent
            document.getElementById("p1").textContent = "我是p1，javascript改變了我";    //設置文檔Text
            alert(document.getElementById("p2").textContent);
            alert(document.getElementById("p2").innerHTML); //innerHTML與innerText的區別，就是對HTML代碼的輸出方式Text不會輸出HTML代碼
        }

九、創建，插入，刪除節點
    1、document.createTextNode()    創建一個文本節點

        <div id="div1">
            <p id="p1">我是第一個P</p>
            <p id="p2">我是第二個P</p>
        </div>

    window.onload = function () {
            var textNode = document.createTextNode("<p>我是一個javascript新建的節點</p>");
            document.getElementById("div1").appendChild(textNode);
        }

    完成后HTML變為：
    div id="div1">
        <p id="p1">我是第一個P</p>
        <p id="p2">我是第二個P</p>
        我是一個javascript新建的節點
    </div>

    2、document.createElement()    創建一個元素節點

    <div id="div1">
            <p id="p1">我是第一個P</p>
            <p id="p2">我是第二個P</p>
        </div>

    window.onload = function () {
            var pNode = document.createElement("p");
            pNode.textContent = "新建一個P節點";
            document.getElementById("div1").appendChild(pNode);
        }

    執行之后HTML代碼變為：

    <div id="div1">
        <p id="p1">我是第一個P</p>
        <p id="p2">我是第二個P</p>
        <p>新建一個P節點</p>
    </div>

    3、插入節點
        appendChild()    //將一個節點插入到調用節點的最后面
        insertBefore()    //接受兩個參數，第一個為待插入的節點，第二個指明在哪個節點前面，如果不傳入第二個參數，則跟appendChild一樣，放在最后。

    <div id="div1">
            <p id="p1">我是第一個P</p>
        </div>

    window.onload = function () {
            var pNode1 = document.createElement("p");
            pNode1.textContent = "insertBefore插入的節點";
            var pNode2 = document.createElement("p");
            pNode2.textContent = "appendChild插入的節點";
            document.getElementById("div1").appendChild(pNode2);
            document.getElementById("div1").insertBefore(pNode1,document.getElementById("p1"));
        }

    執行之后HTML代碼為：
    <div id="div1">
        <p>insertBefore插入的節點</p>
        <p id="p1">我是第一個P</p>
        <p>appendChild插入的節點</p>
    </div>

十、刪除和替換節點。
    1、removeChild();    由父元素調用，刪除一個子節點。注意是直接父元素調用，刪除直接子元素才有效，刪除孫子元素就沒有效果了。

    <div id="div1">
            <p id="p1">我是第一個P</p>
            <p id="p2">我是第二個P</p>
        </div>

    window.onload = function () {
            var div1 = document.getElementById("div1");
            div1.removeChild(document.getElementById("p2"));
        }

    執行之后代碼變為：
    <div id="div1">
        <p id="p1">我是第一個P</p>    //注意到第二個P元素已經被移除了
    </div>
    
    2、replaceChild()    //刪除一個子節點，並用一個新節點代替它，第一個參數為新建的節點，第二個節點為被替換的節點

    <div id="div1">
            <p id="p1">我是第一個P</p>
            <p id="p2">我是第二個P</p>
        </div>

    window.onload = function () {
            var div1 = document.getElementById("div1");
            var span1 = document.createElement("span");
            span1.textContent = "我是一個新建的span";
            div1.replaceChild(span1,document.getElementById("p2"));
        }

    執行完成后HTML代碼變為：
    <div id="div1">
        <p id="p1">我是第一個P</p>
        <span>我是一個新建的span</span>    //留意到p2節點已經被替換為span1節點了
    </div>

十一、javascript操作元素CSS

　　　　通過元素的style屬性可以隨意讀取和設置元素的CSS樣式，例子：

<head>
    <title></title>
    <script type="text/javascript">
        window.onload = function () {
            alert(document.getElementById("div1").style.backgroundColor);
            document.getElementById("div1").style.backgroundColor = "yellow";
        }
    </script>
</head>
<body>
    <div id="div1" style="width:100px; height:100px; background-color:red"></div>
</body>