JavaScriptのDOM_ダイナミックノードJavaアカデミー整理

HTMLドキュメントはブラウザで解析されてDOMツリーになるため、HTMLの構造を変えるにはJavaScriptでDOMを操作する必要があります.DOMはツリー構造であることを常に覚えています.1つのDOMノードを操作することは、実際にはいくつかの操作です.

更新:当該DOMノードの内容を更新することは、当該DOMノードが示すHTMLの内容を更新することに相当する.

遍歴:このDOMノードの下のサブノードを遍歴し、さらなる操作を行う.

追加:このDOMノードの下にサブノードを追加し、HTMLノードを動的に追加することに相当する.

削除:このノードをHTMLから削除することは、そのDOMノードの内容およびその含むすべてのサブノードを削除することに相当する.

1つのDOMノードを操作する前に,このDOMノードを様々な方法で先に取得する必要がある.最も一般的な方法はdocument.getElementById()およびdocument.getElementsByTagName()、およびCSSセレクタdocument.getElementsByClassName()である.
IDはHTMLドキュメントで一意であるためdocument.getElementById()一意のDOMノードを直接位置決めすることができる.document.getElementsByTagName()およびdocument.getElementsByClassName()常にDOMノードのセットを返す.DOMを正確に選択するには、親ノードを配置し、親ノードから選択して範囲を縮小します.
例:

//   ID 'test'   ：
var test = document.getElementById('test');

//    ID 'test-table'   ，        tr  ：
var trs = document.getElementById('test-table').getElementsByTagName('tr');

//    ID 'test-div'   ，        class  red   ：
var reds = document.getElementById('test-div').getElementsByClassName('red');

//     test         :
var cs = test.children;

//     test    、       ：
var first = test.firstElementChild;
var last = test.lastElementChild;

2つ目の方法は、querySelector()とquerySelectorAll()を使用します.selector構文を理解し、条件を使用してノードを取得する必要があります.より便利です.

//   querySelector  ID q1   ：
var q1 = document.querySelector('#q1');

//   querySelectorAll  q1             ：
var ps = q1.querySelectorAll('div.highlighted > p');

注意:低バージョンのIE<8ではサポートされていませんquerySelectorおよびquerySelectorAll.IE 8は限定サポートのみです.
厳密にはこちらのDOMノードとはElementのことですが、DOMノードは実際にはNodeHTMLではNodeElementComment・CDATA_SECTION・・など多くの種類、およびルートノードDocumentタイプがありますが、ほとんどの場合はElement、つまり、実際にページ構造を制御するNode、その他のタイプのNode無視すればよい.ルートノードDocumentグローバル変数に自動的にバインドされているdocument.
練習する
次のHTML構造:
JavaScript Java Python Ruby Swift Scheme Haskell

  
JavaScript
  
Java
 
 

  
Python
  
Ruby
  
Swift
 
 

  
Scheme
  
Haskell
 

指定した条件のノードを選択してください:

//   
JavaScript
:
var js = ???;
//   
Python
,
Ruby
,
Swift
:
var arr = ???;
//   
Haskell
:
var haskell = ???;