1. 단일 객체 반환
document.getElementByID("ID"); Ex) document.querySelector("btnId"); => "What's your name?"
document.querySelector(".class"); Ex)document.querySelector("btn"); => "What's your name?"
document.querySelector("#ID"); Ex)document.querySelector("#btnId"); => "What's your name?"
2. 배열처럼 동작하는 HTMLCollection 객체 반환
document.getElementsByClassName("class")[index]; Ex)document.getElementsByClassName("contents")[0];
=> "안녕하세요."
document.getElementsByTagName("tagName")[index]; Ex)document.getElementsByTagName("p")[0];
=> "안녕하세요."
3. 배열처럼 동작하는 NodeList 반환
document.querySelectorAll("#ID");
4. 자식노드 가져오기
document.body.childeNodes.item(index).
5. 부모노드 가져오기
document.getElementById.parentNode
<예시>
<body>
<div>
<input type = "button" id="btnId" class = "btn" value= "What's your name?" />
<p class = "contents">안녕하세요.</p>
<p></p>
</div>
<script type="text/javascript">
const button = document.getElementById("btnId");
const contents = document.querySelector(".contents");
button.addEventListener("click",changeText);
function changeText(){
const name = prompt('Enter your name');
contents.textContent += name + '님 반갑습니다.😊';
}
</script>
</body>
📌오류 정리
document.getElementsByClassName('btn') => 오류 발생
-> document.getElemntsByClassName('btn')[0] => index값 작성 오류해결
'Java script' 카테고리의 다른 글
| Javascript_이메일 형식 확인 정규식, 핸드폰 번호 형식 자동 적용 정규식 (0) | 2022.08.09 |
|---|---|
| JavaScript_두 INPUT 값 자동 합산 구현/ 숫자만 입력되도록 구현 하는 방법 (0) | 2022.08.08 |
| JavaScript_if문, 삼항 연산자, switch 조건문 (0) | 2022.07.31 |
| JavaScript_자바스크립트 개요, 기본 개념 (0) | 2022.07.27 |
| JavaScript_자바스크립트 첫걸음/독학 방법 추천/ 사이트 추천 (0) | 2022.07.26 |
