[JS][HTML] DOM
17228 ワード
DOM?
Document Object Modelの略で、HTML要素はJSのObjectのように操作できます.DOMにより、簡単なドキュメントからWebアプリケーションにHTMLをアップグレードできます.
JavaScriptをHTMLに適用する
MyScriptFileはHTMLと同じディレクトリにあります.jsのコードをロード<script src="myScriptFile.js"></script>
<script>
要素はHTML解析を一時停止し、登場とともに実行します.
<script>タグを追加する2つの典型的な方法
myScriptFile.jsは以下のように記述されている.let msgElement = document.querySelector("#msg");
console.log(msgElement);
<head>
の内側に挿入 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="myScriptFile.js"></script>
</head>
<body>
<div id="msg">Hello JavaScript!</div>
</body>
</html>
下部のドキュメントは分割されず、コンソール出力null
.
終了前に<body>
タグを挿入 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="msg">Hello JavaScript!</div>
<script src="myScriptFile.js"></script>
</body>
</html>
<scipt>
タグ前のドキュメントをグループ化して実行し、コンソールは<div id="msg">Hello JavaScript!</div>
を出力します.
JavaScriptでは、別名にアクセスするにはパーティション化する必要があります.<scipt>
を上部に配置すると、ページのロード速度が増加します.必要なときだけ手配しましょう.
上部に<scipt>
と書き、すべてのエンティティの実行後に実行する方法
<script src="myScriptFile.js"></script>
let msgElement = document.querySelector("#msg");
console.log(msgElement);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="myScriptFile.js"></script>
</head>
<body>
<div id="msg">Hello JavaScript!</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="msg">Hello JavaScript!</div>
<script src="myScriptFile.js"></script>
</body>
</html>
別名の検索
子別名の検索
console.dir
を使用します.オブジェクトを問い合わせることができます.ダイレクトクエリ
document.태그명.children
親別名の検索
노드.parentNode
を使用します.<html>
<body>
<div id="nav">
<div class="logo"></div>
<div class="menu-wrapper">
<div class="menu">menu</div>
<div class="menu">menu</div>
<div class="menu">menu</div>
<div class="profile-photo">photo</div>
</div>
<div id="footer">footer</div>
</body>
</html>
idがnavの要素の親要素を検索let nav = document.getElementById('nav')
nav.parentNode
DOMによるHTML処理
どんな種類の開発やコンピュータ言語を学ぶには、まずCRUD(Create、Read、Update、Delete)に集中します.
Create
createElement()
document.createElement('div')
->divラベルの作成const tweetDiv = document.createElement('div')
tweetDiv変数への割当てAppend
append()
document.body.append(tweetDiv)
body elymansにtweetDivをアタッチするRead
HTMLラベル、id、classの3種類が最もよく使われています.
querySelector()
const oneTweet = document.querySelector('.tweet')
tweetでclassNameの最初の別名を受信querySelectorAll()
const tweets = document.querySelectorAll('.tweet')
ClassNameは、tweetとして同様のアレイ(Array-like Object)のテキストを受信します.Update
textcontent
tweetDiv.textContent = 'tweet!'
<div>tweet!</div>
タグに文字列を入力classList.add()
tweetDiv.classList.add('tweet')
<div class="tweet">tweet!</div>
tweetクラスが追加されましたsetAttribute()
tweetDiv.setAttribue('class', 'tweet')
<div class="tweet">tweet!</div>
tweetクラスが追加されましたDelete
remove()
tweetdiv.remove()
エンティティを削除しましたremoveChild()
container.removeChild(container.firstChild)
containerの最初のサブセグメントが削除されましたcontainer.removeChild(container.lastChild)
コンテナの最後のサブセグメントが削除されました私はforeachメソッドや繰り返し文で私の考えているすべての要素を見つけて、それらを削除するしかありません.
Reference
この問題について([JS][HTML] DOM), 我々は、より多くの情報をここで見つけました https://velog.io/@tyoon225/JS-HTML-DOMテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol