문서 객체 모델을 DOM으로 표현한다. ‘돔’이라 읽음
DOM : 웹 문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법
document는 웹 문서 자체를 가리키는 DOM 요소 중 하나이다.
[DOM 트리]
<body>
<h1> 제목 </h1>
<p> 본문 </p>
</body>DOM은 body를 h1,p의 부모요소로, h1,p를 body의 자식요소로 이해하고 구조화 한다.
그러면 나무를 거꾸로 뒤집어 놓은 모양이되고, 이것을 DOM 트리 라고 부른다.
[h1] — [‘제목’]
[body] —
[p] — [‘본문’]
각 [] 상자를 노드라고 한다.
DOM 트리는 웹 문서의 HTML 요소만 표현하지 않는다
- 웹 문서의 태그는 요소(Element) 노드로 표현한다.
- 태그가 품고 있는 텍스트는 해당 요소 노드(태그)의 자식 노드인 텍스트(Text) 노드로 표현한다.
- 태그의 속성은 모두 해당 요소 노드(태그)의 자식 노드인 속성(Attribute) 노드로 표현한다.
- 주석은 주석 노드로 표현함
[DOM 요소에 접근]
- CSS에는 선택자 개념이 있다.
- DOM 요소에 접근할 때도 주로 선택자를 사용한다.
getElementById()
DOM요소를 id 선택자로 접근
getElementsByClassName()
DOM요소를 class 값으로 찾아낸다.
CSS에서 class 선택자는 id 선택자와 다르게 웹 문서 안에서 여러 번 사용할 수 있다.
그래서 getElementsByClassName() 함수는 2개 이상의 웹 요소에 접근한다.
만약 getElememtsByClassName()로 접근한 DOM 요소 중 1개의 요소에만 접근하고 싶으면
배열의 인덱스를 사용하면 된다.
ex)
document.getElementsByClassName(“example”)[0];
getElementsByTagName()
DOM 요소를 태그 이름으로 찾아낸다.
마찬가지로 인덱스를 사용해서 특정 요소에 접근 할 수 있다.
querySelector(), querySelectorAll()
DOM요소를 다양한 방법으로 찾아주는 함수
id,class 값을 사용해도 되고, 태그 이름을 사용해도 된다.
두 함수는 DOM 요소 개수에만 차이가 있을 뿐 사용 방법은 같다
class값 앞에는 마침표(.)를, id 값 앞에서는 샵(#)을 붙인다.
document.querySelector(“#example”);
document.querySelector(“.example”);
[getElementById() 함수와 querySelector() 함수의 차이]
getElementById() 함수는 단순히 id 선택자를 사용해서 요소에 접근
querySelector() 함수는 id 선택자 뿐만 아니라, querySelector(#container > ul)처럼 둘 이상의 선택자를 사용해서 요소에 접근할 수 있다.
[접근한 DOM 요소의 속성 노드에 접근]
getAttribute(), setAttribute()
HTML 태그 속성을 가져오거나 수정하는 함수
document.querySelector(“#example”).getAttribute(“src”);
id가 example인 요소에 접근해서 그 요소의 src 속성을 가져온다.
addEventListener(“(1번)”, (2번), (3번));1번 : 처리할 이벤트 유형이다. on을 붙이지 않고, click, mouseover 처럼 이벤트 이름만 사용한다.
2번 : 함수이다. 이벤트가 발생했을 때 실행할 명령을 나열하거나 따로 함수를 만들었다면 함수 이름을 지정한다.
3번 : 이벤트를 캡쳐링하는지 여부를 지정. 단 생략할 수 있음. 기본 값은 false
웹 문서에 있는 요소는 단순히 태그만 있는 게 아니라 태그 속성과 내용을 함께 사용한다. 그래서 <h1> 또는 <p> 태그를 추가하고 싶다면 단순한 태그 뿐만 아니라, 그에 해당하는 텍스트 내용 및 속성도 추가해야함
[<요소노드 속성노드> 텍스트노드 </요소노드>] 만드는 순서
1)
createElement() : 새 요소 노드를 만든다
2)
createTextNode() : 텍스트 내용이 있을 경우 텍스트 노드를 만든다
appendChild() : 텍스트 노드를 요소 노드에 자식 노드로 추가한다.
3)
creatAttribute() : 요소에 속성이 있을 경우 속성 노드를 만든다.
setAttributeNode() : 속성 노드를 요소 노드에 연결
4)
appendChild() : 새로 만든 요소노드를 부모 노드에 추가함
hasChildNodes()
특정 노드에 자식 노드가 있는지를 확인하는 함수
자식 노드가 있다면 true, 없다면 false 반납
removeChild()
DOM 트리에 있는 노드를 삭제할 때 removeChild() 함수를 사용한다.
부모노드에서 자식 노드를 삭제하는 함수이고, 괄호 안에는 삭제하려는 자식 노드가 들어감
parentNode()
현재 노드의 부모 요소 노드를 반환함
'프로그래밍 언어 > JavaScript' 카테고리의 다른 글
| 브라우저 객체 모델 (0) | 2023.09.30 |
|---|---|
| DOM으로 Form 요소 접근 (0) | 2023.09.29 |
| JSON.stringify(), JSON.parse(), toJSON() 정리 (0) | 2023.09.26 |
| Array 객체의 여러 함수들 (0) | 2023.09.26 |
| 자바스크립트 기초 훑기 - 2 (0) | 2023.07.21 |
문서 객체 모델을 DOM으로 표현한다. ‘돔’이라 읽음
DOM : 웹 문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법
document는 웹 문서 자체를 가리키는 DOM 요소 중 하나이다.
[DOM 트리]
<body>
<h1> 제목 </h1>
<p> 본문 </p>
</body>DOM은 body를 h1,p의 부모요소로, h1,p를 body의 자식요소로 이해하고 구조화 한다.
그러면 나무를 거꾸로 뒤집어 놓은 모양이되고, 이것을 DOM 트리 라고 부른다.
[h1] — [‘제목’]
[body] —
[p] — [‘본문’]
각 [] 상자를 노드라고 한다.
DOM 트리는 웹 문서의 HTML 요소만 표현하지 않는다
- 웹 문서의 태그는 요소(Element) 노드로 표현한다.
- 태그가 품고 있는 텍스트는 해당 요소 노드(태그)의 자식 노드인 텍스트(Text) 노드로 표현한다.
- 태그의 속성은 모두 해당 요소 노드(태그)의 자식 노드인 속성(Attribute) 노드로 표현한다.
- 주석은 주석 노드로 표현함
[DOM 요소에 접근]
- CSS에는 선택자 개념이 있다.
- DOM 요소에 접근할 때도 주로 선택자를 사용한다.
getElementById()
DOM요소를 id 선택자로 접근
getElementsByClassName()
DOM요소를 class 값으로 찾아낸다.
CSS에서 class 선택자는 id 선택자와 다르게 웹 문서 안에서 여러 번 사용할 수 있다.
그래서 getElementsByClassName() 함수는 2개 이상의 웹 요소에 접근한다.
만약 getElememtsByClassName()로 접근한 DOM 요소 중 1개의 요소에만 접근하고 싶으면
배열의 인덱스를 사용하면 된다.
ex)
document.getElementsByClassName(“example”)[0];
getElementsByTagName()
DOM 요소를 태그 이름으로 찾아낸다.
마찬가지로 인덱스를 사용해서 특정 요소에 접근 할 수 있다.
querySelector(), querySelectorAll()
DOM요소를 다양한 방법으로 찾아주는 함수
id,class 값을 사용해도 되고, 태그 이름을 사용해도 된다.
두 함수는 DOM 요소 개수에만 차이가 있을 뿐 사용 방법은 같다
class값 앞에는 마침표(.)를, id 값 앞에서는 샵(#)을 붙인다.
document.querySelector(“#example”);
document.querySelector(“.example”);
[getElementById() 함수와 querySelector() 함수의 차이]
getElementById() 함수는 단순히 id 선택자를 사용해서 요소에 접근
querySelector() 함수는 id 선택자 뿐만 아니라, querySelector(#container > ul)처럼 둘 이상의 선택자를 사용해서 요소에 접근할 수 있다.
[접근한 DOM 요소의 속성 노드에 접근]
getAttribute(), setAttribute()
HTML 태그 속성을 가져오거나 수정하는 함수
document.querySelector(“#example”).getAttribute(“src”);
id가 example인 요소에 접근해서 그 요소의 src 속성을 가져온다.
addEventListener(“(1번)”, (2번), (3번));1번 : 처리할 이벤트 유형이다. on을 붙이지 않고, click, mouseover 처럼 이벤트 이름만 사용한다.
2번 : 함수이다. 이벤트가 발생했을 때 실행할 명령을 나열하거나 따로 함수를 만들었다면 함수 이름을 지정한다.
3번 : 이벤트를 캡쳐링하는지 여부를 지정. 단 생략할 수 있음. 기본 값은 false
웹 문서에 있는 요소는 단순히 태그만 있는 게 아니라 태그 속성과 내용을 함께 사용한다. 그래서 <h1> 또는 <p> 태그를 추가하고 싶다면 단순한 태그 뿐만 아니라, 그에 해당하는 텍스트 내용 및 속성도 추가해야함
[<요소노드 속성노드> 텍스트노드 </요소노드>] 만드는 순서
1)
createElement() : 새 요소 노드를 만든다
2)
createTextNode() : 텍스트 내용이 있을 경우 텍스트 노드를 만든다
appendChild() : 텍스트 노드를 요소 노드에 자식 노드로 추가한다.
3)
creatAttribute() : 요소에 속성이 있을 경우 속성 노드를 만든다.
setAttributeNode() : 속성 노드를 요소 노드에 연결
4)
appendChild() : 새로 만든 요소노드를 부모 노드에 추가함
hasChildNodes()
특정 노드에 자식 노드가 있는지를 확인하는 함수
자식 노드가 있다면 true, 없다면 false 반납
removeChild()
DOM 트리에 있는 노드를 삭제할 때 removeChild() 함수를 사용한다.
부모노드에서 자식 노드를 삭제하는 함수이고, 괄호 안에는 삭제하려는 자식 노드가 들어감
parentNode()
현재 노드의 부모 요소 노드를 반환함
'프로그래밍 언어 > JavaScript' 카테고리의 다른 글
| 브라우저 객체 모델 (0) | 2023.09.30 |
|---|---|
| DOM으로 Form 요소 접근 (0) | 2023.09.29 |
| JSON.stringify(), JSON.parse(), toJSON() 정리 (0) | 2023.09.26 |
| Array 객체의 여러 함수들 (0) | 2023.09.26 |
| 자바스크립트 기초 훑기 - 2 (0) | 2023.07.21 |
