javascript之DOM操做

時間  2019-11-15
標籤 javascript dom 欄目 JavaScript 简体版
原文   原文鏈接

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

複製代碼

    <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
        }

複製代碼


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

複製代碼

    <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裏輸入的值
        }

複製代碼


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

複製代碼

    <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);
    }

複製代碼


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

複製代碼

    <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);
        }

複製代碼

5、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
        }

複製代碼


6、文檔結構和遍歷
    (1)做爲節點數的文檔
    一、parentNode    獲取該節點的父節點    
    二、childNodes    獲取該節點的子節點數組
    三、firstChild    獲取該節點的第一個子節點
    四、lastChild    獲取該節點的最後一個子節點
    五、nextSibling    獲取該節點的下一個兄弟元素
    六、previoursSibling    獲取該節點的上一個兄弟元素
    七、nodeType    節點的類型，9表明Document節點，1表明Element節點，3表明Text節點，8表明Comment節點，11表明DocumentFragment節點
    八、nodeVlue    Text節點或Comment節點的文本內容
    九、nodeName    元素的標籤名(如P,SPAN,#text(文本節點),DIV)，以大寫形式表示

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

複製代碼

    
            
            
        我是第一個P我是第二個P

複製代碼

    (2)做爲元素樹的文檔
    一、firstElementChild        第一個子元素節點
    二、lastElementChild        最後一個子元素節點
    三、nextElementSibling        下一個兄弟元素節點
    四、previousElementSibling    前一個兄弟元素節點
    五、childElementCount        子元素節點個數量
    注意，此5個方法文本節點不算進去app

複製代碼

        <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)
        }

複製代碼


7、javascript操做HTML屬性
    一、屬性的讀取，此處要注意的是，某些HTML屬性名稱在javascript之中是保留字，所以會有些許不一樣，如class,lable中的for在javascript中變爲htmlFor,className。spa

複製代碼

    <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
        }

複製代碼

    二、屬性的設置，此處一樣要注意的是保留字code

複製代碼

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

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

複製代碼


    三、非標準HTML屬性
    getAttribute();    //注意這兩個方法是沒必要理會javascript保留字的，HTML屬性是什麼就怎麼寫。
    setAttribute();orm

複製代碼

        <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"));
        }

複製代碼

    四、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屬性，實現了點擊大圖變小圖效果
        }

複製代碼


8、元素的內容
    一、innerText、textContent    innerText與textContent的區別，當文本爲空時，innerText是""，而textContent是undefined
    二、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代碼
        }

複製代碼


9、建立，插入，刪除節點
    一、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>

    二、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>

    三、插入節點
        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>

10、刪除和替換節點。
    一、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>
    
    二、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>

11、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>

複製代碼

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程