DOM(DocumentObjectModel)
JavaScript Core(Ecma Script Specification)
변수, 데이터형, 제어루프, 조건문 등 Script 프로그래밍 언어의 핵심 기능이 포함되어 있다.
웹브라우저에 따라 다르고, 기능을 추가하거나 제거할 수 있다.
JavaScript 자체에 정의되어 있는 객체가 속해있다. </br>
DOM (Document Object Model)
문서 안의 요소를 액세스 하는 API.
웹페이지의 내용을 제어한다. window의 프로퍼티인 document 프로퍼티에 할당된 Document객체가 이 작업을 담당한다.
또한 특정 엘리먼트의 객체를 획득할 수 있는 메소드를 제공한다.
BOM (Browser Object Model)
- 브라우저의 각종 요소를 객체화 시킨 것.
- 브라우저의 창을 조작할 수 있다.
- window 프로퍼티에 속한 객체들이 이에 속한다.
Element 노드 선택
getElementById()
getElementsByName()
getElementsByClassName()
getElementSByTagName()
querySelector()
querySelectorAll()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<head></head>
<body>
<script>
window.onload = function(){
var btn1 = document.getElementById("btn1") //id 가 btn1인 아이디 가져와서 변수에 저장
btn1.onclick = function (){ //btn1 버튼 이벤트 발생
//inter를 name으로 가지는 요소들을 inter변수에 저장
var inter = document.getElementsByName ("inter")
console.log(inter[0])
console.log(inter[1])
console.log(inter[2])
}
var btn2 = document.getElementById("btn2")
btn2.onclick = function(){ //클래스가 nice인 요소들 nice변수에 저장
var nice = document.getElementsByClassName("nice")
//반복문으로 요소들 가져오기
for(var i=0; i<nice.length; i++){
console.log(nice[i]);
}
}
}
</script>
<button id="btn1">체크박스요소 확인</button>
<input type="checkbox" name="inter" value="1">JAVA
<input type="checkbox" name="inter" value="1">JSP
<input type="checkbox" name="inter" value="1">JSX
<br>
<button id="btn2">라디오 확인</button>
<input type="radio" name="major" class="nice" value="1">프로그램
<input type="radio" name="major" class="nice" value="1">디자인
<input type="radio" name="major" class="nice" value="1">시스템
</body>
</html>
#CSS 문법으로 노드선택
querySelector()
querySelectorAll()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<head></head>
<body>
<script>
window.onload = function(){
var li = document.querySelector(".box1 ul li");
var btn1 = document.querySelector("#btn1");
btn1.onclick = function(){
li.innerHTML = "CodingJavascript";
}
var list = document.querySelectorAll(".box2 ul li");
var btn2 = document.querySelector("#btn2");
btn2.onclick = function(){
for(var i=0; i<list.length; i++){
list[i].innerHTML = "CodingJs"
console.log(list[i]);
}
}
}
</script>
<button id="btn1">querySelect 확인</button><br>
<div class = "box1">
<ul>
<li>안녕</li>
<li>헬로</li>
<li>하이</li>
</ul>
</div>
<button id="btn2">querySelectAll확인</button><br>
<div class = "box2">
<ul>
<li>카리나</li>
<li>윈터</li>
<li>츄</li>
</ul>
</div>
</body>
</html>