id를 이용한 요소 노드 취득 - getElementById

imjingu·2023년 8월 1일
0

개발공부

목록 보기
258/481
post-thumbnail

id를 이용한 요소 노드 취득
Document.prototype.getElementById 메서드는 인수로 전달한 id 어트리뷰트 값을 갖는 하나의 요소 노드를 탐색하여 반환

id값은 HTML 문서 내에서 유일한 값이여야 하며, Class 어트리뷰트와는 달리 공백 문자로 구분하여 여러 개의 값을 가질 수 없음
단 , HTML 문서내에 중복된 ID값을 갖는 HTML 요소가 여러개 존재하더라도 어떠한 에러가 발생하지 않음
즉 HTML 문서 내에는 중복된 id값을 갖는 요소가 여러개 존재할 가능성이 있음.

이러한 경우 getElementById 메서드는 인수로 전달된 ID값을 갖는 첫번재 요소 노드만 반환
즉, getElementById 메서드는 언제나 단 하나의 요소 노드를 반환

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM - Create & Add Node</title>
</head>
<body>
    <ul>
        <li id="apple">Apple</li>
        <li id="banana">Banana</li>
        <li id="orange">Orange</li>
    </ul>
    <script>
        /* 
        
        */
        const elem = document.getElementById('banana');
        elem.style.color = 'red'
    </script>
</body>
</html>

0개의 댓글