JavaScript——Dom編程（2）
阿新 • • 發佈：2018-01-28
ast tar new 城市 show gen aps 字符 ide 
①、創建一個元素節點:
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 的最後一個子節點.
- 方法的返回值是一個指向新增子節點的引用指
<!View CodeDOCTYPE 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>
④、節點的替換:
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）