js_DOM_01_접근

참고 :

• 영상자료 :
  https://www.youtube.com/watch?v=uK6uExrg7Ww&list=RDCMUCxft4RZ8lrK_BdPNz8NOP7Q&start_radio=1&rv=uK6uExrg7Ww&t=2
• WEB API docs :
  https://developer.mozilla.org/en-US/docs/Web/API/Node

html 자료구조

▶Node

• 위 : 부모 node
• 아래 : 자식 node

▶DOM (Document Object Model)

• html 접근 방식

  const docEl = document.documentElement;
  const docBody = document.body;
  const docHeadOpacity = document.head.style.opacity = '0';

• css 접근 방식

  • getElementById / getElementByTagName (Type : HTMLCollection)

    const el = document.getElementById('first');
    
    const pList = document.getElementByTagName('p');
    
    for (p of pList){
    	p.style.opacity = String(Math.random());
    };

  • querySelector / querySelectorAll (Type : nodeList)

    const $first = document.querySelector('#first')
    const linkList = document.querySelectorAll('.link');
    const pList_2n = querySelectorAll('p:nth-of-type(2n)'); 
    for ( i of pList_2n){
    	p.style.backgroundColor = '#000';
     	p.style.color = '#fff';
    }

  • domList의 경우 iterable한 속성을 가진 객체
    즉, array가 아니다.

    	// 접근 가능
    	pList_2n[1]; 
    	pList_2n.length; 
    
    	// 접근 불가
    	pList_2n.push(); // error 발생
    	pList_2n.pop(); // 적용 안됨