-
1. 다음 중 DOM에 대한 설명 중 옳은 것은?
① Element는 Node의 상위 개념이다.
② DOM을 활용하면 HTML을 조작할 수 있다.
③ DOM은 window 객체를 통해 HTML에 접근한다.
④ HTML의 구조가 자바스크립트 객체의 구조와 같이 트리 구조로 되어 있다.
⑤ 자바스크립트만 DOM을 가지고 있다.
더보기② DOM을 활용하면 HTML을 조작할 수 있다.
④ HTML의 구조가 자바스크립트 객체의 구조와 같이 트리 구조로 되어 있다.
2. 다음 중 div를 생성하기 위한 코드로 적당한 것은?
① document.innerHTML = 'div'
② document.querySelector('div')
③ document.importNode('.div')
④ document.createElement('div')
⑤ document.colneNode('div')
더보기④ document.createElement('div')
3. HTML이 다음과 같을 때, div를 전부 조회하는 적당한 방법은?
<body> <div> <div>hello</div> <div>world</div> <span>DOM</span> <span>dom</span> </div> </body>① document.querySelector('div')
② document.getElementsByTagName('div')
③ document..getElementById('div')
④ document.querySelectorAll('div')
⑤ document.getElementsByClassName('div')
더보기② document.getElementsByTagName('div')
④ document.querySelectorAll('div')
4. 3번 문제에서 적절하게 div를 모두 조회하였다면, 몇 개를 조회했는가?
<body> <div> <div>hello</div> <div>world</div> <span>DOM</span> <span>dom</span> </div> </body>① 1
② 2
③ 3
④ 4
⑤ 5
더보기③ 3
5. 아이디가 "javascript"이고, 내용이 "awesome"인 a 태그를 생성하기 위해 옳은 방법은?
① let aElement = document.createElement('a')
aElement.id(javascript)
aElement.content('awesome')
② let aElement = document.createElement('a')
aElement.textContent = 'javascript'
aElement.id = 'awesome'
③ let aElement = document.createElement('a')
aElement.setId = 'javascript'
aElement.innerHTML = 'awesome'
④ let aElement = document.createElement('a')
aElement.setAttribute('id', 'javascript')
aElement.textContent = 'awesome'
⑤ let aElement = document.createElement('a')
aElement.id = 'javascript'
aElement.innerHTML = 'awesome'
더보기④ let aElement = document.createElement('a')
aElement.setAttribute('id', 'javascript')
aElement.textContent = 'awesome'
⑤ let aElement = document.createElement('a')
aElement.id = 'javascript'
aElement.innerHTML = 'awesome'
6. id가 "world"인 div element의 자식으로, 텍스트 "world" 다음에 5번 문제에서 생성한 변수 aElement를 넣고자 할 때, 올바른 방법?
HTML 파일 <body> <div> <div>hello</div> <div id="world">world</div> <span id="code">DOM</span> <span>dom</span> </div> </body>JS 파일 let aElement = document.createElement('a') aElement.setAttribute('id', 'javascript') aElement.textContent = 'awesome'이후에 써야 할 코드는?
① document.querySelector('world').insertBefore(aElement)
② document.querySelector('#world').cloneNode(aElement)
③ document.getElementById('world').appendChild(aElement)
④ document.querySelector('world').prependChild(aElement)
⑤ document.getElementById('#world').insertAfter(aElement)
더보기③ document.getElementById('world').appendChild(aElement)
7. 6번 문제에서 HTML에 삽입한 aElement를 HTML에서 제거하기 위한 올바른 방법은?
HTML 파일 <body> <div> <div>hello</div> <div id="world"> world <a id="javascript"></a> </div> <span id="code">DOM</span> <span>dom</span> </div> </body>JS 파일(6번 문제) let aElement = document.createElement('a') aElement.setAttribute('id', 'javascript') aElement.textContent = 'awesome'① document.deleteNode(aElement)
② aElement.remove()
③ document.querySelector("#world").remove()
④ document.querySelector("#world").remove(aElement)
⑤ document.querySelector("#world").removeChild(aElement)
더보기② aElement.remove()
⑤ document.querySelector("#world").removeChild(aElement)
8. HTML이 다음과 같을 때, world의 내용을 "Earth"로 바꾸기 위한 "가장" 올바른 방법은?
<body> <div> <div>hello</div> <div id="world">world</div> <span id="code">DOM</span> <span>dom</span> </div> </body>① document.querySelector('#world').textContent = "Earth"
② document.querySelector('#world') ="Earth"
③ document.querySelector('#world').innerHTML = "Earth"
④ document.querySelector('#world').appendText = "Earth"
⑤ document.querySelector('#world').append("Earth")
더보기① document.querySelector('#world').textContent = "Earth"
9. 아래 예제의 button을 클릭하면 안내창에 "환영합니다"라고 하기 위한 적절한 방법은? (정답 2개)
<body> <div> <div>hello</div> <div id="world">world</div> <span id="code">DOM</span> <span>dom</span> <button id="apply">apply</button> </div> </body>① function displayAlert() {
alert("환영합니다")
}
document.querySelector('#apply').onclick = displayAlert()
② function displayAlert() {
alert("환영합니다")
}
document.querySelector('#apply').onclick = displayAlert()
③ document.querySelector('#apply').addEventListener('click', function() {
alert("환영합니다")
})
④ document.querySelector('#apply').addEventListener('submit', function() {
alert("환영합니다")
})
⑤ document.querySelector('#apply').addEvent('click', function() {
alert("환영합니다")
})
더보기② function displayAlert() { alert("환영합니다")
}
document.querySelector('#apply').onclick = displayAlert()
③ document.querySelector('#apply').addEventListener('click', function() {
alert("환영합니다")
})
'Problem' 카테고리의 다른 글
Web Architecture (0) 2020.12.17 React (0) 2020.12.17 Graph, Tree, Binary Search Tree (0) 2020.12.17 Linked List, Hash Table (0) 2020.12.16 Stack, Queue (0) 2020.12.16