[JavaScript] 요소 노드 취득, DOM조작

seonjeong·2023년 1월 31일
JavaScript
0

JavaScript

목록 보기
3/8
post-thumbnail

💖 요소 노드 취득

🔥 id를 이용한 요소 노드 취득

인수로 전달한 id 값을 갖는 하나의 요소 노드를 탐색하여 반환

document.getElementById('id값');

예시

<!DOCTYPE html>
<html>
  <body>
  	<ul>
  		<li id="apple">Apple</li>
		<li id="banana">Banana</li>
		<li id="orange">Orange</li>
  	</ul>
	<script>
        // id값이 'banana'인 요소 노드를 탐색하여 반환  
    	let banana = document.getElementById('banana');      
    </script>
  </body>
</html>

🔥 태그 이름을 이용한 요소 노드 취득

document.getElementsByTagName('태그명');

예시

<!DOCTYPE html>
<html>
  <body>
  	<ul>
  		<li id="apple">Apple</li>
		<li id="banana">Banana</li>
		<li id="orange">Orange</li>
  	</ul>
	<script>
        // 태그 이름이 li인 요소 노드를 모두 탐색하여 반환  
        // 탐색된 요소 노드들은 HTMLCollection 객체에 담겨 반환된다 
        // HTMLCollection 객체 -> 유사 배열 객체  
    	let li = document.getElementsByTagName('li');
		
		console.log(li);				// HTMLCollection(3)...
		console.log(li[0].innerHTML);	// Apple
    </script>
  </body>
</html>

🔥 class를 이용한 요소 노드 취득

document.getElementsByClassName('class값');

예시

<!DOCTYPE html>
<html>
  <body>
  	<ul>
  		<li class="fruit apple">Apple</li>
		<li class="fruit banana">Banana</li>
		<li class="fruit orange">Orange</li>
  	</ul>
	<div class="banana">Banana</div>
	<script>
        // class 값이 'fruit'인 요소 노드를 모두 탐색하여 반환  
        // 탐색된 요소 노드들은 HTMLCollection 객체에 담겨 반환된다 
    	let fruit = document.getElementsByClassName('fruit');
		let bananaFromDocument = document.getElementsByClassName('banana');
		let bananaFromFruit = fruit.getElementsByClassName('banana');

		console.log(bananaFromDocument);	
		// HTMLCollection(2) [li.banana, div.banana]

		console.log(bananaFromFruit);	
		// HTMLCollection [li.banana]
    </script>
  </body>
</html>

🔥 CSS 선택자를 이용한 요소 노드 취득

document.querySelector('');
document.querySelectorAll('');	
// 여러 개의 요소 노드 객체를 갖는 NodeList 객체 반환 -> 유사 배열 객체

예시

<!DOCTYPE html>
<html>
  <body>
  	<ul>
  		<li class="apple">Apple</li>
		<li class="banana">Banana</li>
		<li class="orange">Orange</li>
  	</ul>
	<script>
        // class 어트리뷰트 값이 'banana'인 첫 번째 요소 노드를 탐색하여 반환  
        let banana = document.querySelector('.banana');

		// ul요소의 자식 요소인 li요소를 모두 탐색하여 반환
		let fruit = document.querySelectorAll('ul > li');

		console.log(fruit);	
		// NodeList(3) [li.apple, li.banana, li.orange]
    </script>
  </body>
</html>

🔥 특정 요소 노드를 취득할 수 있는지 확인

인수로 전달한 CSS 선택자를 통해 특정 요소 노드를 취득할 수 있는지 확인

element.matches('');

예시

<!DOCTYPE html>
<html>
  <body>
  	<ul id="fruit">
  		<li class="apple">Apple</li>
		<li class="banana">Banana</li>
		<li class="orange">Orange</li>
  	</ul>
	<script>
        let apple = document.querySelector('.apple');

		// apple 노드는 '#fruit > li.apple'로 취득할 수 있다
		console.log(apple.matches('#fruit > li.apple'));	// true
		
		// apple 노드는 '#fruit > li.banana'로 취득할 수 없다
		console.log(apple.matches('#fruit > li.banana'));	// false
    </script>
  </body>
</html>

💖 DOM 조작

: 새로운 노드를 생성하여 DOM에 추가하거나 기존 노드를 삭제 또는 교체하는 것

🔥 innerHTML

요소 노드의 HTML 마크업을 취득하거나 변경

<!DOCTYPE html>
<html>
  <body>
  	<div id="foo">Hello <span>World!</span></div>
  </body>    
  <script>
  	// #foo 요소의 콘텐츠 영역 내의 HTML 마크업을 문자열로 취득한다.
    console.log(document.getElementById('foo').innerHTML);
	// "Hello <span>World!</span>"
	
	// HTML 마크업이 파싱되어 요소 노드의 자식 노드로 DOM에 반영된다.
	let foo = document.getElementById('foo');
	foo.innerHTML = 'Hi <span>there!</span>';

	// 노드 삭제
	foo.innerHTML = '';
  </script>
</html>

*innerText
: Element의 속성으로 element 내에서 사용자에게 보여지는 text값들을 가져오거나 설정할 수 있다

🔥 노드 생성과 추가

  • 요소 노드 생성
    : createElement(tagname)

  • 텍스트 노드 생성
    : createTextNode(text)

  • 텍스트 노드를 요소 노드의 자식 노드로 추가 , 요소 노드를 DOM에 추가
    : appendChild(childNode)

// 1. 요소 노드 생성
const $li = document.createElement('li');
// 생성된 요소 노드는 아무런 자식 노드가 없다
console.log(li.childNodes);	// NodeList []

// 2. 텍스트 노드 생성
const textNode = document.createTextNode('banana');

// 3. 텍스트 노드를 li요소 노드의 자식 노드로 추가
$li.appendChild(textNode);

// 4. $li요소 노드를 #fruits 요소 노드의 마지막 자식 노드로 추가
$fruits.appendChild($li);
  • 복수의 노드 생성과 추가
    : 여러개의 요소 노드를 DOM에 추가하는 경우 DocumentFragment 노드를 사용하는 것이 효율적

    DocumentFragment 노드

    • 기존 DOM과 별도로 존재하므로 기존DOM에는 어떠한 변경도 발생하지 않는다.
    • DocumentFragment 노드를 DOM에 추가하면 자신은 제거되고 자신의 자식 노드만 추가된다.
<!DOCTYPE html>
<html>
  <body>
  	<ul id="fruits"></ul>
  </body>
  <script>
  	const $fruits = document.getElementById('fruits');

	// DocumentFragment 노드 생성
	const $fragment = document.createDocumentFragment();

	['Apple', 'Banana', 'Orange'].forEach(text => {
    	// 1. 요소 노드 생성
      	const $li = document.createElement('li');
      
      	// 2. 텍스트 노드 생성
      	const textNode = document.createTextNode(text);
      
      	// 3. 텍스트 노드를 $li 요소 노드의 자식 노드로 추가
      	$li.appendChild(textNode);
      
      	// 4. $li 요소 노드를 DocumentFragment 노드의 마지막 자식 노드로 추가
      	$fragment.appendChild($li);
    	
      	// 5. DocumentFragment 노드를 #fruits 요소 노드의 마지막 자식 노드로 추가
      	$fragment.appendChild($container);
    });
  </script>
</html>

🔥 노드 탐색

  • 자식 노드 탐색

Node.prototype.childNodes : 자식 노드를 모두 탐색하여 반환
Element.prototype.children : 자식 노드 중 요소 노드만 모두 탐색하여 반환
Node.prototype.firstChild : 첫번째 자식 노드 반환
Node.prototype.lastChild : 마지막 자식 노드 반환
Element.prototype.firstElementChild : 첫번째 자식 요소 노드 반환
Element.prototype.lastElementChild : 마지막 자식 요소 노드 반환

예시

<!DOCTYPE html>
<html>
  <body>
  	<ul id="fruit">
  		<li class="apple">Apple</li>
		<li class="banana">Banana</li>
		<li class="orange">Orange</li>
  	</ul>
	<script>
    	// 노드 탐색의 기점이 되는 #fruit 요소 노드를 취득
        const $fruit = document.getElementById('fruit');

		// #fruit 요소의 모든 자식 노드 탐색
		// 요소 노드 뿐만 아니라 텍스트 노드도 포함
		console.log($fruit.childNodes);
		// -> NodeList(7) [text, li.apple, text, li.banana, text, li.orange, text]

		// #fruit 요소의 모든 자식 노드 탐색
		console.log($fruit.children);
		// -> HTMLCollection(3) [li.apple, li.banana, li.orange]

		// #fruit 요소의 첫 번째 자식 노드 탐색
		console.log($fruit.firstChild);	// #text

		// #fruit 요소의 마지막 자식 노드 탐색
		console.log($fruit.lastChild);	// #text

		// #fruit 요소의 첫 번째 자식 노드 탐색
		console.log($fruit.firstElementChild);	// li.apple

		// #fruit 요소의 마지막 자식 노드 탐색
		console.log($fruit.lastElementChild);	// li.orange
    </script>
  </body>
</html>

  • 자식 노드 존재 확인
    Node.prototype.hasChildrenNodes : 존재하면 true, 존재하지 않으면 false

  • 부모 노드 탐색
    Node.prototype.parentNode

  • 형제 노드 탐색
    Node.prototype.previousSibling : 이전 형제 노드를 탐색하여 반환
    Node.prototype.nextSibling : 다음 형제 노드를 탐색하여 반환
    Element.prototype.previousElementSibling : 이전 형제 요소 노드 반환
    Element.prototype.nextElementSibling : 다음 형제 요소 노드 반환

🔥 노드 정보 취득

Node.prototype.nodeType : 노드 객체의 종류. 노드 타입을 나타내는 상수를 반환

  • 요소 노드 : 1반환
  • 텍스트 노드 : 3반환
  • 문서 노드 : 9반환

Node.prototype.nodeName : 노드 이름을 문자열로 반환

  • 요소 노드 : 태그 이름 반환
  • 텍스트 노드 : #text반환
  • 문서 노드 : #document반환

🔥 요소 노드의 텍스트 조작

nodeValue : 노드 객체의 값(= 텍스트 노드의 텍스트)을 반환

<!DOCTYPE html>
<html>
  <body>
	<div id="foo">Hello</div>
  </body>
  <script>
    // 문서 노드의 nodeValue 프로퍼티를 참조
    console.log(document.nodeValue);	// null

	// 요소 노드의 nodeValue 프로퍼티를 참조
	const $foo = document.getElementById('foo');
    console.log($foo.nodeValue);	// null

	// 텍스트 노드의 nodeValue 프로퍼티를 참조
	const $textNode = $foo.firstChild;
	console.log($textNode.nodeValue);	// Hello
	
	// 텍스트 노드의 값 변경
	$textNode.nodeValue = 'World';
	console.log($textNode.nodeValue);	// World
  </script>
</html>

textContent : 요소 노드의 텍스트와 모든 자손 노드의 텍스트를 모두 취득하거나 변경

<!DOCTYPE html>
<html>
  <body>
	<div id="foo">Hello <span>World!</span></div>
  </body>
  <script>
    // #foo 요소 노드의 텍스트를 모두 취득한다. HTML 마크업은 무시
    console.log(document.getElementById('foo').textContent);	// Hello World!
  </script>
</html>

만약 요소 노드의 콘텐츠 영역에 자식 요소 노드가 없고 텍스트만 존재한다면 firstChild.nodeValue와 textContent 프로퍼티는 같은 결과를 반환하므로,
이 경우 textContent 를 사용하는 편이 더 간단하다.

innerText와 유사하지만, innerText는 사용하지 않는 것이 좋다

profile
seonjeong
🦋개발 공부 기록🦋
이전 포스트

[JavaScript] 배열(array), 객체(object), 클래스(class)

다음 포스트

[JavaScript] 동기(synchronous), 비동기(asynchronous)

0개의 댓글