[JavaScript] DOM
5193 ワード
DOM
ドキュメントオブジェクトモデル(Document Object Model)は、Webページのすべての内容をオブジェクトとして表します.DOMは、ドキュメントの構造表示を提供し、プログラミング言語でDOM構造にアクセスする方法を提供します.これにより、ドキュメントの構造、スタイル、コンテンツを変更できます.
-コアDOM:すべてのドキュメントタイプのDOMモデル
-HTMLドキュメントのDOMモデル
-XML DOM:ドキュメントのDOMモデル
1.Documentオブジェクト
DocumentオブジェクトはWebページそのものを表します.したがって、DOMに対して実行されるすべての演算は、ドキュメントオブジェクトから開始されます.documentオブジェクトはDOMにアクセスする「アクセスポイント」です.
2.Documentメソッド
Documentオブジェクトは、HTML要素に関連する操作を処理するためのさまざまな方法を提供します.
3.HTML要素の選択
-
document.documentElement
: document.DocumentElement DOMツリー上部の<html>
タグへのアクセス-
document.head
:<head>
ラベルアクセス-
document.body
:<body>
ラベルアクセスdocument.getElementsByTagName(태그이름)
:タグ名のすべての要素を選択document.getElementsByName(name속성값)
:対応するname属性値を持つすべての要素を選択document.getElementById(아이디)
:アイデンティティ要素の選択document.getElementsByClassName(클래스이름)
:クラスに属するすべての要素を選択document.querySelectorAll(선택자)
:選択者としてのすべての要素を選択document.querySelector(선택자)
:選択者として要素を選択注意!getElementByIdのみがElement部分に「s」を付けません.
これは、ドキュメントに複数のタグやクラスが存在するのに比べて、アイデンティティが1つだけ存在しなければならない要素であるためです.
-
previousElementSibling
:前の要素を選択-
nextElementSibling
:次の要素を選択します.-
parentElement()
:親要素の選択-
firstElementChild()
:最初のサブエレメントを選択-
lastElementChild()
:最後のサブエレメントを選択getElementsByTagName("*"); // 모든 태그 선택
document.querySelector(".class"); // querySelector로 class 선택
document.querySelector("#id"); // querySelector로 id 선택
// id가 yellow인 요소를 선택하여 색상 변경하기
let yellow = document.getElementById('yellow');
yellow.style.color = 'yellow';
4.HTML要素の生成
document.createElement(HTML요소)
:指定されたHTML要素を生成document.write(텍스트)
:HTMLによるストリーム出力テキスト5.HTMLイベントハンドラの追加
document.getElementById(아이디).onclick = function(){ 실행할 코드 }
:マウスクリックイベントに関連付けるイベントハンドラコードを追加6.HTMLオブジェクトの選択
document.doctype
HTMLドキュメントのドキュメントタイプ(doctype)を返します.document.documentElement
:戻り要素document.head
:戻り要素は、
document.body
要素を返します.document.scripts
:は、
document.title
document.forms
:Reference
この問題について([JavaScript] DOM), 我々は、より多くの情報をここで見つけました https://velog.io/@kim_unknown_/JavaScript-DOMテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol