DOM操作メソッド、プロパティまとめ

いくつかの単語の男は、直接デモで、言いました：
1 <！DOCTYPE HTML>
 2 <HTMLのlang = "EN">
 3 <HEAD>
 4      <メタのcharset = "UTF-8">
 5      <タイトル>ドキュメント</タイトル>
 6 </ HEAD>
 7 <BODY>
 8      < DIV CLASS = "コンテナ" idは= "ボックス"> <span>を私はdiv要素である。1 </ span>の<P>こんにちは</ P> </ div>
 9      <スクリプト>
 10          のvar divNode = document.getElementsByClassName（ "コンテナ「）[0 ];
 11  / * ノード演算* / 
12          / * 要素ノードを取得する* / 
13である          にconsole.log（divNode。        nodeTypeの） // 1 
14         console.log（divNode.nodeName）         // DIV 
15          にconsole.log（divNode.nodeValue）         // ヌル
16  
17          / * 获取属性节点* / 
18          はconsole.log（divNode.attributes [1] .nodeName）   // ID 
19          console.log（divNode.attributes [0] .nodeValue）。    // 容器
20          はconsole.log（divNode.attributes [0]）。        // クラス= "コンテナ" 
21  
22          / * 获取文本节点* / 
23          はconsole.log（divNode.childNodes [0] .nodeName）。    // SPAN 
24         ;にconsole.log（divNode.childNodes [0] .nodeValue）     // サブ要素が存在しない場合はnull、テキスト出力
25          にconsole.log（divNode.parentNode）;     // 出力タグとその子要素本体
26は、          コンソールが。ログ（ "===================" ）
 27          はconsole.log（divNode.childNodes .childNodes [0] .nodeNameを[1]）;    // の#text 
28          コンソール.logの（divNode.childNodes .childNodes [0] .nodeValueを[1]）;      // ハロー
29  / *要素の動作の方法* / 
30          / * 子ノードを追加する* / 
31である         VARにaddNode =のdocument.createElement（ "DIV" ）。
 32          VARaddText = document.createTextNode（ "広州" ）。
33          addNode.appendChild（addText）。
34          divNode.appendChild（にaddNode）。
35  
36          / * 删除子节点* / 
37          VAR deleteNode = document.getElementsByTagName（ "スパン"）[0 ]
 38          divNode.removeChild（deleteNode）。
39  
40          / * 替换子节点* / 
41          VAR replaceNodeを= divNode.getElementsByTagName（ "DIV"）[0 ]
 42          VAR newReplace =のdocument.createElement（ "スパン" ）。
43              newReplace.innerHTML =「私の名前はルーカス」。
44は         、divNode.replaceChild（newReplace、replaceNodeを）
 45  
46であり、         / * 子ノードを挿入する* / 
47          VAR newInsert =のdocument.createElement（ "DIV" ）;
 48              newInsert.innerHTMLは= "新しい新しいDIVを挿入" ;
 49              divNode.insertBefore（newInsert 、divNode.childNodes [0 ]）;
 50  
51は、 / * 属性操作* / 
52          / * プロパティノードを取得する* / 
53である          にconsole.log（divNode.getAttribute（ "クラス"））;         // コンテナ
54がある          にconsole.log（divNode。 getAttributeNode（ "クラス"））;     //=クラス"コンテナ" 
55  
56である         * / 作成し、プロパティノードを設定する* / 
57である         VAR ADDATTR = document.createAttribute（ "クラス" ）;
 58          addAttr.value = "newAttr" ;
 59          divNode.setAttributeNode（ADDATTR）; // 置き換えます古いクラス
60          // divNode.setAttribute（ "クラス"、 "newAttr"）; / * *シンプルな言葉遣い/ 
61は、 
62である         / * 属性を削除* / 
63である         VAR deleteAttr = divNode.getAttributeNode（ "クラス" ）;
 64          divNode.removeAttributeNode （deleteAttr）
 65          // divNode.removeAttribute（ "上記ID"）/ * *シンプル文言/ 
66     </ SCRIPT>    
 67 </ BODY>
 68 </ HTML>
効果
DOM操作メソッド、プロパティまとめ

おすすめ
