DOM과접근법

✅ DOM (Document Object Modeal)

DOM 은 문서객체 모델로 HTMl의 각 요소들을 트리형태로 구성해준다. 개발자들은 JavaScript를 이용해서 이를 생성하거나 수정하거나 삭제할 수 있다. DOM을 그림으로 표현하면 아래 그림 처럼 트리형태가 된다. 하나의 객체를 '노드(node)'라고 한다. 위쪽을 부모노드 아래쪽을 자식노드라고 한다. document를 제외하고 최상단에 있는 HTML을 root node 라고 한다.
document.documentElement; == HTML

 

 

✅ DOM에 접근하기

모든 HTML 태그는 객체이다. 객체는 JavaScript로 접근하고 제어할 수 있다.

document.body.style 를 console에 쳤더니 body의 모든 스타일이 객체의 형태로 반환됨

document.body.style.opacity = '0' // body 태그 전체가 투명도가 0이 됨

 

📍접근메소드

// 해당하는 Id를 가진 요소에 접근하기
document.getElementById();  

// 해당하는 모든 요소에 접근하기
document.getElementsByTagName();

// 해당하는 클래스를 가진 모든 요소에 접근하기
documnet.getElementsClassName();

// css 선택자로 단일 요소에 접근하기
document.querySelector("selector");

// css 선택자로 여러 요소에 접근하기
document.querySelectorAll("selector");

해당 메서드로 반환된 값들은 array의 형태로 반환되는데 정확히 array가 아닌 유사배열객체(array-like objects)라고 불린다. 
유사 객체 배열은 배열처럼 보이지만 사실 key가 숫자이고 length 값을 가지고 있는 객체를 말한다.

<article id="container">
    <ul>
        <li>탕수육</li>
        <li class="item-second">유산슬</li>
        <li>짜장면</li>
    </ul>
</article>

<script>
	const item = cont.querySelectorAll('li');
    // NodeList(3) [li, li.item-second, li]
    
    console.log(item[0]) // "탕수육"
    console.log(item.length) // 3
</script>

0, 1, 2 = kdy

 

📍HTML Collection 과 NodeList 

HTMLCollection과 NodeList 는 모두 유사 배열 객체 형태로 안에 있는 데이터에 접근하기 위해서 배열처럼 원소의 인덱스로 접근이 가능하다는 점과 조건에 일치하는 모든 요소를 찾는다는 공통점이 있지만 차이점이 존재한다.

 

HTML Collection 

• getElementBy... 로 호출
• 객체에 포함되는 것은 DOM의 요소중 HTML 요소만 포함
• 동적으로 변경사항이 객체에 바로 반영

NodeList 

• querySelector.. 로 호출
• text, 주석등을 포함한 DOM의 모든 요소 객체에 포함
• 정적으로 한번 저장된 값이 변경되지 않음
• forEahch() 등의 메서드를 사용할 수 있음(HTML Collection은 비슷한 다른 기능 사용)

 

 

✅  부모,자식, 형제 노드 접근

document.documentElement; // html
document.documentElement.parentElement // null
document.documentElement.parentNode // #document

parentNode는 부모노드를 반환한다 위에서 html의 부모노드는 document 이다.(트리 그림 참고) 반면에 parentElement 는 부모노드중에 요소노드만 반환한다. 요소노드란 html 태그로 이루어진 노드를 말한다. 그러므로 위 코드에서 html보다 부모인 html 태그는 없으므로 null 을 반환한다.

//HTML
<ul id="color">
  <li id="red">red</li>
  <!--  red color  -->
  <li id="blue">blue</li>
  <li id="green">green</li>
</ul>


const li = document.querySelectorAll('li')
let ul = document.getElementById('color');
const blue = document.querySelector('#blue')


// 부모 요소노드 만
console.log(li.parentElement) // ul#color
// 부모 모든 노드 
console.log(li.parentNode) // ul#color
// 자식 요소노드 만
console.log(ul.children); // HTMLCollection(3) [li, li, li]
// 자식 모든 노드
console.log(ul.childNodes); // NodeList(9) [text, li, text, comment, text, li, text, li, text]
// 첫번째 자식 요소노드 만
console.log(ul.firstElementChild) // #text
// 첫번째 자식 모든 노드
console.log(ul.firstChild)// undefined
// 마지막 자식 요소노드 만
console.log(ul.lastElementChild) // #text
// 마지막 자식 모든 노드
console.log(ul.lastChild)/ /undefined
// 다음 형제 요소노드 만
console.log(blue.nextElementSibling) // <li id="green">green</li>
// 다음 형제 모든 노드
console.log(blue.previousSibling) // #text
// 이전 형제 요소
console.log(blue.previousElementSibling) // <li id="red">green</li>
// 이전 형제 모든 노드
console.log(blue.previousSibling) // #text

*NodeList 에서 text 는 공백을 나타냄(모든 요소의 노드를 반환하기 때문에 공백또한 노드로 취급함)

HTMLCollection은 요소 타입의 노드들만  Nodelist는 모든 타입들의 노드들을 반환 실무에서 많이 사용되는것은 요소 노드 접근이다.

 

✅  노드 생성, 추가, 복제, 삭제

text, Element 제어

📍.textContent: 

노드의 텍스트 콘텐츠를 표현합니다. 컨텐츠를 단순히 텍스트로만 다룹니다.

 

📍innerText:
요소의 렌더링된 텍스트 콘텐츠를 나타냅니다. (렌더링된에 주목하세요.innerText는 텍스트 내에 문법적으로 처리가 가능한 텍스트가 있으면 처리가 끝난 결과물을 텍스트로 전달합니다.)

 

📍innerHTML:
요소(element) 내에 포함된 HTML 마크업을 가져오거나 설정합니다. 즁요한 기능은 innerHTML로 값을 할당할 때, 마크업으로 변환할 수 있는 문자열이 있다면 마크업으로 만들어 보여준다는 것 입니다. 만약 그런 문자열이 없다면 그냥 문자열만 컨텐츠로 설정합니다.

* 단 이방법으로 태그를 생성하는건 비추천 새로운 태그를 추가할때마다 그 전 태그들도 다 입력을 해줘야 하기 때문에

 

// 관련 예제
// 인풋창에 입력된 값이 버튼을 누르면 p태그 안에 텍스트로 들어가게 해주세요

//html
	<p></p>
    <input type="text">
    <button>입력</button>
    
    
    
        const text = document.querySelector('p')
        const inp = document.querySelector('input')
        const btn = document.querySelector('button')


        // 버튼을 클릭해야만
        btn.addEventListener('click', function(){
            text.textContent= inp.value;
        })

        // 실시간으로 하려면
        inp.addEventListener('input', function(){
            text.textContent= inp.value;
        });

 

element 제어

📍document.creatElement( target ): target 요소를 생성합니다.

📍document.creatTextNode( target ): target 텍스트를 생성합니다.

📍element.appendChild( target ): target 요소를 element의 자식으로 위치합니다.

📍element.removeChild( target ): element의 target 자식 요소를 제거합니다.

📍element.append( target ): target 요소를 element의 자식으로 위치합니다. appendChild 와 다른점은 노드 뿐만 아니라 여러개의 노드를 한번에, 그리고 텍스트도 자식 노드로 포함시킬 수 있다는것 입니다.

📍target.remove(): target 요소를 제거합니다.

// 에제
// 버튼을 누르면 ul안에 다섯개의 li가 생성되고 li는 각각 삭제 버튼을 가지고 있어 삭제버튼을 누르면 해당 li가 삭제된다

//HTML
	<ul></ul>
    <button>생성!</button>
    
    
    const ul = document.querySelector('ul')
        const btn = document.querySelector('button')


        for(let i = 0; i < 5; i++){
            btn.addEventListener('click', function(){
                const li = document.createElement('li')
                const btnRemove = document.createElement('button')

                li.innerText='new!';
                btnRemove.innerText='삭제'
                ul.appendChild(li);
                li.appendChild(btnRemove)

                btnRemove.addEventListener('click', function(){
                    li.remove()
                })
            }