JavaScriptを学習する過程で、jsの要素を取得する問題に遭遇します。この記事では、要素を取得する方法について説明します。
実際のフロントエンド開発作業では、要素のスタイルやコンテンツなどを更新するために特定の要素を取得する必要があることがよくあります。ドキュメント オブジェクト モデル (DOM) は、HTML および XML ドキュメントのプログラミング インターフェイスであり、ドキュメントの構造化された表現を提供し、プログラムから構造にアクセスする方法を定義します。これにより、ドキュメントとコンテンツの構造とスタイルが変更されます。 DOM は、ドキュメントをノードとオブジェクト (プロパティとメソッドを含むオブジェクト) の構造化されたコレクションに解析し、Web ページをスクリプトまたはプログラミング言語に接続します。したがって、JavaScript は DOM API を通じて要素ノードを取得できます。メソッドは次のとおりです: querySelector() と querySelectorAll() は ES5 要素選択メソッドです
1. getElementById():
パラメータ: 取得する要素の ID を受け取ります。 (大文字と小文字が区別され、厳密に一致する必要があります)、次の場合に Element オブジェクトを返します (コレクションには一致する要素が 1 つしか含まれていない点を除き、動的な NodeList コレクションとみなすこともできますが、リアルタイムで DOM ノードの変更も反映されます)。現在のドキュメント 特定の ID を持つ要素が存在しない場合は、nul が返されます。
構文:
element = document.getElementById(id);
例:
<body>
<div id="myDiv">
<p class="myP">hello world</p>
<p class="myP">hello dolby</p>
<p class="myP">hello dot</p>
<p class="myP">hello bean</p>
</div>
<script>
var div = document.getElementById("myDiv"); console.log(div); //(1)
var body=document.querySelector('body');
body.removeChild(div); console.log(body); //(2)
</script></body>
//(1)处打印值 <div id="myDiv">
<p class="myP">hello world</p>
<p class="myP">hello dolby</p>
<p class="myP">hello dot</p>
<p class="myP">hello bean</p>
</div>//(2)处打印值<body>
<script>
var div = document.getElementById("myDiv"); console.log(div); //(1)
var body=document.querySelector('body');
body.removeChild(div); console.log(body); //(2)
</script></body>ログイン後にコピー
を削除する例:
<!DOCTYPE html><html><head>
<title>getElementById example</title>
<script>
function changeColor(newColor) { var elem = document.getElementById("para1");
elem.style.color = newColor;
} </script></head><body>
<p id="para1">Some text here</p>
<button onclick="changeColor('blue');">blue</button>
<button onclick="changeColor('red');">red</button></body></html>ログイン後にコピー
getElementById() メソッドは、ドキュメント内にない要素を検索しません。要素を作成して ID を割り当てた後、getElementById() を使用して以下を取得する前に、insertBefore() または他の同様のメソッドを使用して要素をドキュメントに挿入する必要があります:
var element = document.createElement("div");
element.id = 'testqq';var el = document.getElementById('testqq'); // el will be null!ログイン後にコピー
2 getElementsByClassName():
パラメーターを受け取ります。つまり、1 つ以上のクラス名 (スペースで区切られたクラス名) を含む文字列は、HTMLCollection 動的コレクションを返します (NodeList クラス配列オブジェクトを返すとも言えます)。コレクションには、ルート ノードとして現在の要素が含まれます。 、指定されたすべてのクラス名は子要素です。
構文:
var elements = document.getElementsByClassName(names);
var elements = rootElement.getElementsByClassName(names);
ログイン後にコピー
getElementsByClassName は、ドキュメントだけでなく、任意の要素に対して呼び出すことができます。 このメソッドを呼び出す要素は、この検索のルート要素として使用されます。
例:
クラス 'test' のすべての要素を取得:
document.getElementsByClassName('test');
'red' と 'test' を含むクラスのすべての要素を取得:
document.getElementsByClassName( 'red test');
ID が「main」の要素の子ノードで、クラスが「test」のすべての要素を取得します:
document.getElementById('main').getElementsByClassName('test');例:
//html代码<div class="myDiv">
<p class="myP">hello world</p>
<p class="myP">hello dolby</p>
<p class="myP">hello dot</p>
<p class="myP">hello bean</p>
</div>
//js代码一 <script>
var div = document.getElementsByClassName("myDiv"); console.log(div); //(3)
var p = document.getElementsByClassName("myP"); for (var i = 0; i < p.length; i++) {
div[0].removeChild(p[i]);
} console.log(p); //(4)
</script>ログイン後にコピー
を削除します。//(3)の値を出力します
[div.myDiv] //長さ1、innerHTMLが
hello dolby<の動的HTMLCollectionコレクション。 、
hello bean
、他の 2 つの p 要素がない理由については後で説明します。
//(4) の値を出力
[p.myP,p.myP] //長さ 2 の動的 HTMLCollection コレクションと innerHTML はそれぞれ「hello dolby」と「hello Bean」です。
ノードを削除する上記の方法では、getElementsByClassName メソッドが HTMLCollection 動的コレクションを返すことが確認されました。
⬆️上記のコードでは、まず div でページ内のクラス名「myDiv」の要素で構成される動的コレクションを取得し、 p でページ内のクラス名「myP」の要素で構成される動的コレクションを取得して、 「myDiv」コレクションの最初の項目 (つまり、上記の例では唯一の div 要素) の「myP」コレクション内の各項目を削除するための for ループ。その結果、最初の項目と 3 番目の項目のみが削除されます。削除されました。これはなぜですか?
その理由は、動的コレクション内の DOM 構造の変更が、保存されたオブジェクトに自動的に反映されるためです。最初は、i=0 の場合、ページ内の最初の p 要素は削除されます。 .length=3; i=1 の場合、残りの 3 つの p のインデックス 1 を持つ項目が削除され、i=2 の場合、iそれでは、配列のようなオブジェクト HTMLCollection 内の各項目を反復処理して、すべての項目を削除するにはどうすればよいでしょうか?
これも for ループで行われます⬇️、毎回オブジェクト コレクションの最後の項目を削除するだけです~
//js代码二 <script>
var div = document.getElementsByClassName("myDiv")[0]; console.log(div); //(5)
var p = document.getElementsByClassName("myP"); for (var i=p.length;i--;){
div.removeChild(p[i]);
} console.log(p); //(6)
</script>
//(5)处打印值<div class="myDiv"></div>//(6)处打印值[] //空的HTMLCollection集合，长度为0ログイン後にコピー
3. getElementsByTagName():
取得する要素のタグ名を 1 つ受け取ります (大文字と小文字は区別されません)。センシティブ) は、HTMLCollection 動的コレクションを返します (NodeList クラス配列オブジェクトを返すとも言えます)。このコレクションには、ルート ノードとして現在の要素 (現在の要素自体を除く)、指定されたタグ名を持つすべてのサブ要素が含まれます。 、サブ要素の順序は、サブツリー内で要素が表示される現在の順序になります。要素が見つからない場合、セットは空です。 構文:
elements = element.getElementsByTagName(tagName)
例:
// check the alignment on a number of cells in a table. var table = document.getElementById("forecast-table");
var cells = table.getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
var status = cells[i].getAttribute("data-status");
if ( status == "open" ) {
// grab the data
}
}ログイン後にコピー
例: 削除
<body>
<div id="myDiv">
<p class="myP">hello world</p>
<p class="myP">hello dolby</p>
<p class="myP">hello dot</p>
<p class="myP">hello bean</p>
</div>
<script>
var div = document.getElementById("myDiv"); console.log(div); //(7)
var p = document.getElementsByTagName("p");//ログイン後にコピー
以下for循环改为for (var i=0,len=p.length;i for (var i=p.length;i--;){
div.removeChild(p[i]);
} console.log(p); //(8)
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
