Dom勉強!

18924 ワード
テキストリンク

what is Dom ?


1.Domは?


DomはDocument Object Modelの略で、オブジェクトのようにHTML要素を操作できるモデルです.
JavaScriptを使用できる場合は、DOMを使用してHTMLを操作できます.

Achievement Goals


実行結果は、
  • scriptタグの適用位置によって異なる場合があることが理解される.
  • DOMの概念は理解できる.
  • DOMの構造を理解し、HTMLとDOMの類似性を理解します.
  • HTMLからJavascriptファイルをロードする場合、注意点が理解できます.

    • 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 World!</div>
</body>
</html>
    • となる.
    
2. body태그가 끝나기 전에 삽입하는 경우
```js
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="msg">Hello World!</div>
  <!-- script 요소 삽입 위치 -->
  <script src="myScriptFile.js"></script>
</body>
</html>
    しゅつりょく
    let msgElement = document.querySelector('#msg');
console.log(msgElement);
    上のコードを挿入すると
    headに挿入された1番の合成文はNull出力です
    bodyに挿入された2番の合成文はHelloWorld出力です
    どうして.
    1番の作文はまだmsgが出ていない.
    2編目の作文ではbodyの宣言がjs <div id="msg">Hello World!</div> なのでHelloWorldが出力されます.

    2.DOMの概念が理解できる。



    次のコードで、
  • body ellementの子供ellementは全部で何人いますか?
    3つ!
    • コンピュータにbody elmentの3つの子elmentを伝える方法がDOMです.
    DOMはドキュメントオブジェクトに実装されます.
    DOM構造を問い合わせる場合は、consoleを選択します.ロゴではなくコンソール.dirを利用しよう!
  • クラスの名前はnews-contentsのdiv ellementの両親ellementは何ですか?
    body elment!
    • DomのparentElementで検索できます

    DOMによるHTML処理


    Create, Read, Update and Delete
    CRUDを試してみましょう!

    1. CREATE : createElement

    const tweetDiv = document.createElement('div')

    READ : querySelector / querySelectorAll

    const oneTweet = document.querySelector('.tweet')
    querySelector Allを使用すると、複数の類似配列オブジェクトを受信できます.

    UPDATE : textContent, id, classList, setAttribute


    textContentとinnerHTML

    <p id="p"><h1 style="color:blue">Coffee</h1></p>
    p.textContent呼び出しCoffee
    <p><h1 style="color:blue">innerHTML</h1></p>
    p.innerHTMLを呼び出す
    <h1 style="color:blue">innerHTML</h1>
    出力します.
    textContent選択タグの内容のみ設定または戻る

    classList.addネーミングの使用

    tweetDiv.textContent = 'dev';
tweetDiv.classList.add('tweet')

    setAttribute

    element.setAttribute('attribute_name','attribute_value')
    elementを選択してsetAttribute関数を実行する場合は、設定する属性名と属性値を追加できます.
    document.getElementById('id_value').setAttribute('title','It is kkamikoon Title');

    DELETE : remove, removeChild, innerHTML = "", textContent = ""


    remove


    場所がわかる場合はremoveを使用してください
    tweetDiv.remove()/appendを削除したエンティティを削除できます.

    removeChild


    サブエイリアスを指定して削除する方法
    繰り返し文を使用してすべてのサブアイテムを削除
    const container = document.querySelector('#container');
while (container.firstChild) {
  container.removeChild(container.firstChild);
}
    containerのサブアイテムが1つしか残っていないまで、最後のサブアイテムを削除します.
    const container = document.querySelector('#container');
while (container.children.length > 1) {
  container.removeChild(container.lastChild);
}
    クラス名tweetと呼ばれる別名を直接検索してクリア
    const tweets = document.querySelectorAll('.tweet')
tweets.forEach(function(tweet){
    tweet.remove();
})
// or
for (let tweet of tweets){
    tweet.remove()
}

    APPEND(応用):appendChild

    const tweetDiv = document.createElement('div')
document.body.append(tweetDiv)
    document.入れたい位置append(入れる要素)

    append vs appendChild

    と知る


    ノードとゾーンの違い



    子どもと子どもの日の違い



    childNodes
    現在の要素を含むサブノードのNoteListを返します.
    document.querySelector("div").childNodes

    children
    現在の要素のサブ要素を含むHTML Collectionを返します.非要素ノードはすべて除外されます.
    document.querySelector("div").children

    removeChildと removeの違い(removeChildとjavascript domでのremoveの違い)


    削除するノード.remove()
    削除するノードの親ノード.removeChild(削除するノード)
    removeChildへの削除を繰り返すことができます(上記を参照).
    removeChildサブエイリアスの削除またはid自体の削除

    類似アレイからアレイへの変更方法


    1.Array.from()メソッドで置き換えます!

    const divs = document.querySelectorAll('div'); 
// convert `NodeList` to an array
 const divsArr = Array.from(divs);

    この値は薄いコピーです

    2. 또 다른 방법은 ...을 활용하기 
// create a `NodeList` object
 const divs = document.querySelectorAll('div'); 
// convert `NodeList` to an array 
const divsArr = [...divs];

    その他など




    C#byte配列とImageの相互変換
    filestream readメソッド固定ファイルのループ読み出し