1. 태그 선택하기
| 메소드 | 의미 | 결과 |
|---|---|---|
| document.getElementById('id') | HTML id속성으로 태그 선택하기 | id에 해당하는 태그 하나 |
| document.getElementsByClassName('class') | HTML class속성으로 태그 선택하기 | class에 해당하는 태그 모음(HTMLCollection) |
| document.getElementsByTagName('tag') | HTML 태그 이름으로 태그 선택하기 | tag에 해당하는 태그 모음(HTMLCollection) |
| document.querySelector('css') | css 선택자로 태그 선택하기 | css 선택자에 해당하는 태그 중 가장 첫번째 태그 하나 |
| document.querySelectorAll('css') | css 선택자로 태그 선택하기 | css 선택자에 해당하는 태그 모음(NodeList) |
2. [요소 노드] 이동 프로퍼티
| 프로퍼티 | 유형 | 결과 |
|---|---|---|
| element.children | 자식 요소 노드 | element의 자식 요소 모음(HTMLCollection) |
| element.firstElementChild | 자식 요소 노드 | element의 첫 번째 자식 요소 하나 |
| element.lastElementChild | 자식 요소 노드 | element의 마지막 자식 요소 하나 |
| element.parentElement | 부모 요소 노드 | element의 부모 요소 하나 |
| element.previousElementSibling | 형제 요소 노드 | element의 이전(previous) 혹은 좌측(left)에 있는 요소 하나 |
| element.nextElementSibling | 형제 요소 노드 | element의 다음(next) 혹은 우측(right)에 있는 요소 하나 |
그럼 텍스트 노드 같은 요소 노드가 아닌 노드들엔 어떻게 접근해?
3. [모든 노드] 이동 프로퍼티
| 프로퍼티 | 유형 | 결과 |
|---|---|---|
| node.childNodes | 자식 노드 | node의 자식 노드 모음(NodeList) |
| node.firstChild | 자식 노드 | node의 첫 번째 자식 노드 하나 |
| node.lastChild | 자식 노드 | node의 마지막 자식 노드 하나 |
| node.parentNode | 부모 노드 | node의 부모 요소 하나 |
| node.previousSibling | 형제 노드 | node의 이전(previous) 혹은 좌측(left)에 있는 노드 하나 |
| node.nextSibling | 형제 노드 | node의 다음(next) 혹은 우측(right)에 있는 노드 하나 |
사실 모든 노드가 공통적으로 갖고있는 이 프로퍼티들은 특별한 경우를 제외하면 자주 사용하진 않는다.
why? 링크를 참고하자. DOM Tree
4. innerHTML, outerHTML, textContent
4-1. element.innerHTML
요소 노드 내부의 HTML 코드를 문자열로 리턴해 준다. (내부에 있는 줄 바꿈이나 들여쓰기 모두 포함)
const myTag = document.querySelector('#list-1');
// innerHTML
console.log(myTag.innerHTML);요소 안의 정보를 확인할 수도 있지만, 내부의 HTML 자체를 수정할 때 좀 더 자주 활용된다. (내부에 있던 값을 완전히 새로운 값으로 교체하기 때문에 주의!)
const myTag = document.querySelector('#list-1');
// innerHTML
console.log(myTag.innerHTML);
myTag.innerHTML = '<li>Exotic</li>';
console.log(myTag.innerHTML);4-2. element.outerHTML
요소 노드 자체의 전체적인 HTML 코드를 문자열로 리턴해준다. (내부에 있는 줄 바꿈이나 들여쓰기 모두 포함.)
const myTag = document.querySelector('#list-1');
// outerHTML
console.log(myTag.outerHTML);
outerHTML은 새로운 값을 할당할 경우 요소 자체가 교체되어 버리기 때문에 주의해야 한다!!
4-3. element.textContent
요소 안의 내용들 중에서 HTML 태그 부분은 제외하고 텍스트만 가져온다. (*내부에 있는 줄 바꿈이나 들여쓰기 모두 포함)
const myTag = document.querySelector('#list-1');
// textContext
console.log(myTag.textContent);
- 새로운 값을 할당하면
innerHTML과 마찬가지로 내부의 값을 완전히 새로운 값으로 교체 한다.
const myTag = document.querySelector('#list-1');
// textContext
console.log(myTag.textContent);
myTag.textContent = 'new text!';
- 하지만
textContent는 말그대로 텍스트만 다루기 때문에, 특수문자도 그냥 텍스트로 처리한다!
const myTag = document.querySelector('#list-1');
// textContext
console.log(myTag.textContent);
myTag.textContent = '<li>new text!</li>';일반적으로 우리가 다루고자 하는 대상은 태그이다!
자바스크립트로 웹 문서를 다룰 때는 아무래도 텍스트 노드보다는 요소 노드를 다룰 경우가 더 많을 것이다. 만약 의도하는 대상이 HTML 태그라면 요소 노드에 대한 이동 프로퍼티를 활용하는 것이 훨씬 더 안전할 것이다.
그래도 상황에 따라서는 요소 노드가 아닌 노드들을 이동시켜야할 수도 있으니 모든 노드가 공통으로 갖고 있는 속성들도 잘 기억해두자.
5. 요소 노드 다루기
| 프로퍼티 | 내용 |
|---|---|
| document.createElement('태그이름') | 요소 노드 만들기 |
| element.textContent, element.innerHTML, ... | 요소 노드 꾸미기 |
| lement.prepend, element.append, element.after, element.before | 요소 노드 추가 혹은 이동하기 |
| element.remove() | 요소 노드 삭제하기 |
6. HTML 속성 다루기
| 프로퍼티 | 내용 |
|---|---|
| element.getAttribute('속성') | 속성에 접근하기 |
| element.setAttribute('속성', '값') | 속성 추가(수정)하기 |
| element.removeAttribute('속성') | 속성 제거하기 |
7. 스타일 다루기
| 프로퍼티 | 내용 |
|---|---|
| element.style.styleName = 'value'; | style 프로퍼티 활용하기 |
| element.className, element.classList | class 변경을 통해 간접적으로 스타일 적용하기 |
7-1. classList의 유용한 메소드
| 메소드 | 내용 | 참고사항 |
|---|---|---|
| classList.add | 클래스 추가하기 | 여러 개의 값을 전달하면 여러 클래스 추가 가능 |
| classList.remove | 클래스 삭제하기 | 여러 개의 값을 전달하면 여러 클래스 삭제 가능 |
| classList.toggle | 클래스 없으면 추가, 있으면 삭제하기 | 하나의 값만 적용 가능하고, 두 번째 파라미터로 추가 또는 삭제 기능을 강제할 수 있음 |
