- Dom 3,4번문제
(1) div를 전부 조회하는 적당한 방법?
( 두 가지 메소드는 부모, 자식 관계와 관계 없이 모든 div를 집습니다.)
-
document.getElementsByTagName('div')
엘리먼트의 HTMLCollection 과 주어진 태그명을 반환합니다.
루트 노드를 포함해 전체 다큐먼트를 대상으로 검색됩니다.
반환된 HTMLCollection 은 살아있는데, 이는 document.getElementsByTagName() 을 다시 호출하지 않아도 자동으로 업데이트하여 DOM 트리와 동기화된 상태를 유지함을 의미합니다. -
document.querySelectorAll('div')
(2) 최상단 div 하나만 조회하는 방법은?
document.querySelector('div')
(3) id가 div 인 element 하나를 조회하는 방법은 ?
document.getElementById('div')
(4) class가 div 인 element 여러 개를 조회하는 방법은?
document.getElementsByClassName('div')
- 아이디가 "javascript"이고, 내용이 "awesome"인 a 태그를 생성하기 위해 옳은 방법은?
(1)
let aElement = document.createElement('a') // a 태그를 만든다.
aElement.setAttribute('id', 'javascript') // id javascript를 a 태그 안에 넣어준다.
aElement.textContent = 'awesome'- 이 방법이 가장 적합합니다. setAttribute 메소드를 통해서 명확하게 어떤 값이 key이고 value인지 지정해주었고, textContent를 사용했기 때문입니다.
(2)
let aElement = document.createElement('a')
aElement.id = 'javascipt'
aElement.innerHTML = 'awesome'- 이 방법도 되긴 하는데, innerHTML 사용은 꼭 필요하지 않으면 지양하는 것이 좋습니다. HTML tag를 직접 삽입하여 실행하는 형태의 메소드는 늘 이런 위험을 가지고 있습니다.
<script>tag를 활용하여 강제로 해커가 원하는 스크립트를 실행시키는 XSS Attack이 대표적입니다. 공격의 여지를 주지 않게 개발하는 것이 가장 좋습니다.
- button을 클릭하면 안내창을 만드는 방법
<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>
- 1번 DOM 객체에 onclick을 직접 지정
function displayAlert() {
alert('코드스테이츠에 오신 것을 환영합니다')
}
document.querySelector('#apply').onclick = displayAlert- 2번 addEventListener라는 메소드를 사용
document.querySelector('#apply').addEventListener('click', function(){
alert("코드스테이츠에 오신 것을 환영합니다")
})
끝까지 ... 가면 된다.