반응형
요소 찾기
- document.getElementById("아이디"): 요소 ID로 요소 찾기
- document.getElementByTagName("태그 이름"): 태그 이름으로 요소 찾기
- document.getElementByClassName("클래스 이름"): 클래스 이름으로 요소 찾기
- document.querySelectorAll("선택자"): CSS 선택자 전부 찾기
- document.querySelector("선택자"): CSS 선택자 중 첫 번째 하나만 찾기
요소 조회
선택한 DOM 요소를 조회할 수 있는 속성으로 두 가지가 있다.
- textContent - 선택한 요소에서 HTML 요소를 제거한 순수한 텍스트 데이터의 값
- innerHTML - 선택한 요소의 HTML 태그를 그대로 제공하여 보안에 취약(사용자로부터 전달받은 콘텐츠를 추가할 때는 사용하지 않는 것이 좋음)
const content = document.getElementsByTagName('p')[0];
content.textContent; // Simple HTML Text
content.innerHTML; // Simple <b>HTML</b> Text
요소 수정
선택한 요소를 수정할 때는 새로운 값을 조회한 그대로 할당하면 된다.
content.textContent = "Modified HTML file";
content.innerHTML = "Modified <i>HTML</i> file";
요소 생성 및 추가
createElement를 사용하여 새로운 요소를 만든다.
// 노드 생성
const p1 = document.createElement('p');
const p2 = document.createElement('p');
// 노드에 새로운 컨텐츠를 대입
p1.textContent = "foo";
p2.textContent = "bar";
이렇게 만들어진 요소는 메모리에만 존재한다. 메소드를 생성하여 DOM에 추가해야 한다.
// 요소를 추가할 부모 요소
const parent = document.getElementById("parent");
// 요소를 부모 요소의 자식 요소로 추가
// 이미 요소가 존재할 경우 마지막 자식 요소로 추가됨
parent.appendChild(p2);
// 부모 요소의 첫 번째 자식 선택
const firstChild = parent.childNodes[0];
// 삽입할 자식 요소를 두 번째 파라미터로 선택한 자식 요소의 앞에 삽입
// parent.insertBefore(삽입할 자식 요소, 삽입할 위치)
parent.insertBefore(p1, firstChild);
createTextNode를 사용하여 텍스트 노드를 추가할 수도 있다
// ul 태그 아래에 새로운 li 요소를 생성하기
let textToAdd = document.createTextNode("추가할 텍스트");
let liToAdd = document.createElement("li");
listToAdd.appendChild(textToAdd);
let ulContainer = document.getElementsByTagName("ul")[0];
ulContainer.appendChild(listToAdd);
요소 삭제
// ul 태그 아래에 존재하는 두 번째 li 요소를 삭제
let itemToRemove = document.getElementsByTagName("li")[1];
let ulContainer = document.getElementsByTagName("ul")[0];
ulContainer.removeChild(itemToRemove);
요소 교체
Node.replaceChild() 메소드는 특정 부모 노드의 한 자식 노드를 다른 노드로 교체한다.
// <div>
// <span id="childSpan">foo bar</span>
// </div>
// 텅빈 요소 노드를 하나 생성 (ID도, 속성도, 컨텐츠도 없음)
let sp1 = document.createElement("span");
// 'newSpan'이란 id 속성을 부여
sp1.id = "newSpan";
// 새로운 요소를 위한 컨텐츠를 생성
let sp1_content = document.createTextNode("컨텐츠 생성");
// 컨텐츠를 생성한 요소에 붙임
sp1.appendChild(sp1_content);
// DOM에 존재하던, 교체돼야 할 노드를 찾기
let sp2 = document.getElementById("childSpan");
let parentDiv = sp2.parentNode;
// 이미 존재하던 sp2 노드를 새로운 span 요소인 sp1으로 교체
parentDiv.replaceChild(sp1, sp2);
// 결과:
// <div>
// <span id="newSpan">new replacement span element.</span>
// </div>
반응형
'웹_프론트엔드 > 로드맵 챌린지' 카테고리의 다른 글
JavaScript - 모듈러 자바스크립트와 ES6+ (0) | 2022.01.05 |
---|---|
JavaScript - Fetch API / Ajax (XHR) (0) | 2022.01.03 |
JavaScript - 구문과 기본 문법 (0) | 2021.12.29 |
CSS - 반응형 디자인과 미디어쿼리 (0) | 2021.12.28 |
CSS - 레이아웃 만들기 (0) | 2021.12.27 |