DOM QUIZ

4775 ワード

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("코드스테이츠에 오신 것을 환영합니다")
})

Reference

この問題について(DOM QUIZ), 我々は、より多くの情報をここで見つけました https://velog.io/@jelkov/DOM-QUIZ-i1dx4gzn

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

生活コードCSS 13強メディアクエリーを使用する

箱型