AY 016. コードステータス4週目-JS/ブラウザDOM(DOMを理解)

15818 ワード
DOM テキストリンク

JavaScriptをHTMLに適用する

<script>タグを使用してJavaScriptをHTMLに適用します.
<script src="myScriptFile.js"></script>
生成されたコードを解析するときにWebブラウザが<script>要素に遭遇した場合、WebブラウザはHTMLの解析を一時停止します.HTML分析を一時停止したWebブラウザは、まず<script>要素を実行します.<script>要素は登場に伴って実行されていることを覚えておいてください.

1.<head>内側を挿入

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <!-- script 요소 삽입 위치 -->
    <script src="myScriptFile.js"></script>
  </head>
  <body>
    <div id="msg">Hello JavaScript!</div>
  </body>
</html>

2.<body>タグの終了前に挿入

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <div id="msg">Hello JavaScript!</div>
    <!-- script 요소 삽입 위치 -->
    <script src="myScriptFile.js"></script>
  </body>
</html>
別名の検索
DOM構造を問い合わせる場合、console.dirが役立ちます.console.dirはconsole.logとは異なり、DOMはオブジェクトとして出力される.
DOMによるHTML処理

CREATE - createElement

document.createElement('div')

APPEND - append, appendChild

document.body.append(tweetDiv)
変数tweetDivに含まれる新しいdivセグメントをbodyセグメントに追加します.

READ - querySelector, querySelectorAll

const oneTweet = document.querySelector('.tweet')
querySelectorを使用してクラス名tweetと呼ばれるHTMLセグメントをクエリーする
const tweets = document.querySelectorAll('.tweet')
クラス名tweetのすべてのHTMLセグメントをquerySelector Allを使用して類似配列として受信

UPDATE - textContent, classList.add

console.log(oneDiv) // <div></div>
oneDiv.textContent = 'dev';
console.log(oneDiv) // <div>dev</div>
textContentを使用して文字列を入力します.
oneDiv.classList.add('tweet')
console.log(oneDiv) // <div class="tweet">dev</div>
classList.addを使用してtweetクラスを追加します.
const container = document.querySelector('#container')
container.append(oneDiv)
appendを使用してoneDivをコンテナのサブ要素に追加します.

DELETE - remove, removeChild

const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
tweetDiv.remove() // 이렇게 append 했던 엘리먼트를 삭제할 수 있다.
idがcontainerのページの下にtweetDivを追加し、removeで削除します.
document.querySelector('#container').innerHTML = '';
idがcontainerの要素の下にあるすべての要素をクリアします.
const container = document.querySelector('#container');
while (container.firstChild) {
  container.removeChild(container.firstChild);
}
containerの最初のサブエレメントが存在する場合は、最初のサブエレメントを削除します.
const container = document.querySelector('#container');
while (container.children.length > 1) {
  container.removeChild(container.lastChild);
}
containerのサブエイリアスが1つしか残っていないまで、最後のサブエイリアスを削除します.
または、tweetというクラス名の要素を直接検索して削除することもできます.
const tweets = document.querySelectorAll('.tweet')
tweets.forEach(function(tweet){
    tweet.remove();
})
// or
for (let tweet of tweets){
    tweet.remove()
}
クラス名tweetという要素のみを検索して削除します.
JenkinsとArtifactory Integrationを用いた複数リポジトリによるパイプライン構築
ショッピングカートのアクションとリダーズ