<문서 객체 모델(DOM)>
- XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스
- 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공
- HTML 태그를 제어, 객체로 사용
- <head> 에 사용할 때에는 항상 window.onload=function(){} 내부에 작성해야 한다
- DOM은 태그를 제어하기 때문에 <body> 내부에 작성하는것을 선호
<script>
window.onload = function(){
let hTag = document.getElementById("selector"); //객체 형식
hTag.style.color = "red";
}
</script>
<Document 객체>
웹페이지에 존제하는 HTML요소에 접근하고자 할 때는 window 객체의 document 프로퍼티를 통해 사용할 수 있다.
document.메소드
<Document 메소드>
- DOM 요소의 선택
| document.getElementsByTagName(태그이름) | 인자로 전달된 태그명에 해당하는 객체들을 찾아서 그 리스트를 NodeList라는 유사 배열에 담아서 반환. NodeList는 배열은 아니지만 length와 배열접근연산자를 사용해서 엘리먼트를 조회할 수 있다. |
| document.getElementById(아이디) | 해당 아이디의 요소를 선택 |
| document.getElementsByClassName(클래스이름) | 해당 클래스에 속한 요소를 모두 선택 |
| document.getElementsByName(name속성값) | 해당 name 속성값을 가지는 요소를 모두 선택 |
| document.querySelectorAll(선택자) | CSS 선택자(아이디, 클래스, 속성, 속성값 등)를 이용하여 HTML 요소를 선택 |
| document.(html 객체 집합) | HTML DOM에서 제공하는 객체 집합(object collection)을 이용하여 HTML 요소를 선택 (title, domain, body, cookie 등등) |
- document.querySelectorAll(선택자)
클래스가 "odd"인 요소중 <li> 요소만 선택
var selectedItem = document.querySelectorAll("li.odd")
for(var i=0;i <selectiedItem.length;i++){
selectedItem.item(i).style.color="red";
}
- id "food_1" 이 가리키는 li 태그
let myList = document.getElementById("food_1").getElementsByTagName("li");
<DOM 요소 내용 변경>
- innerHTML
var str=document.getElementById("text");
str.innerHTML = "이 내용으로 변경됨"
(대상태그의 몸통부분을 가져옴)
let pbody = document.getElementById("info").innerHTML;
- HTML 요소의 속성이름 사용
var link = document.getElementById("link");
link.href="/javascript/intro";
link.innerHTML = "자바스크립트 수업 바로 가기";
<DOM 요소 스타일 변경>
- style
var str = document.getElementById("text");
function changeRedColor() {str.style.color="red";}
function changeBlackColor() {str.style.color="black";}
- HTML 이벤트 핸들러 추가 (핸들러는 보통 함수를 정의)
document.getElementById(아이디).onclick = function(){ 실행할 코드 }
마우스 클릭 이벤트와 연결될 이벤트 핸들러 코드
<button type="button" onclick="change()">p태그 배경색 넣기</button>
<script>
function change(){
let pTag=document.getElementById("info");
pTag.style.backgroundColor="pink";
}
</script>
'javascript' 카테고리의 다른 글
| 내장객체_문자열 객체 (0) | 2022.11.15 |
|---|---|
| 즉시실행함수 (0) | 2022.11.15 |
| 객체 생성자 함수_프로토타입(prototype) (0) | 2022.11.15 |
| 내장객체_날짜(Date()), 수학객체(Math()) (0) | 2022.11.15 |
| 1114_함수정의 (0) | 2022.11.15 |