[JS] 트리구조(tree)
0
🐾 트리구조(tree)
존재하는 태그를 조회, 수정
없는 태그를 만들거나 기존에 있는 태그를 삭제
1. 이 태그를 만들긴 할것인데 어떤 위치에 만들까?
html태그들은 tree 구조로 관리(포함관계가 있다)가 되고 있다
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <h1 id="a"> 안녕 <span> 하세 </span> 요 </h1> <div id="b"> <h2>반갑습니다</h2> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div> <button onclick="f()">클릭하시면 p태그가 div#b에 추가될것이다</button> <script> const f = ()=>{ let newP = document.createElement('p'); // console.log([newP]); newP.textContent = '새로운 p태그입니다.'; newP.classList.add('a'); let parent = document.querySelector('#b'); console.log([parent]); // parent.appendChild(newP); //해당 태그의 마지막 자식으로 // parent.prepend(newP); //해당 태그의 첫번째 자식으로 //(누구를, 어디앞에)순서를 지정할 수 있다. // parent.insertBefore(newP, parent.children[0]); parent.append('강수지'); parent.prepend('강수지'); } console.log([document]); let target = document.querySelector('#b'); console.log(target.childNodes); console.log(target.children); </script> </body> </html>
let target = div#b;
target.childNodes = [text, h2, text, ul, text];
target.children = [h2, ul];target.childNodes[1].textContent;
//출력값 반갑습니다 target.children.add('img');
//사용가능할까??
//이미지라는 문자열을 추가하라는뜻
//사용 불가능(타입이 문자열임, 객체가 아님)📒 존재하는 태그객체를
조회: document.querySelector() / document.getElementbyId ....()
함수들을 통해 태그를 가져오고, 그 태그 객체의 key값 속에 들어있는 value를사용
📒 존재하는 태그객체를
수정: 태그를 가져오고,
태그 객체의 key를 = 앞에 써서 속에 들어가는 value 를 다른 값으로 수정
📒
추가: 추가하고자하는 태그객체를 createElement() 통해 만든다
그 후 부모를 찾아와서 appendChild .... 등의 함수를 통해 적절한 위치에 추가
📒
삭제: 부모를 찾아서 removeChild 를 사용하여 자식 삭제
(텍스트인지, 태그객체인지에 따라 구분해서 사용)
2:22
나를위한 노트필기 📒🔎📝