ドキュメントオブジェクトモデル
ドキュメントオブジェクトモデル(DOM)-ドキュメントオブジェクトモデル
HTML言語では、
HTMLページのhtml、head、title、body、divなどを요소(element)と呼ぶ.자바스크립트 HTML의 요소を문서 객체(Document Object)と呼びます.したがって、
'문서 객체를 조작한다'は、'HTML 요소를 조작한다'は有意義です.ドキュメントオブジェクト:HTML要素(element)
ドキュメントオブジェクトモデル:HTML要素を操作するオブジェクトの集合
ドキュメントオブジェクトを組み合わせて作成した全体的なシェイプ.
문서 객체 모델 (DOM, Document Object Model)と呼ばれています.現在
제이쿼리(jQuery)のようなライブラリがあります.리액트(react)のようなフレームワークを使うと、文書オブジェクトの操作が容易になるそうです.この内容は後で勉強します.
DOMContentLoadedイベント
文書オブジェクトの操作には
DOMContentLoadedイベントが使用されます.なぜそれを使うのかを理解してみましょう.
コード入力時、
DOMContentLoaded 문자열誤字入力でエラーは発生しません.(入力に注意)document.addEventListener("DOMContentLoaded",()=>{文章})
DOMContentLoadedイベントは、Webブラウザがすべての文書オブジェクトを読み出した後に実行するイベントである.前述したように、コードを構成する
DOMContentLoadedの状態は콜백 함수를 호출である.私が知っている
HTML 페이지は、コードを上から下へ順番に読み取り、実行します.->
順次朗読する.
->
<!DOCTYPE html> // HTML5 문서!
<html> // 태그가 있으니 만들자.
<head> // 태그가 있으니 만들자.
<title> // 태그가 있으니 만들자.
<body> // 태그가 있으니 만들자.document.body.innerHTMLコードを使用してみます.
문서(document)객체の바디(body)객체のHTML 코드は、javascriptでinnerHTML属性で動作可能なコードである.innerHTML:JavaScriptコードで内部HTMLコードを変更できる文字列.
上記コードでは、
body태그が生成される前に、head 태그のscript태그において動作するbody태그の部分<h1>head태그안의 h1 태그</h1>が画面に出力されなかった.まとめると、基本的に
head태그の内部にscript태그を配置すると、body태그の문서객체(요소)に近づくことができない.->説明
<head>
// body태그에 접근하지 않는 코드 라서 그대로 읽어나가며 코드가 실행됨.
<script>
const h1 = (text) => `<h1>${text}</h1>`;
</script>
// head태그 이후에 읽히는 body 태그에 접근하는 코드이므로 화면에 출력되지않고, 에러가뜸.
<script>
document.body.innerHTML += h1("head태그 안의 h1 태그");
</script>
</head>HTML 문서が見えたら、script태그はhead태그の中に最大限入れます.そこでheadタグで操作できるように
'문서 객체가 모두 만들어진 다음에 이 함수를 실행해 달라'というコードを用い,その関数はdocument.addEventListener('DOMContentLoaded', () => {}) .
以上のように
body태그にもscript태그があるので、head태그のscript태그内部の内容は最後に読み取られます(すべての文書オブジェクトを読み取って実行します)!最終出力.
最後に、ドキュメントオブジェクトを操作できる場所は次のとおりです.
head태그内でDOMContentLoadedのイベント関数を使用する方法と、body태그の内部で最も下でscript태그を使用する方法の2つがあります.ドキュメントオブジェクトアクションの配置
Reference
この問題について(ドキュメントオブジェクトモデル), 我々は、より多くの情報をここで見つけました https://velog.io/@hyo123/DOM-문서-객체-모델テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol