- div를 전부 조회하는 방법?
document.getElementsByTagName('div')
document.querySelectorAll('div')- 아이디가 "javascript"이고, 내용이 "awesome"인 a 태그를 생성?
let aElement = document.createElement('a')
aElement.setAttribute('id', 'javascript')
aElement.textContent = 'awesome'
//or
let aElement = document.createElement('a')
aElement.id = 'javascript'
aElement.innerHTML = 'awesome'
//innerHTML 사용은 꼭 필요하지 않으면 지양하는 것이 좋습니다. HTML tag를 직접 삽입하여 실행하는 형태의 메소드는 늘 이런 위험을 가지고 있습니다. <script> tag를 활용하여 강제로 해커가 원하는 스크립트를 실행시키는 XSS Attack이 대표적입니다. 공격의 여지를 주지 않게 개발하는 것이 가장 좋습니다.- id가 "world"인 div 엘리먼트의 자식 엘리먼트로 2번 추가?
document.getElementByID('world').appendChild(aElement);- 아래 HTMLdptj aElement를 제거하기 위한 올바른 방법?
<body>
<div>
<div>hello</div>
<div id="world">
world
<a id="javascript"></a>
</div>
<span id="code">code</span>
<span>states</span>
</div>
</body>-->
aElement.remove();
//or
document.querySelector("#world").removechild(aElement);
//주의!
//document.querySelector("#world").remove(),
//document.querySelector("#world").remove(aElement)
//두 메소드는 world 엘리먼트 전부를 지우게 됩니다.- 아래 HTML에서 button을 클릭하면 안내창에 "Hello World!"라고 하기 위한 적절한 방법은?
<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>-->
function displayAlert() {
alert('Hello World!')
}
document.querySelector('#apply').onclick = displayAlert //함수의 실행값이 아니라 함수 그 자체를 할당해야 함.
//or
document.querySelector('#apply').addEventListener('click', function(){
alert('Hello World!')
}) //addEventListener라는 메소드 사용
- 어떤 버튼(btn)이 존재하고, 버튼을 클릭할 때 콘솔에 "버튼이 눌렸습니다!"가 출력되게 만들고 싶습니다. 자바스크립트 코드로 적절한 것?
btn.onclick = function(){
console.log('버튼이 눌렸습니다!);
};
//or
btn.addEventListener('click', function(){
console.log('버튼이 눌렸습니다!);
})
//or
function handler(){
console.log('버튼이 눌렸습니다!);
}
btn.onclick = handler;
- DOM으로
<input type="text">또는<textarea>와 같은 엘리먼트의 입력 값을 설정하거나, 또는 얻어내려면 어떤 속성을 사용해야 할까요?
-->value
우당탕탕 개발일기📝🤖