JavaScript——Dom編程（2）

最後更新：2018-01-28 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：元素 strong 才有 4.0 gpo cti str document closed

①、建立一個元素節點:

var reference = document.createElement(element)

createElement(): 按照給定的標籤名建立一個新的元素節點.
方法只有一個參數：被建立的元素節點的名字, 是一個字串.
方法的傳回值：是一個指向建立節點的引用指標. 傳回值是一個元素節點, 所以它的 nodeType 屬性值等於 1.
新元素節點不會自動添加到文檔裡, 它只是一個存在於 JavaScript 內容相關的對象.

②、建立一個文本節點:

var reference = document.createTextNode(text);

createTextNode(): 建立一個包含著給定文本的新文本節點.
傳回值是一個指向建立文本節點引用指標. 它是一個文本節點, 所以它的 nodeType 屬性等於 3.
方法只有一個參數：建立文本節點所包含的文本字串. 新元素節點不會自動添加到文檔裡.

③、為元素節點添加子節點:

var reference = element.appendChild(newChild)

appendChild(): 給定子節點 newChild 將成為給定元素節點 element 的最後一個子節點.
方法的傳回值是一個指向新增子節點的引用指

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <title>Untitled Document</title>                <script type="text/javascript">                        //新建立一個元素節點, 並把該節點添加為文檔中指定節點的子節點            window.onload = function(){                                //1. document.createElement(elementTagName)                //新建立一個元素節點, 傳回值為指向元素節點的引用                //<li></li>                var liNode = document.createElement("li");                                //2. 建立 "廈門" 的文本節點                //document.createTextNode(string) 建立一個文本節點                //參數為文本值, 返回該文本節點的引用.                 var xmText = document.createTextNode("廈門");                //<li>廈門</li>                liNode.appendChild(xmText);                                var cityNode = document.getElementById("city");                //2. elementNode.appendChild(newChild): 為 elementNode                //新添加 newChild 子節點, 該子節點將作為 elementNode 的最後                //一個子節點.                 cityNode.appendChild(liNode);            }                </script>            </head>    <body>        <p>你喜歡哪個城市?</p>        <ul id="city"><li id="bj" name="BeiJing">北京</li>            <li>上海</li>            <li>東京</li>            <li>首爾</li>        </ul>                <br><br>        <p>你喜歡哪款單機遊戲?</p>        <ul id="game">            <li id="rl">紅警</li>            <li>實況</li>            <li>極品飛車</li>            <li>魔獸</li>        </ul>                <br><br>        gender:             <input type="radio" name="gender" value="male"/>Male            <input type="radio" name="gender" value="female"/>Female            </body></html>

View Code④、節點的替換:

var reference = element.replaceChild(newChild,oldChild);

replaceChild(): 把一個給定父元素裡的一個子節點替換為另外一個子節點
傳回值是一個指向已被替換的那個子節點的引用指標
該節點除了替換功能以外還有移動的功能.
該方法只能完成單向替換, 若需要使用雙向替換, 需要自訂函數

/**     * 互換 aNode 和 bNode     * @param {Object} aNode     * @param {Object} bNode     */    function replaceEach(aNode, bNode){                if(aNode == bNode){            return;        }                var aParentNode = aNode.parentNode;        //若 aNode 有父節點        if(aParentNode){            var bParentNode = bNode.parentNode;                        //若 bNode 有父節點                if(bParentNode){                var tempNode = aNode.cloneNode(true);                bParentNode.replaceChild(tempNode, bNode);                aParentNode.replaceChild(bNode, aNode);                }        }    }

⑤、刪除節點:

var reference = element.removeChild(node);

removeChild(): 從一個給定元素裡刪除一個子節點
傳回值是一個指向已被刪除的子節點的引用指標.
某個節點被 removeChild() 方法刪除時, 這個節點所包含的所有子節點將同時被刪除.
如果想刪除某個節點, 但不知道它的父節點是哪一個, 可以使用parentNode 屬性

var bjNode = document.getElementById("bj");bjNode.parentNode.removeChild(bjNode);

⑥、插入節點:

var reference = element.insertBefore(newNode,targetNode);

insertBefore(): 把一個給定節點插入到一個給定元素節點的給定子節點的前面
節點 newNode 將被插入到元素節點 element 中並出現在節點 targetNode 的前面.
節點 targetNode 必須是 element 元素的一個子節點。
插入的同時有移動功能

⑦、 innerHTML 屬性

innerHTML 屬性可以用來讀,、寫某給定元素裡的 HTML 內容

⑧、其他屬性

firstChild：該屬性返回一個給定元素節
lastChild：對應 firstChild 的一個屬性
nextSibling: 返回一個給定節點的下一個子節點
previousSibling：返回一個給定節點的上一個子節
parentNode：返回一個給定節點的父節點。

注意：parentNode 屬性返回的節點永遠是一個元素節點，因為只有元素節點才有可能包含子節點。document 節點的沒有父節點。

JavaScript——Dom編程（2）

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

JavaScript——Dom編程（2）

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support