DOM QUIZ

4775 ワード
DOM button EventListener テキストリンク
  • Dom 3,4番問題
    • (1)divのすべての適切な方法をクエリーしますか?
    (両方の方法は、親、子の関係を考慮せずにすべてのdivを有する.)
  • document.getElementsByTagName('div')別名のHTML Collectionと指定したタグ名を返します.
    ルートノードを含むドキュメント全体を検索します.
    戻ってきたHTML Collectionは生きていて、これはdocumentです.getElementsByTagName()を自動的に更新し、DOMツリーとの同期を維持します.
  • document.querySelectorAll('div')
    • (2)トップレベルdivを1つだけ検索する方法は?
  • document.querySelector('div')
    • (3)idがdivの要素をどのようにクエリーしますか?
  • document.getElementById('div')
    • (4)複数のclassがdivである要素をどのようにクエリーしますか?
  • document.getElementsByClassName('div')
    • 「javascript」、「awesome」というタグを生成するには、正しい方法は?(1)
    let aElement = document.createElement('a') // a 태그를 만든다.
aElement.setAttribute('id', 'javascript') // id javascript를 a 태그 안에 넣어준다.
aElement.textContent = 'awesome'
  • この方法が最適です.setAttributeメソッドは、キーと値を明確に指定し、textContentを使用します.
    • (2) 
    let aElement = document.createElement('a')
aElement.id = 'javascipt'
aElement.innerHTML = 'awesome'
  • でもいいですが、innerHTMLを使う必要がない場合は使わないほうがいいです.HTMLタグを直接挿入して実行する方法には、常にこのようなリスクがあります.<script> tagを使用してハッカーに必要なスクリプトを強制するXSS Attackが典型的な解決策です.攻撃に余地を残さないほうがいい.
  • ボタンをクリックしてブートウィンドウを作成します:
    • <body>
   <div>
    <div>hello</div>
    <div id="world">world</div>
    <span id="code">code</span>
    <span>states</span>
    <button id="apply">apply</button>
  </div>
</body>

    onclickを
  • 1号DOMオブジェクト
    • に直接割り当てる
    
function displayAlert() {
  alert('코드스테이츠에 오신 것을 환영합니다')
}
document.querySelector('#apply').onclick = displayAlert
  • addEventListenerというメソッド
    • を使用する
    document.querySelector('#apply').addEventListener('click', function(){
   alert("코드스테이츠에 오신 것을 환영합니다")
})
    生活コードCSS 13強メディアクエリーを使用する
    箱型