jsでよく使われるDOMメソッドを詳しく解説

Om JS DOM の一般的なメソッドをいくつか紹介します

要素ノードを取得します GetelementByid GetelementsBytagname GetelementsByClassName

テスト用の簡単な Web ページを作成します:

RETELEMENTBYID

1. 変数 var contentid を最初に定義します = document.GetelementByid ("Contentid ");

2. 次に、出力オブジェクト contentId は、id contentId ( <p id="contentId" style="width:500px; height: 30px; background-color: #ccc"> ) を持つ要素オブジェクトを返します。以下の図を参照してください:

2. getElementsByTagName

1. 最初に変数を定義します var contentTag = document.getElementsByTagName("p"); 2. 次に、HTMLCollection [ <p# を返す contentTag を出力します。 contentId>、] 合計 2 つあり、# で始まる 1 つは ID を表し、もう 1 つはクラス名を表します。

3. 続行 contentTag[0] Output<p id="contentId" style="width:500px; height: 30px;background-color: #ccc">

contentTag[1] Output<p class= "contentClass " style="width:500px; height: 30px;background-color: #ccc">

getElementsByTagName が配列を返すことがわかります。

3. getElementsByClassName

1. var contentClass = document.getElementsByClassName("contentClass");

2. contentClass 出力 HTMLCollection [ <p.contentClass> ] 要素オブジェクトが 1 つしかない場合でも、要素オブジェクトの配列を返します。

3. contentClass[0] out<p class="contentClass" style="width:500px; height: 30px;background-color: #ccc">

getAttribute と setAttribute 、 ChildNodes もよく使います、nodeType、nodeValue、firstChild、lastChild メソッドを使用して情報を取得します。

4. getAttribute と setAttribute を使用してそれぞれ属性を取得および設定します:

style 属性を変更した後:

5. これは childNOdes です:

つまり、 <p> ;< ;/p> ブロック要素に遭遇すると、ブロック要素の間に改行文字 <br> があり、ブラウザは子ノードを検索するときにそれをテキスト ノードとして扱います。この図から、childNodes も配列を返すことがわかります。

<p#contentId> の場合はどうなりますか?

nodeType には 12 の値があり、一般的に使用される値は 3 つあります。1 は要素ノードを表し、2 は属性ノードを表し、3 はテキスト ノードを表します。

nodeValue はテキスト ノードの値を取得するだけでなく、テキスト ノードの値を変更することもできます。

以上がこの記事の内容です、この記事の内容が皆様の勉強や仕事のお役に立てれば幸いです、PHP中国語サイトも応援させていただきます！

js で一般的に使用される DOM メソッドの詳細な説明については、PHP 中国語 Web サイトに注目してください。