[JS]Dom要素の検索、動的作成
4761 ワード
🤔 DOM要素とは?
ドキュメントオブジェクトモデル(DOM)は、HTML要素の構造化された表現であり、オブジェクトに対応しています.
Webを描画するブラウザやHTMLを動的に制御するJavascriptでは、タグによって形成されるhtmlはテキストにすぎません.したがって、ブラウザやJavascriptが理解できるように、HTML解析器は、DOMと呼ばれるHTMLをツリー構造のオブジェクトに変換します.
🐰 Javascriptで特定のDOM要素を検索する
Javasciptで必要な要素にイベントリスナーを追加したり、その要素にサブ要素として新しいDOM要素を追加したりするためには、まずJSコードから必要なDOM要素を検索する必要があります.DOM要素を検索する方法は次のとおりです.
🥕 IDとして選択
document.getElementById(“ID”)
JavaScriptからDOM要素をインポートする際に主に使用する方法です.
idはクラスまたはhtmlタグとは異なり、一意の値を持つため、1つの要素のみが返されます.
🥕 クラス名として選択
document.getElementsByClassName(「クラス名」)
これはDOM要素をクラス名としてインポートする方法です.
クラス名には複数の要素があるため、配列に戻してクラス名を持つすべての要素を返します.
🥕 htmlタグとして選択
document.getElementsByTagName(「ラベル」)
これはdiv,ul,liなどのhtmlタグで要素をインポートする方法である.
配列に戻り、タグを持つ複数の要素を返します.
🥕 CSSセレクタの構文の選択
document.QuerySelector(「cssセレクタ構文」)
document.QuerySelector All(「cssセレクタ構文」)
querySelectorは、見つかった最初の要素のみを返します.
querySelector Allは、見つかった要素を配列に返します.
選択者構文を選択するので、cssで要素を検索するときに使用する方法と同じです.
を選択します.クラス名を入力する場合は、クラス名を使用して検索します.
#idが入力されている場合は、idを使用して検索します.
そのまま入れると、ラベルで検索します.
🐰 JavascriptからDOM要素を作成して貼り付けます
🥕 要素の作成
document.createElement(「ラベル」)
タグに対応するDom要素を生成します.
たとえば、ドキュメントです.createElement(「p」)は<p></p>要素を生成する.
document.createTextNode(「要素に追加するテキスト要素」)
メソッド名などのテキスト要素を生成します.
上記のコードは、「要素に追加するテキスト要素」テキストノードを生成します.
//テキスト要素を追加する必要がある要素がある場合は、テキストノードを作成および貼り付けずに요소.innerText = "텍스트"に直接追加できます.
DOM元素A.appendChild(DOM元素B)
上のコードは、DOM要素BをDOM要素Aのサブ要素とする.
createElementまたはcreateTextNodeを使用しても、Dom要素が実際のhtmlのDom要素のサブ要素でない場合は、画面に表示されません.
例).
htmlは次のようになります.<body>
</body>
jsファイルは次のようになります.//dom요소 불러오기
const body = document.getElementsByTagName('body');
//dom요소 생성
let a = document.createElement('div');
let text = document.createTextNode("요소 생성하여 붙이기");
//dom요소 붙이기
a.appendChild(text);
body[0].appendChild(a);
このように画面に表示されます.body[0].appendChild(a)をしなければ、htmlの唯一の要素bodyのサブ要素がないので、何も見えません.
🥕 要素属性の追加
要素.setAttribute(属性、値)
要素.setAttribute("href", "https://velog.io/@sukong" );
要素.setAttribute("style", "color:red; border: 1px solid blue;");
同じように利用できます.
要素.getAttribute(プロパティ)
要素の対応する属性を返します.
要素.removeAttribute(プロパティ)
要素の対応する属性を削除します.
🥕 要素の作成、追加
1｣要因.innerHTML=「テキスト」
2｣要素.innerHTML = "<a href='https://velog.io/@sukong'> 이동! </a> "
1朕は要素のテキスト要素を追加した.
2▼▼▼はその要素の子で、<a href='https://velog.io/@sukong'> 이동! </a>を加えた.
Reference
この問題について([JS]Dom要素の検索、動的作成), 我々は、より多くの情報をここで見つけました
https://velog.io/@sukong/JS-Dom요소-찾기-동적으로-생성하기
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
Javasciptで必要な要素にイベントリスナーを追加したり、その要素にサブ要素として新しいDOM要素を追加したりするためには、まずJSコードから必要なDOM要素を検索する必要があります.DOM要素を検索する方法は次のとおりです.
🥕 IDとして選択
document.getElementById(“ID”)
JavaScriptからDOM要素をインポートする際に主に使用する方法です.
idはクラスまたはhtmlタグとは異なり、一意の値を持つため、1つの要素のみが返されます.
🥕 クラス名として選択
document.getElementsByClassName(「クラス名」)
これはDOM要素をクラス名としてインポートする方法です.
クラス名には複数の要素があるため、配列に戻してクラス名を持つすべての要素を返します.
🥕 htmlタグとして選択
document.getElementsByTagName(「ラベル」)
これはdiv,ul,liなどのhtmlタグで要素をインポートする方法である.
配列に戻り、タグを持つ複数の要素を返します.
🥕 CSSセレクタの構文の選択
document.QuerySelector(「cssセレクタ構文」)
document.QuerySelector All(「cssセレクタ構文」)
querySelectorは、見つかった最初の要素のみを返します.
querySelector Allは、見つかった要素を配列に返します.
選択者構文を選択するので、cssで要素を検索するときに使用する方法と同じです.
を選択します.クラス名を入力する場合は、クラス名を使用して検索します.
#idが入力されている場合は、idを使用して検索します.
そのまま入れると、ラベルで検索します.
🐰 JavascriptからDOM要素を作成して貼り付けます
🥕 要素の作成
document.createElement(「ラベル」)
タグに対応するDom要素を生成します.
たとえば、ドキュメントです.createElement(「p」)は<p></p>要素を生成する.
document.createTextNode(「要素に追加するテキスト要素」)
メソッド名などのテキスト要素を生成します.
上記のコードは、「要素に追加するテキスト要素」テキストノードを生成します.
//テキスト要素を追加する必要がある要素がある場合は、テキストノードを作成および貼り付けずに요소.innerText = "텍스트"に直接追加できます.
DOM元素A.appendChild(DOM元素B)
上のコードは、DOM要素BをDOM要素Aのサブ要素とする.
createElementまたはcreateTextNodeを使用しても、Dom要素が実際のhtmlのDom要素のサブ要素でない場合は、画面に表示されません.
例).
htmlは次のようになります.<body>
</body>
jsファイルは次のようになります.//dom요소 불러오기
const body = document.getElementsByTagName('body');
//dom요소 생성
let a = document.createElement('div');
let text = document.createTextNode("요소 생성하여 붙이기");
//dom요소 붙이기
a.appendChild(text);
body[0].appendChild(a);
このように画面に表示されます.body[0].appendChild(a)をしなければ、htmlの唯一の要素bodyのサブ要素がないので、何も見えません.
🥕 要素属性の追加
要素.setAttribute(属性、値)
要素.setAttribute("href", "https://velog.io/@sukong" );
要素.setAttribute("style", "color:red; border: 1px solid blue;");
同じように利用できます.
要素.getAttribute(プロパティ)
要素の対応する属性を返します.
要素.removeAttribute(プロパティ)
要素の対応する属性を削除します.
🥕 要素の作成、追加
1｣要因.innerHTML=「テキスト」
2｣要素.innerHTML = "<a href='https://velog.io/@sukong'> 이동! </a> "
1朕は要素のテキスト要素を追加した.
2▼▼▼はその要素の子で、<a href='https://velog.io/@sukong'> 이동! </a>を加えた.
Reference
この問題について([JS]Dom要素の検索、動的作成), 我々は、より多くの情報をここで見つけました
https://velog.io/@sukong/JS-Dom요소-찾기-동적으로-생성하기
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
<body>
</body>//dom요소 불러오기
const body = document.getElementsByTagName('body');
//dom요소 생성
let a = document.createElement('div');
let text = document.createTextNode("요소 생성하여 붙이기");
//dom요소 붙이기
a.appendChild(text);
body[0].appendChild(a);Reference
この問題について([JS]Dom要素の検索、動的作成), 我々は、より多くの情報をここで見つけました https://velog.io/@sukong/JS-Dom요소-찾기-동적으로-생성하기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol