- 요소 노드에 접근하기
- 요소 노드를 추가하기
- 요소 노드를 삭제/이동하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS with Codeit</title>
</head>
<body>
<div id="content">
<h2 id="title-1">Cat-1</h1>
<ul id="list-1">
<li>Ragdoll</li>
<li>British Shorthair</li>
<li>Scottish Fold</li>
<li>Bengal</li>
<li>Siamese</li>
<li>Maine Coon</li>
<li>American Shorthair</li>
<li>Russian Blue</li>
</ul>
<h2 id="title-2">Cat-2</h1>
<ul id="list-2">
<li>Sphynx</li>
<li>Munchkin</li>
<li>Persian</li>
<li>Norwegian Forset</li>
<li>Turkish Angora</li>
<li>Bombay</li>
<li>Selkirk Rex</li>
<li>Munchkin</li>
</ul>
</div>
<script src="index.js"></script>
</body>
</html>
const myTag = document.querySelector(#list-1)
myTag의 부모/자식/형제 요소 노드(Element node) 접근하기
//형제 요소 노드
console.log(myTag.previousElementSibling);
console.log(myTag.nextElementSibling);
//부모 요소 노드
console.log(myTag.parentElement);
//자식 요소 노드
console.log(myTag.children[1]);
console.log(myTag.firstElementChild);
console.log(myTag.lastElementChild);
대상 노드가 없으면 null 반환
요소 노드가 아닌 다른 노드로 이동하고 싶을 때 사용하는 프로퍼티
node.childNodes -> NodeList 로 출력
node.firstChild
node.lastChild
node.parentNode
node.previousNode
node.previousSibling
node.nextSibling
예상치 못한 텍스트 노드가 선택되어 의도치않은 결과를 만들 수 있기때문에 잘 사용하지 않는다.
(줄바꿈, 띄어쓰기 등도 텍스트 노드에 포함이 됨)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS with Codeit</title>
</head>
<body>
<div id="content">
<h2 id="title-1">Cat-1</h1>
<ul id="list-1">
<li>Ragdoll</li>
<li>British Shorthair</li>
<li>Scottish Fold</li>
<li>Bengal</li>
<li>Siamese</li>
<li>Maine Coon</li>
<li>American Shorthair</li>
<li>Russian Blue</li>
</ul>
<h2 id="title-2">Cat-2</h1>
<ul id="list-2">
<li>Sphynx</li>
<li>Munchkin</li>
<li>Persian</li>
<li>Norwegian Forset</li>
<li>Turkish Angora</li>
<li>Bombay</li>
<li>Selkirk Rex</li>
<li>Munchkin</li>
</ul>
</div>
<script src="index.js"></script>
</body>
</html>
const myTag = document.querySelector('#list-1');
console.log(myTag.innerHTML);
요소 안에 있는 html코드를 문자열로 리턴한다 (태그와 태그 사이의 줄바꿈, 들여쓰기 모두 포함)
<li>Ragdoll</li>
<li>British Shorthair</li>
<li>Scottish Fold</li>
<li>Bengal</li>
<li>Siamese</li>
<li>Maine Coon</li>
<li>American Shorthair</li>
<li>Russian Blue</li>
-> 요소 안의 html 코드를 수정할 때 활용 가능
myag.innerHTML = '<li>Exotic</li>'
-> 요소 안의 내용을 바꿔버림
myag.innerHTML += '<li>Exotic</li>'
-> 덧셈할당 연산자로 맨 끝에 더해줄 수 있음
console.log(myTag.outerHTML);
해당 요소를 포함한 전체 html 코드가 출력 됨
<ul id="list-1">
<li>Ragdoll</li>
<li>British Shorthair</li>
<li>Scottish Fold</li>
<li>Bengal</li>
<li>Siamese</li>
<li>Maine Coon</li>
<li>American Shorthair</li>
<li>Russian Blue</li>
</ul>
자기 자신을 포함한 코드를 가리키므로
내용 수정이 아니라 아예 그 자체 코드가 교체될 수 있음
myTag.outerHTML = '<ul id="new-list"><li>Exotic</li></ul> ;
list-1 요소가 -> new-list 요소로 바꿈
console.log(myTag. textcontent );
요소 안에 있는 내용 중 html 코드를 제외한 내용만 가져옴
Ragdoll
British Shorthair
Scottish Fold
Bengal
Siamese
Maine Coon
American Shorthair
Russian Blue
myTag.textcontent = 'new text!' ;
요소 내부의 값을 완전히 교체함 (innerHTML과 동일)
특수문자 <li> </li> 도 문자열로 그대로 출력함
요소 노드 추가하기
innerHTML, outerHTML 을 사용하면 내용을 덮어쓰기 때문에 자기 자신을 반복해서 적어주어야 하고
특히 outerHTML 은 자기 자신을 DOM 트리로부터 제거하고 & 새로운 노드를 만들어 대체하게 된다
-> 태그를 다시 찾아서 변수에 할당해주어야 함
1. 새로운 요소 노드를 생성해서 2. 꾸며주고(= 내용을 넣는다) 3. 원하는 위치에 생성하기
1. const first = document.createElement('태그이름'); <- li, h1~6, p등등
2. first.textContent = '내용'; (또는 inner HTML를 사용해서 코드를 함께 작성할 수 있다)
3. tomorrow.prepend(first); 또는 .append(first);
<- 메소드를 호출한 노드의 첫번째 / 마지막 자식 노드로 파라미터로 전달한 값을 추가할 수 있다
.before 또는 .after > 형제 노드로 추가
파라미터로 변수 뿐 아니라 문자열을 받아 텍스트 노드로 추가 할 수 있음
여러개 파라미터를 넣으면 넣은 순서대로 추가됨 (prepend, before의 경우에도 넣은 순서 그대로 추가됨)
const toDoList = document.querySelector('#to-do-list');
function addNewTodo(text) {
// 여기에 코드를 작성하세요
const li = document.createElement('li');
li.textContent = text;
toDoList.append(li);
}
// 테스트 코드
addNewTodo('자바스크립트 공부하기');
addNewTodo('고양이 화장실 청소하기');
addNewTodo('고양이 장난감 쇼핑하기');
태그를 만든다 document.createElement('태그이름') -> 변수li에 할당한다
태그의 내용을 넣는다 li.textContent = 함수 파라미터로 받은 text ;
원하는 위치 태그에 접근한 변수에 추가한다
요소 노드 삭제/이동하기
tomorrow.remove(); tomorrow 노드가 삭제됨
today.children[2].remove(); today의 2번 인덱스 (3번째) 자식 노드가 삭제됨
today.append(tomorrow.children[1]); tomorrow 마지막 요소를 today의 마지막으로 이동
tomorrow.children[1].after(today.children[1]); 중간으로 옮길때는 자식 노드 의 형제 노드로 삽입하기
tomorrow.children[2].before(today.children[1]);
tomorrow.lastElementChild.before(today.children[1]);
'개발 공부 일지 > JavaScript' 카테고리의 다른 글
자바스크립트 - 스타일 다루기 (0) | 2024.07.16 |
---|---|
자바스크립트 - HTML 속성 다루기 (0) | 2024.07.16 |
자바스크립트 - 문서 객체 모델 (DOM) (1) | 2024.07.16 |
자바스크립트 - window (0) | 2024.07.15 |
자바스크립트 - 이벤트 (0) | 2024.07.15 |