childNodes.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 주석입니다. -->
<div id="header">맛있는 딸기</div>
<div>상단</div>
<div>본문
<ul>
<li>항목1</li>
<li>항목2</li>
</ul>
<!-- 텍스트 입력 box -->
<p><input type="text" id="input">
<button onclick="inputCheck()">딸기</button>
</p>
</div>
<div>하단</div>
<script>
// ⭐body의 자식노드 출력
// for(let i=0; i<document.body.childNodes.length; i++) {
// console.log(document.body.childNodes[i]);
// }
// ▼▼ 결과 ) 공백도 #text 노드로 생각함 , 필요없는 노드도 다 선택
// #text
// <!-- 주석입니다. -->
// #text
// <div>상단</div>
// #text
// <div>본문</div>
// #text
// <div>하단</div>
// #text
// <script></ script>
// for(let i=0; i<document.body.childNodes.length; i++) {
// console.log(document.body.children[i]);
// }
// ▼▼ 결과 ) 요소노드만 자식을 나타냄 ★
// <div>상단</div>
// <div>본문</div>
// <div>하단</div>
// <script></ script>
// ⭐자식노드 탐색 (자식노드, 자식요소노드, 노드타입, 노드네임)
console.log(document.body.firstChild); // #text
console.log(document.body.lastChild); // <script></ script>
console.log(document.body.firstElementChild); // <div>상단</div>
console.log(document.body.firstElementChild.nodeType); // 1 // 자식요소노드 中
console.log(document.body.firstElementChild.nodeName); // DIV
console.log(document.body.firstChild.nodeName); // #text // 자식노드 中
console.log(document.body.childNodes[0]); // #text
// 차이점
let lis = document.querySelectorAll('li');
let lis2 = document.getElementsByTagName('li');
console.log(lis); // NodeList(2) [li, li] // forEach 사용가능
console.log(lis2); // HTMLCollection(2) [li, li]
// 선택한 요소의 내용 조작
document.querySelector('#header').innerHTML = '<h1>🍓🍓</h1>'
// document.querySelector('#header').textContent = '<h1>🍓</h1>'
// header.innerHTML = '⭐⭐'; // ID선택자로 바로 접근
// header.hidden = true; // 🍓🍓 안보임, "display : none" 과 유사
function inputCheck() {
console.log(document.querySelector('input').value);
}
</script>
</body>
</html>
createElement.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<div id="wrap"></div>
<div id="star"></div>
<ol id="ol">
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<div id="insert">🧡insert DIV 입니다.</div>
<script>
// ⭐노드 생성하기 + 요소 추가
// (1)
// 변수에 담기
let nDiv = document.createElement('div');
nDiv.innerHTML = '<h1>🍓🍓🍓🍓🍓</h1>'
// 넣어주기
wrap.append(nDiv);
// (2)
star.innerHTML = '<div><h1>🍑🍑🍑🍑🍑</h1></div>'
// (3)
// ol.before('이전');
// ol.after('이후');
// ol.after('<p>🍑</p>'); // 안됨 ★★
// 태그 넣고싶으면 변수 만들어주기 ★
// ol, ul 안에는 무조건 li 넣기 ★
let nP = document.createElement('p');
let nLi = document.createElement('li');
let nLi2 = document.createElement('li');
nP.innerHTML = '🍒 이전';
nLi.innerHTML = '추가한 li 🍇';
nLi2.innerHTML = '추가한 li 🍇';
// 바깥에 추가 ★
ol.before(nP);
ol.after('🍒 이후');
// 안에 추가 ★
ol.append(nLi);
ol.prepend(nLi2);
// (4) 원하는 위치에 추가
insert.insertAdjacentHTML('beforebegin', '<p>💛beforebegin 입니다.</p>'); // 바로 앞
insert.insertAdjacentHTML('afterbegin', '<h4>💚afterbegin 입니다.</h4>'); // 첫번째 자식요소 앞
insert.insertAdjacentHTML('beforeend', '<h4>💙beforeend 입니다.</h4>'); // 마지막 자식요소 앞
insert.insertAdjacentHTML('afterend', '<p>💜afterend 입니다.</p>'); // 바로 다음
</script>
</body>
</html>
cloneNode.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="samplidiv">
<h2>신나는 금요일</h2>
</div>
<script>
// 복사한게 div2에 담기게
let div2 = document.querySelector('#samplidiv').cloneNode(true);
// 복사 내용, 수정
div2.querySelector('h2').innerHTML = '🍓 주말 🍓';
// (1)
// document.querySelector('#samplidiv').after(div2);
// (2)
document.querySelector('#samplidiv').insertAdjacentElement('beforeend', div2);
</script>
</body>
</html>
