DOM 접근 메서드
요소들을 이용하려면, 아래의 메서드를 통해 특정 태그에 접근해야합니다.
| 메서드 | 설명 |
| document.getElementById(id); | 주어진 ID와 일치하는 요소 하나를 반환 |
| document.getElementsByClassName(className) | 주어진 Class명을 가진 요소들을 HTMLCollection에 담아 반환 |
| document.getElementsByTagName(tagName) | 주어진 Tag명을 가진 요소들을 HTMLCollection에 담아 반환 |
| document.querySelector(selectors) | 주어진 선택자를 만족하는 요소 하나를 반환 |
| document.querySelectorAll(selectors) | 주어진 선택자를 만족하는 모든 요소를 NodeList에 담아 반환 |
## HTML 예시
|
1
2
3
4
5
6
7
8
|
<body>
<div class="foo">One</div>
<div class="foo">Two</div>
<div id="bar">Thr</div>
<ul>
<li class="yee"></li>
</ul>
</body>
|
cs |
## JavaScript
|
1
2
3
4
5
6
|
let get1 = document.getElementById("bar"); // <div id="bar">Thr</div>
let get2 = document.getElementsByClassName("foo"); // HTMLCollection(2) :: [div.foo, div.foo]
let get3 = document.getElementsByClassName("foo")[1]; // <div class="foo">Two</div>
let get4 = document.getElementsByTagName("li")[0]; // <li class="yee"></li>
let query1 = document.querySelector(".foo"); // <div class="foo">One</div>
let query2 = document.querySelectorAll(".foo"); // NodeList(2) :: [div.foo, div.foo]
|
cs |
노드 탐색 Traversing
접근한 요소를 통해 다른 요소에도 접근이 가능합니다.
|
1
2
3
4
5
6
7
8
|
let content = document.getElementById("content");
/* Property */
content.parentNode // 현재 요소노드의 부모 노드
content.previousSibling // 이전 형제 요소
content.nextSibling // 다음 형제 요소
content.firstChild // 현재 요소의 첫번째 자식 노드
content.lastChild // 현재 요소의 마지막 자식 노드
|
cs |
DOM 요소 조회와 수정
요소 조회
접근한 요소의 컨텐츠를 조회할 수 있는 3개의 프로퍼티가 있습니다.
| 값 | 성능 | |
| textContent | raw text | 좋음 |
| innerText | rendered text | 보통 |
| innerHTML | HTML parsed text | 나쁨(보안 취약) |
요소 수정
선택한 요소의 내용을 수정할 때는 요소조회 프로퍼티에 값을 대입하면 됩니다.
|
1
2
3
4
|
let content = document.getElementsById('foo');
/* 요소 수정 */
content.textContent = "Hello, World";
|
cs |
새 요소 생성
document.createElement() 메서드를 통해 요소를 만들 수 있습니다. 이렇게 만들어진 요소는 DOM에 추가하는 메서드를 사용해 추가하기 전까지는 DOM에 추가되지 않고 메모리에만 존재합니다.
|
1
2
3
4
5
6
7
|
/* 노드 생성 */
let li1 = document.createElement('li');
let li2 = document.createElement('li');
/* 요소 대입 :: 메모리에만 존재 */
li1.textContent = "Hello, World";
li2.textContent = "I Love Coding";
|
cs |
만들어진 요소를 DOM에 추가하기
메모리에 존재하는 요소를 appendChild()와 insertBefore()메서드를 통해 DOM에 추가할 수 있습니다.
| 메서드 | 설명 |
| appendChild(element) | 요소를 부모 요소의 자식 요소로 추가합니다. 이미 요소가 존재할 경우 마지막 자식요소로 추가됩니다. |
| insertBefore(el, position) | 요소를 부모 요소의 자식 요소로 삽입합니다. 삽입할 위치를 선택할 수 있습니다. |
|
1
2
3
4
5
6
|
/* appendChild() */
let content = document.getElementById("content");
content.appendChild(p2);
/* insertBefore */
content.insertBefore(p1, content.childNodes[0]);
|
cs |
요소 삭제
removeChild() 메소드는 DOM에서 하위노드를 제거하고 제거된 노드를 반환합니다.
|
1
2
3
4
|
// ul 태그 아래에 존재하는 두번째 li 요소를 삭제하는 과정
let childContent = document.getElementsByTagName("li")[1];
let parentContent = document.getElementsByTagName("ul")[0];
parentContent.removeChild(childContent);
|
cs |
DOM 속성 조작
클래스 제어하기 - classList
| 메서드 | 설명 |
| element.classList.add("className") | 지정한 클래스 값 추가 |
| element.classList.remove("className") | 지정한 클래스 값 삭제 |
| element.classList.toggle("className", 조건) | 지정한 클래스 값 토글 (옵션: 조건) |
| element.classList.item(Index) | 인덱스를 이용해 클래스 값 반환 |
| element.classList.replace("oldName", "newClass") | 존재하는 클래스를 새 클래스로 교체 |
| element.classList.contains("className") | 지정한 클래스 값이 요소의 속성에 존재 확인 |
|
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
|
const div = document.createElement('div');
div.className = 'foo';
// <div class="foo"></div>
div.classList.remove("foo");
// <div class></div>
div.classList.add("bar");
// <div class="bar"></div>
div.classList.toggle("visible") // true
// <div class="bar visible"></div>
div.classList.item(1) // "visible"
div.classList.toggle("visible") // false
// <div class="bar"></div>
div.classList.toggle("visible", i < 10 );
// 조건에 부합할 경우 toggle
div.classList.replace("bar", "baz") //true
// <div class="baz"></div>
div.classList.contains("bar") //false
div.classList.contains("baz") //true
|
cs |
속성 Attribute 다루기
| 메서드 | 설명 |
| getAttribute() | Attribute 값 가져오기 |
| setAttribute() | Attribute 값 대입 |
| hasAttribute() | Atrribute 값 존재 여부 |
| removeAttribute() | Attribute 제거 |
| className | 클래스값을 가져오거나 변경 |
| id | 아이디값을 가져오거나 변경 |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
const element = document.createElement('div');
element.className = 'foo';
// <div class="foo"></div>
element.hasAttribute("class"); //true
element.setAttribute("id", "bar");
// <div class="foo" id="bar"></div>
element.removeAttribute("class");
// <div id="bar"></div>
element.className = "coding";
// <div id="bar" class="coding"></div>
element.id = "study";
// <div id="study" class="coding"></div>
|
cs |
'Web[웹] > 자바스크립트' 카테고리의 다른 글
| 전역객체 Window와 BOM, DOM의 정의 (0) | 2020.07.04 |
|---|---|
| 클로저(Closure) | 클로저의 유용한 활용 (0) | 2020.06.25 |
| 스코프 (Scope) | var과 let, const의 차이점 (0) | 2020.06.25 |
| Array 메서드 | #2-2 Immutable (불변성) 메서드 (0) | 2020.06.21 |
| Array 메서드 | #2-1 Immutable (불변성) 메서드 (0) | 2020.06.21 |
