요소 노드 취득
DOM은 요소 노드를 취득할 수 있는 다양한 메서드를 제공한다
document.prototype.getElementById 메서드는 인수로 전달한 id 어트리뷰트 깂을 갖는 하나의 요소 노드를 탐색하여 반환한다. getElementById 메서드는 Document.prototype의 프로퍼티다 따라서 반드시 document를 통해 호출해야한다.
<!DOCTYPE html>
<html>
<body>
<ul>
<li id="banana">Apple</li>
<li id="banana">banana</li>
<li id="banana">orange</li>
</ul>
<script>
const $elem = document.getElementById("banana");
$elem.style.color = "red";
</script>
</body>
</html>
HTML 문서 내에 중복된 id값을 갖는 HTML 요소가 여러개 존재한다. 하지만 HTML문서내에는 어떠한 에러도 발상하지 않는다. 이러한 경우 getElementById 메서드는 인수로 전달된 id 값을 갖는 첫 번째 요소 노드만 반환한다.
<!DOCTYPE html>
<html>
<body>
<ul>
<li id="banana">Apple</li>
<li id="banana">banana</li>
<li id="banana">orange</li>
</ul>
<script>
const $elem = document.getElementById("grape");
//id 값이 grape인 요소 노드를 탐색하여 null이 반환된다.
$elem.style.color = "red";
</script>
</body>
</html>
인수로 전달된 id 값을 갖는 HTML 요소가 존재하지 않을경우 getElementById 메서드는 null을 반한환다. 실제로 $elem.style.color = "red" 적용되지 않는다.
<!DOCTYPE html>
<html>
<body>
<ul>
<li id="foo">foo</li>
<script>
//id 값과 동일한 이름의 전역 변수가 암묵적으로 선언되고 해당 노드 객채게 할당된다.
console.log(foo === document.getElementById('foo'));
delete foo;
console.log(foo);
</script>
</body>
</html>
HTML 요소에 id어트리뷰트 부여하면 id값과 동일한 이름의 전역 변수가 암묵적으로 선언되고 해당 노드객체가 할당되는 부수 효과가 있다.
태그이름을 이용한 요소 취득
getElementsByTagName 메서드는 인수로 전달한 태그 이름을 갖는 모든 요소 노드들을 탐색하여 반환한다.
<!DOCTYPE html>
<html>
<body>
<ul>
<li id="Apple">Apple</li>
<li id="banana">banana</li>
<li id="orange">orange</li>
</ul>
<script>
//탐색된 요소 노드들은 HTMLCollection 객체에 담겨 반환된다.
// HTMLCollection 객체는 유사 배열 객체이면서 이터러블이다.
const $elem = document.getElementsByTagName("li");
[...$elem].forEach((elem) => {
elem.style.color = "red";
});
</script>
</body>
</html>
//모든 요소노드들을 탐색하여 반환한다.
const $elem = document.getElementsByTagName('*')Element.prototype.getElementById 메서드는 특정 요소 노드를 통해 호출하며, 특정 요소 노드의 자손 노드 중에서 요소 노드를 탐색하여 반환한다.
<!DOCTYPE html>
<html>
<body>
<ul id="furits">
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
<ul>
<li>HTML</li>
</ul>
<script>
//dom 전체에 태그 이름이 li 요소 노드를 찾아 반환한다.
const $lisFormDocument = document.getElementsByTagName("li");
console.log($lisFormDocument);
//ul #furits 요소의 자손 노드 중에서 태그 이름인 li인 요소 노드를 모두 탐색하여 반환한다.
const $fruits = document.getElementById("furits");
const $list = $fruits.getElementsByTagName("li");
console.log($list);
</script>
</body>
</html>Class를 이용한 요소 노드 취득
<!DOCTYPE html>
<html>
<body>
<ul id="fruits">
<li class="apple">Apple</li>
<li class="banana">banana</li>
<li class="orange">orange</li>
</ul>
<div class="banana">banana</div>
<ul>
<li>HTML</li>
</ul>
<script>
//class 값이 banana 인 요소 노드를 모두 탐색하여 HTMLCollection 객체에 담아 반환한다.
const $elems = document.getElementsByClassName("banana");
console.log($elems);
//fruits 요소싀 자손 노드중에서 class 값이 banana인 요소 노드를 모두 탐색한다.
const $fruits = document.getElementById("fruits");
const $bananafruits = $fruits.getElementsByClassName("banana");
// 취득한 모든 요소 CSScolor 프로퍼티 값을 변경한다.
console.log($bananafruits);
</script>
</body>
</html><!DOCTYPE html>
<html>
<body>
<ul>
<li class="apple">Apple</li>
<li class="banana">banana</li>
<li class="orange">orange</li>
</ul>
<script>
//class 값이 fruit 인 요소 노드를 모두 탐색하여 HTMLCollection 객체에 담아 반환한다.
const $elems = document.getElementsByClassName("fruits");
// 취득한 모든 요소 CSScolor 프로퍼티 값을 변경한다.
[...$elems].forEach((elems) => {
elems.style.color = "red";
});
//class 값이 fruit 인 요소 노드를 모두 탐색하여 HTMLCollection 객체에 담아 반환한다.
const $apples = document.getElementsByClassName("fruits apple");
// 취득한 요소 CSScolor 프로퍼티 값을 변경한다.
[...$apples].forEach((elems) => {
elems.style.color = "blue";
});
</script>
</body>
</html>프론트 엔드 개발자라면 DOM의 관한 얘기는 많이 들어봤을거라고 생각한다
적장 개발은 하고 있지만 DOM의 본질과 dom의 특성을 완전히 이해하고 사용하기는 힘들지 않나.. 라고 생각한다 !
프로젝트 하면서 dom 조작에 관련으로 인해 많은 시간을 사용했는데 복습을 하지 않아.. 기억이 가물하다..
요소 취득 하는 방법부터 dom 조작 까지 다시 공부해보려고 한다!
