element 접근 방법

mangojang·2023년 2월 19일
0

✍️ DOM 접근의 기본에 대해 정리해 보았다. 항상 쓰던 것만 썼어서, 정리하면서 처음 보는 것도 있었다. (살짝 반성한다.🙇) 기초를 차근차근 다진다는 마음으로 정리해 보았다.

1. DOM 탐색 프로퍼티

document

  • document.documentElement = <html>
  • document.body = <body>
  • document.body = <body>
  • document.head = <head>

노드 이동

  • 좌 : 해당 특성의 모든 노드를 탐색 하고자 할 때, (텍스트 노드, 요소 노드, 주석 노드 포함)
  • 우: 해당 특성의 요소 노드만 탐색 하고자 할 때
특성모든 노드 참조요소 노드만 참조
자식 노드childNodeschildren
첫 번째 자식 노드firstChildfirstElementChild
마지막 번째 자식 노드lastChildlastElementChild
다음 형제 노드nextSiblingnextElementSibling
이전 형제 노드previousSiblingpreviosElementSibling
부모 노드parentNodeparentElement
  • childNodes - children
    • 읽기 전용

    • iterator 이므로 for…of문 사용 가능

    • 유사 배열이므로 array 메서드는 사용 못함. but, Array.from 을 사용하면 가능

      elem.childNodes[i]
  • hasChildNodes
    • 자식 노드가 있는지 확인 - true/false 반환

      elem.hasChildNodes

table

table

  • table.rows = <tr>
  • table.caption = <caption>
  • table.tHead = <thead>
  • table.tFoot = <tfoot>
  • table.tBodies = <tbody>

tr

  • tr.cells : tr 안의 모든 td, th 반환
  • tr.sectionRowIndex : tr이 thead, tbody, tfoot 안쪽에서 몇 번째 줄에 위치하는지 인덱스 반환
  • tr.rowIndex : table내에서 tr이 몇 번째 줄인지 인덱스 반환

th, td

  • th.cellIndex : th가 속한 tr에서 몇 번째 셀에 속하는지 인덱스 반환
  • td.cellIndex : td가 속한 tr에서 몇 번째 셀에 속하는지 인덱스 반환

2. DOM 탐색 메서드

document.getElementById

document.getElementById(id)

  • id에 대응 하는 요소를 반환
  • id 속성을 타겟으로 접근.
<div id="box">
  <div id="box-content">Element</div>
</div>
let box = document.getElementById('box');
box.style.background='yellow';
  • id 속성 값을 그대로(=전역변수) 타겟으로 하여 접근 가능.
    • id 명에 하이픈(’-’)이 있으면 window[’id명’] 으로 접근.
box.style.background='yellow';
window['box-content'].style.background='green';

querySelectorAll

elem.querySelectorAll(css)

  • elem의 자식 요소 중 css 선택자에 대응 하는 모든 요소들을 뱐환.
  • css 선택자를 사용하여 타킷 설정.
  • :hover, :active 같은 가상 클래스도 사용 가능.
<ul>
  <li>한놈</li>
  <li>두시기</li>
	<li>석삼</li>
	<li>너구리</li>
</ul>
let elements = document.querySelectorAll('ul > li');
for (let elem of elements) {
  alert(elem.innerHTML); // "한놈", "두시기", "석삼", "너구리"
}

querySelector

elem.querySelector(css)

  • elem의 자식 요소 중 css 선택자에 대응 하는 첫번째 요소를 뱐환.
  • css 선택자를 사용하여 타킷 설정.
let element = document.querySelector('ul > li');
alert(element.innerHTML); //'한놈'

closest

elem.closest(css)

  • elem 자기 자신을 포함하여 css 선택자와 일치하는 가장 가까운 조상 요소를 반환.
<div class="contents">
  <ul class="book">
    <li class="chapter">1장</li>
    <li class="chapter">2장</li>
  </ul>
</div>
let chapter = document.querySelector('.chapter'); // LI

alert(chapter.closest('.book')); // UL
alert(chapter.closest('.contents')); // DIV

etc

matches

elem.matches(css)

  • elem이 css 선택자와 일치하는지 여부 반환 (true / false)
  • 요소가 담겨있는 배열 등을 순회하여 원하는 요소만 걸러내고자 할 때 사용.
<ul id="birds">
  <li>Orange-winged parrot</li>
  <li class="endangered">Philippine eagle</li>
  <li>Great white pelican</li>
</ul>
const birds = document.querySelectorAll('li');

for (const bird of birds) {
  if (bird.matches('.endangered')) {
    console.log(`The ${bird.textContent} is endangered!`);
		// The Philippine eagle is endangered!
  }
}

contains

elemA.contains(elemB)

  • elemB가 elemA와 같거나, 속할는지 여부를 반환. (true / false)
  • 부모 자식 관계 여부를 확인 할 때 사용.
<div id="myDIV">
	<p>I am a p element inside "myDIV", and I have a <span id="mySPAN"><b>span</b></span> element inside of me.</p>
</div>
const span = document.getElementById("mySPAN");
let answer = document.getElementById("myDIV").contains(span);
console.log(answer); // true

참고 문헌

profile
한 걸음 한 걸음 계속 걷는 자가 일류다

0개의 댓글