JavaScript - DOM 접근하기

요소노드 생성/삭제/이동, 자식 및 부모 요드로의 접근에 대해 알아보자!

 

1. 노드 여행하기

• 다양한 방식으로 자식 노드, 부모 노드, 형제 노드 등에 접근할 수 있다.

const myTag = document.querySelector('.content');

• myTag라는 변수에 content 클래스 명을 가진 요소를 할당하고 예시를 보자

 

1.1 자식 요소 노드 접근

myTag.children // 자식 요소에 접근
myTag.children[1] // 두 번째 자식 요소에 접근
myTag.firstElementChild // 첫 번째 자식 요소에 접근
myTag.lastElementChild // 마지막 자식 요소에 접근

 

1.2 부모 요소 노드 접근

myTag.parentElement // 부모 요소에 접근

 

1.3 형제 요소 노드 접근

myTag.previousElementSibling // 이전 형제 요소에 접근
myTag.nextElementSibling // 다음 형제 요소에 접근

* sibling는 형제자매의 뜻을 지니고 있다.

 

2. 요소 노드 주요 property

2.1 innerHTML

• innerHTML은 태그를 포함한 모든 것을 담고 있는데 주로 수정할 때 사용되는 프로퍼티이다.
• innerHTML을 사용할 경우 내부의 값을 새로운 값으로 교체하기 때문에 주의하고 사용해야 한다!

myTag.innerHTML += '<li>Hello!</li>'

• 새로운 값으로 교체하기 때문에 += 연산자를 통해서 새로운 값을 추가해 줄 수 있는 방법이 있다.

 

2.2 outerHTML

• 해당 요소를 포함한 전체 HTML 코드를 문자열로 리턴해준다. innerHTML과 마찬가지로 요소 자체가 교체되는 위험이 존재하기 때문에 주의하여 사용해야 한다.

 

2.3 textContent

• innerHTML과 유사하지만 HTML코드를 제외한 문자열 즉 텍스트만 리턴해준다. 텍스트만 삽입하고 싶을 경우 사용해줘라!

 

3. 요소 노드 만들기 'createElement'

const first = document.createElement('li');
first.textContent = '요소생성';

• createElement를 통하여 요소를 생성할 수 있다. 위의 예시에서 li태그를 생성하였다. 
• textContent를 사용하여 방금 만들었던 li태그에 '요소생성'이라는 텍스트를 넣었다.
• 이렇게 만들고 어딘가 넣어줘야겠죠?

 

3.1 요소 추가 prepend, append, after, before

myTag.prepend(first) // myTag에 첫 번째 자식 요소로 추가
myTag.append(first) // myTag에 마지막 자식 요소로 추가

• prepand와 append는 부모태그를 이용하여 해당 요소를 자식 요소로 추가하는 방법이다.
• before과 after는 호출한 메소드의 앞/뒤에 형제 노드로 추가하는 방법이다.

 

3.2 요소 삭제 remove

myTag.remove() // myTag의 모든 내부요소들이 삭제된다.
myTag.children[2].remove() // myTag의 인덱스 2번째인 자식 요소가 삭제된다.

* 요소를 삭제할 경우 delete가 아닌 remove를 사용한다!

 

3.3 요소 이동

• 요소를 추가하는 방법을 응용하여 이동하는 방법도 알아보자.

myTag2.append(myTag.children[1])

• appned 프로퍼티를 사용하여 myTag의 인덱스 첫 번째 자식 요소를 myTag의 첫 번째 자식 요소로 이동한 예시이다.

 

myTag.children[1].after(myTag2.children[1])

• after 프로퍼티를 사용하여 myTag 인덱스 1번 자식 요소를 myTag2 인덱스 2번 자식요소 다음으로 위치를 이동시킨 예시이다.