[CS] DOM Day-18

13373 ワード
textContent children button InnerHTML childrenNodes dir Event log 操作Dom 登録 ≪イベント｜Events｜ldap≫ DOM element getInputValue テキストリンク

DOM


Document Object Model
  • JavaScriptを使用してElement属性値を取得または変更します:
  • DOMはJavaScriptではありません.(JavaScriptを使用してDOM構造にアクセス)
  • HTMLドキュメントの構造と関係をオブジェクトのモデルとして表します.
  • ツリー構造
  • Documentという名前のグローバル変数
    • にアクセス可能

    その他の常識


    $0はクリックした現在の値を表します.
    <div id="practice" class="highlight red">
	Here is one Element
</div>
    ラベル名:div
    id : practice
    class : highlight, red
    内容:Here is one Element
    <body>
  <div id="practice" class="highlight red">
      Here is one Element
      <span>자식도 있습니다.</span>
      <span>자식이 여러개 입니다.</span>
  </div>
</body>
    条件はdiv
    親要素:body(1個)
    サブエイリアス:span(2個)

    logとdirの違い


    ex) console.ロゴ入力時
    <input id="username" type="text" placeholder="아이디를 입력하세요">
    ex) console.dir入力時
    input#username
    プロパティの値を特定できます.

    役に立つElementオブジェクトの理解

  • tagName:ラベル名ex)li、divなど
  • id : id
  • クラスリスト:クラスリスト
  • className:class文字列
  • プロパティ:プロパティオブジェクト
  • スタイル:スタイルオブジェクト
  • innerHTML、innerText、textContent:Elementの内容
  • 値:フォーム入力値
  • 子供:子供Element
    • 親要素
  • :親要素
  • childNodes:サブノード
  • datest:data-属性の値
  • onclick、onmouseover、onkeyupなど:アクティビティ
  • オフセット先端、オフセット距離、スクロール距離、スクロール距離、クライアント距離:座標情報
  • オフセット幅、オフセット高、スクロール幅、スクロール高、顧客幅、顧客高:寸法情報

    • ChildrenとChildNodesの違い(参照)


    childeNodesには、サブ要素の入力値も表示されます.
    childrenはいくつかの要素しか知らないが、何なのか.

    ≪イベント｜Events｜ldap≫


    特定のボタンを押すと動作==イベントが発生します
    ex) HTML
    <button>Click</button>
    ex)JavaScript関数の作成
    $0.onclick = function () {
	console.log('Hello World');
}
    ex)JavaScriptイベントの実装
    $0.addEventListener('click', function() {
	console.log('Hello World');
}

    要素の選択方法


    JavaScriptで特定の要素を選択してインポートします.
  • getElementsByTagName:使用フラグ
  • getElementById:id(idは唯一なのでelement)
  • getElementsByClassName:classを使用する
  • querySelector/querySelector All:セレクタ
    • を使用
    これでquerySelectorとquerySelector Allのみがわかります.
    ex) 
    document.querySelectorAll('.comment')
    ex)
    let allComments = document.querySelectorAll('.comment')

console.log(allComments[2]);
// 이런식으로 comment class를 불러올 수 있다.

    value登録方法

    function getInputValue() {
	// username을 선택한다.
    // new-tweet을 선택한다.
    
    // username의 값을 얻어온다.
    // new-tweet의 값을 얻어온다.
    
    let elUsername = document.querySelector('#username');
    let elNewTweet = document.getElementById('new-tweet');
    //여기서 querySelector 와 getElementById는 같은 역할을 한다.
    // getElementById의 경우 #을 넣지 않는다.
    
    console.log(elUsername.value);
    console.log(elNewTweet.value);
    上記の方法でコンソールウィンドウに出力できます.

    buttonでgetInputValueを読み込む

    document.querySelector('#register').onclick = getInputValue;
    buttonをクリックすると、getInputValueを実行して値を得ることができます.

    操作DOM(innerHTML)


    innerHTMLプロパティは、読み取り可能で書き込み可能なプロパティです.
    最も簡単で、最も遅くて、最も安全です.(textContentを使用することを推奨します.)
    ex)HTMLコード
    <div id="target">변경 전</div>
    ex) JavaScript
    let target = document.querySelector('#target');
target.innerHTML = `
	<span>변경 후</span>
`;
    ex)HTML出力結果
    <div id="target">
	<span>변경 후</span>
</div>

    オペレーションDOM


    Elementを作成する方法を理解する必要があります.InnerHTML生成を使用するよりも複雑ですが、メソッドを使用して要素を作成する利点は、作成時にイベントハンドラを登録できることです.
    ex) HTML
    <div id="target">변경 전</div>
    ex) JavaScript
    let target = document.querySelector('#target');
let newSpan = document.createElement('Span'); // span Element를 만듭니다.
newSpan.innerHTML = '변경 후';
target.appendChild(newSpan); // target 아랫쪽에 newSpan(span)을 추가합니다.
    ex)HTML出力結果
    <div id="target">
	변경 전
    <span>변경 후</span>
</div>

    しゅうせい


    新しい要素
  • (li)
    • を作成
    function appendNewComment() {
	let li = document.createElement('li');
    li.className = 'comment';
    li.innterHTML = `<div class="username">KJ</div>`
    let parent = document.querySelector('#view-comments')
    parent.appendChild(li)
}
    挿入
    • appendNewComment();

    操作DOM(<template>タグ)=>熟練時単独練習


    HTMLでHTMLセグメントを定義できます.
    ex) HTML
    <template id="will-be-rendered">
	<span>변경 후</span>
</template>

<div id="target">변경 전</div>
    ex) JavaScript
    let target = document.querySelector('#target');
let template = document.querySelector('#will-be-rendered');

// #will-be-rendered 안쪽 내용을 자식 노드를 전부 포함하여 복사합니다.
let newContent = document.importNode(template.content, true);

// target 내용을 비웁니다.
target.innerHTML = '';
target.appendChild(newContent);
    4.変数&5.式と文
    [TIL]JavaScript内蔵関数