DOM Tree
5633 ワード
概要
DOMはDocumentオブジェクトモデルの略であり、ドキュメントオブジェクトモデルはHTML、XML形式の値の可視化構造である。
DOMは、ドキュメントの「リストコード」のBOM「Browserオブジェクトモデル」の付属値であり、ブラウザエンジンは、プログラミング言語によってDOM構造自体にアクセス方法を提供し、[ドキュメント構造、スタイル、コンテンツ]を変更することができます.
DOMはWebページのオブジェクト向け表示であり、JavaScriptなどのスクリプト言語でDOMを変更できます.
簡単に言えば、DOMコンセプトがあるので、ページを表すのではなくJavaScriptを使ってページを表すことができます.これはダイナミックです.
let paragraphs = document.getElementsByTagName("P");
// 스크립트의 제어를 통해 HTML 문서의 P 태그 리스트에 접근 가능하도록 변수 선언
// paragraphs[0] is the first <p> element
// paragraphs[1] is the second <p> element, etc.
alert(paragraphs[0].nodeName); // HTML 문서에 작성된 첫 번째 자식값의 태그 네임을 보여줌
// source from MDN
アクセスDOM
1.スクリプトタグを使用してドキュメントを作成したり、ページ・ロード・スクリプトの初期化からドキュメント自体を操作したりできます。 2.ドキュメント内の要素値を直接取得するAPIで操作可能
次のMDN例では、JavaScriptを使用してページをロードするときに「welcometomyホームページ!」という名前のポップアップウィンドウを指定できます.
<body onload="window.alert('welcome to my home page!');">
//onload 함수를 통해, 문서를 로드하여 인터랙션 값을 사용자에게 준다
//=> MDN
<html>
<head>
<script>
// run this function when the document is loaded
window.onload = function () { // 페이지 로드시 함수 실행
let heading = document.createElement("h1"); // 'h1' 태그 컨테이너 생성
let heading_text = document.createTextNode("Big Head!"); // 텍스트 노드 값을 채워줌
heading.appendChild(heading_text); // heading 컨테이너의 맨 끝 값으로 'Big head!'를 이동
document.body.appendChild(heading); // 문서내의 body 값 끝에 노드 값 'Big head!' 표현
}
</script>
</head>
<body>
</body>
</html>
Reference
この問題について(DOM Tree), 我々は、より多くの情報をここで見つけました https://velog.io/@ordo_92/DOM-Treeテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol