문서 객체
문서 객체 모델(Document Object Model)은 자바스크립트를 통해 브라우저에서 동작하는 형태를 접근하는 방식이며, 문서와 관력된 객체입니다.
문서 객체
문서 객체 속성
| 종류 | 설명 |
|---|---|
| createElement() | 요소 노드를 생성합니다. |
| createTextNode() | 텍스트 노드를 생성합니다. |
| appendChild() | 객체에 노드를 추가합니다. |
| setAttribute() | 객체의 속성을 설정합니다. |
| getAttribute() | 객체의 속성을 가져옵니다. |
| getElementById() | ID 속성을 가져옵니다. |
| getElementsByName() | 객체의 속성 이름을 가져옵니다. |
| getElementsByTagName() | 태그를 선택합니다. |
| removeChild() | 객체의 자식 노드를 제거합니다. |
| querySelector() | 선택자로 가장 처음 선택되는 문서 객체를 가져옵니다. |
| querySelectorAll() | 선택자로 선택되는 문서 객체를 배열로 가져옵니다. |
자바스크립트와 제이쿼리의 비교
| 선택 | 자바스크립트 | 제이쿼리 |
|---|---|---|
| 이름 | document.getElementsByName() | |
| 아이디 | document.getElementsById("아이디") | $("#아이디") |
| 태그 | document.getElementsByTagName("태그") | $("태그") |
| 자식 선택자 | childNodes |
Sample1
getElementById를 이용한 ID선택하는 예제입니다.
결과
getElementById
- .find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.
- .next() 메서드는 선택한 요소의 다음 요소를 선택합니다.
- .nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.
- .nextUntil() 메서드는 지정한 선택 요소의 모든 요소를 선택합니다.
Javascript
window.onload = function(){
document.getElementById("off1").onclick = function(){
document.getElementById("list").style.color="#000"
}
document.getElementById("btn1").onclick = function(){
document.getElementById("list").style.color="#c7254e"
}
}jQuery
$(document).ready(function(){
$("#off1").on("click", function(){
$("#list").css("color","#000");
});
$("#btn1").on("click", function(){
$("#list").css("color","#c7254e");
});
});html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Javascript</title>
</head>
<body>
<h3>getElementById</h3>
<div id="list">
<ul>
<li>.find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.</li>
<li>.next() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
<li>.nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
<li>.nextUntil() 메서드는 지정한 선택 요소의 모든 요소를 선택합니다.</li>
</ul>
</div>
<div class="choice">
<button href="#c" id="off1">리셋</button>
<button href="#c" id="btn1">클릭하면 글씨색이 변경됩니다.</button>
</div>
<script>
window.onload = function(){
document.getElementById("off1").onclick = function(){
document.getElementById("list").style.color="#000"
}
document.getElementById("btn1").onclick = function(){
document.getElementById("list").style.color="#c7254e"
}
}
</script>
<!-- jQuery로 작성한다면~ -->
<!--
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#off1").on("click", function(){
$("#list").css("color","#000");
});
$("#btn1").on("click", function(){
$("#list").css("color","#c7254e");
});
});
</script>
-->
</body>
</html>참고(Reference)
- MDN JavaScript
