Programming Language/JavaScript

[JavaScript] 자바스크립트로 HTML 요소 가져오기

이번 시간에는 자바스크립트에서 HTML 요소에 접근하는 다양한 방법들에 대해 알아보는 시간을 가져보자.

1. getElementById()

getElementById는 JavaScript에서 사용되는 메서드로, HTML 문서 내에서 특정 ID 속성을 가진 요소(element)를 선택하는 데 사용될 수 있다. 이 메서드를 사용하면 JavaScript로 웹 페이지의 특정 요소에 액세스 하고 해당 요소의 속성이나 내용을 변경할 수 있다. getElementById 메서드는 문서 객체 모델(DOM)을 사용하여 작동하며, 웹 페이지의 요소들을 JavaScript에서 조작하는 데 중요한 역할을 한다.

예시 코드

<!DOCTYPE html>
<html>
<head>
    <title>getElementById example</title>
</head>
<body>
    <h1 id="myHeading">Hello, This is title</h1>
    <p id="myParagraph">Hello, this is content</p>

    <script>
        // getElementById를 사용하여 ID가 "myHeading"인 요소를 선택합니다.
        // get "myHeading" element by using getElementById
        let headingElement = document.getElementById("myHeading");

        // 선택한 요소의 텍스트 콘텐츠를 변경합니다.
        // Change the content of chosen element
        headingElement.innerHTML = "This is new title!!";
    </script>
</body>
</html>

해당 예제 코드에서 먼저 <h1> 요소와 <p> 요소에 각각 "myHeading"과 "myParagraph"라는 ID를 할당한다. 그 후, JavaScript 코드 블록에서 getElementById() 함수를 사용하여 ID가 "myHeading"인 요소를 선택하고, 선택한 요소의 내용을 변경한다. 이를 통해 해당 제목이 "This is new title!!"로 변경된다. 즉, getElementById 함수는 HTML 문서 내에서 특정 ID를 가진 요소에 접근하는 데 사용되며, 이를 통해 해당 요소를 조작하거나 변경할 수 있다.

2. getElementsByClassName()

해당 함수의 원리는 기본적으로 위에서 설명했던 getElementById()와 동작 원리가 비슷하나 다른 점은 요소의 class 속성을 참조하여 가지고 온다는 것이다. class 속성은 유일해야 하는 ID 속성과는 달리 중복이 가능하여 함수의 이름에서 알 수 있듯이 getElemens..로 s가 붙어 복수형이다. 즉, getElementsByClassName() 함수는 해당 class를 가진 모든 요소를 선택한다.

예시 코드

<!DOCTYPE html>
<html>
<head>
    <title>getElementsByClassName example</title>
</head>
<body>
    <h2 class="myClass">First Title</h2>
    <p class="myClass">First Paragraph</p>
    <h2 class="myClass">Second Title</h2>
    <p>Second Paragraph</p>

    <script>
        // getElementsByClassName을 사용하여 클래스 이름이 "myClass"인 모든 요소를 선택합니다.
        // Choose every elements which has class attribute with "myClass"
        let elements = document.getElementsByClassName("myClass");

        // 선택한 모든 요소의 텍스트 내용을 변경합니다.
        // Change all the text of chosen elements
        for (let i = 0; i < elements.length; i++) {
            elements[i].innerHTML = "This elements has "myClass" class attribute";
        }
    </script>
</body>
</html>

먼저 <h2>와 <p> 요소에 "myClass"라는 클래스 이름을 할당한다. 그 후, JavaScript 코드 블록에서 getElementsByClassName() 함수를 사용하여 클래스 이름이 "myClass"인 모든 요소를 선택하고, 선택한 요소들의 내용을 변경한다. 결과적으로 클래스 이름이 "myClass"인 모든 요소의 텍스트 내용이 변경된다.

3. getElementsByTagName()

getElementsByTagName() 함수는 HTML 문서 내에서 특정 태그 이름을 가진 모든 요소를 선택하는 데 사용된다. 함수 이름에서 getElements를 보고 알 수 있듯이 해당되는 모든 태그를 선택하기 때문에 복수형으로 되어있는 걸 확인할 수 있다.

예시 코드

<!DOCTYPE html>
<html>
<head>
    <title>getElementsByTagName example</title>
</head>
<body>
    <h2>First Title</h2>
    <p>This is first paragraph</p>
    <h2>Second Title</h2>
    <p>This is second paragraph</p>

    <script>
        // getElementsByTagName을 사용하여 모든 <h2> 태그를 선택합니다.
        // select all <h2> elements by using getElementsByTagName()
        let headings = document.getElementsByTagName("h2");

        // 선택한 모든 <h2> 태그의 텍스트 내용을 변경합니다.
        // change all chosen <h2> element's text
        for (let i = 0; i < headings.length; i++) {
            headings[i].innerHTML = "Title has changed";
        }
    </script>
</body>
</html>

먼저 <h2>와 <p> 태그를 사용하여 제목과 문단을 생성한다. 그 후, JavaScript 코드 블록에서 getElementsByTagName()을 사용하여 모든 <h2> 태그를 선택하고, 선택한 태그들의 내용을 변경한다. 결과적으로 모든 <h2> 태그의 텍스트 내용이 변경된다.

4. querySelector()

querySelector() 함수는 CSS 선택자를 사용하여 HTML 문서 내에서 특정 요소를 선택한다. querySelector() 함수는 매우 강력하며 복잡한 선택 조건을 지정할 수 있다.(HTML 요소를 가져올 때 가장 흔하게 쓰이는 함수이기도 하다.)

예시 코드

<!DOCTYPE html>
<html>
<head>
    <title>querySelector 예제</title>
    <style>
        /* CSS 스타일을 정의합니다. */
        /* Define CSS style here */
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <h2 class="highlight">First Title</h2>
    <p>First paragraph.</p>
    <h2>Second Title</h2>
    <p>Second paragraph</p>

    <script>
        // querySelector를 사용하여 클래스 이름이 "highlight"인 첫 번째 <h2> 요소를 선택합니다.
        // select elements with class name "highlight"
        let highlightedHeading = document.querySelector(".highlight");

        // 선택한 요소에 스타일을 적용합니다.
        // Apply style chosen element
        highlightedHeading.style.color = "blue";
    </script>
</body>
</html>

CSS 스타일을 정의하여 클래스 이름이 "hightlight"인 요소에 노란색 배경색을 적용한다. 그 후, JavaScript 코드 블록에서 querySelector() 함수를 사용하여 클래스 이름이 "hightlight"인 첫 번째 <h2> 요소를 선택하고, 선택한 요소에 파란색 글자색을 적용한다. querySelector(". highlight"); 부분에서 클래스 이름 앞에 마침표(.)의 의미는 클래스로 선택하겠다는 의미이다. ID로 지정하고 싶은 경우 #을 이용하면 된다.

getElementById("아이디")와 querySelector("#아이디")의 차이점

여기까지 필자는 공부했을 때 문득 궁금한 점이 생겼다, 그렇다면 getElementById("아이디")아 querySelector("#아이디")는 같은 기능을 하는 거처럼 보이는데 차이점이 있을까?라는 질문을 던지게 되었다. 그래서 찾아본 결과는 다음과 같다.

특징	getElementById("아이디")	querySelector("#아이디")
선택자의 다양성	특정 아이디(ID) 값을 가진 요소를 선택하는 간단한 메서드이다. 아이디는 문서 내에서 고유해야 하며, 문서 내에서 하나의 요소만 선택할 수 있다.	CSS 선택자를 사용하여 요소를 선택하는 범용 메서드이다. 이를 통해 아이디 뿐만 아니라 클래스, 요소 유형, 속성, 계층 구조 등 다양한 선택 조건을 지정할 수 있다.
선택 결과	선택된 요소를 바로 반환한다. 따라서 반환값은 요소 자체이다.	선택한 첫 번째 요소를 반환한다. 반환값은 요소 자체이다.
브라우저 호환성	오래된 브라우저를 포함하여 대부분의 브라우저에서 지원된다.	상대적으로 최신의 메서드로, 모든 브라우저에서 지원되지는 않을 수 있으며, 특히 오래된 IE 버전에서는 지원되지 않을 수도 있다. 그러나 대부분의 현대 브라우저에서는 지원되므로 일반적으로 사용에 문제가 없다.
복잡한 선택 조건	다양한 선택자를 조합하여 사용할 수 없으며 오로지 아이디 값으로만 요소를 선택할 수 있다.	다양한 선택자를 조합하여 더 복잡한 선택 조건을 만들 수 있다. 예를 들어, querySelector("#아이디 .클래스")와 같이 아이디와 클래스를 함께 지정하여 요소를 선택할 수 있다.

5. getElementsByName

getElementsByName 메서드는 HTML 문서 내에서 특정 name 속성을 가진 요소들을 선택하는 JavaScript 메서드이다. 이 메서드를 사용하면 name 속성으로 그룹화된 요소들에 쉽게 접근할 수 있다. getElementsByName은 주로 라디오 버튼, 체크박스 등과 같은 입력 요소 그룹을 다루는 데 사용된다.

예시 코드

<!DOCTYPE html>
<html>
<head>
    <title>getElementsByName example</title>
</head>
<body>
    <form>
        <input type="radio" name="gender" value="male"> Male
        <input type="radio" name="gender" value="female"> Female
        <input type="radio" name="gender" value="other"> ETC
    </form>

    <script>
        // Select all radio elements with name "gender" by using getElementsByName
        let genderRadioButtons = document.getElementsByName("gender");

        // Select the first chosen radio button 
        genderRadioButtons[0].checked = true;
    </script>
</body>
</html>

<form> 요소 내에 세 개의 라디오 버튼이 있으며, 모두 name 속성이 "gender"로 지정되어 있다. JavaScript 코드 블록에서 getElementsByName을 사용하여 name 속성이 "gender"인 모든 라디오 버튼을 선택하고, 선택한 라디오 버튼 중 첫 번째 버튼을 선택한다.

6. querySelectorAll

CSS 선택자를 사용하여 HTML 문서 내에서 여러 요소를 선택하는 데 사용된다. 이 메서드를 사용하면 웹 페이지에서 특정 요소 그룹을 선택하고 조작할 수 있다. querySelectorAll 메서드는 querySelector와 달리, 일치하는 모든 요소를 선택하므로 여러 요소를 선택할 수 있다.

예시 코드

<!DOCTYPE html>
<html>
<head>
    <title>querySelectorAll example</title>
    <style>
        /* CSS 스타일을 정의합니다. */
        /* Define CSS style */
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <h2 class="highlight">First Title</h2>
    <p class="highlight">This is first paragraph</p>
    <h2>Second Title</h2>
    <p>This is second paragraph.</p>

    <script>
        // querySelectorAll를 사용하여 클래스 이름이 "highlight"인 모든 요소를 선택합니다.
        // select elements with class name "highlight"
        let highlightedElements = document.querySelectorAll(".highlight");

        // 선택한 모든 요소에 스타일을 적용합니다.
        // Apply style chosen element
        for (let i = 0; i < highlightedElements.length; i++) {
            highlightedElements[i].style.color = "blue";
        }
    </script>
</body>
</html>

CSS 스타일을 정의하여 클래스 이름이 "hightlight"인 요소에 노란색 배경색을 적용한다. 그런 다음, JavaScript 코드 블록에서 querySelectorAll를 사용하여 클래스 이름이 "hightlight"인 모든 요소를 선택하고, 선택한 모든 요소에 파란색 글자색을 적용한다.

7. parentNode, childNodes, nextSibling, previousSibling

parentNode, childNodes, nextSibling, previousSibling은 JavaScript의 DOM(Document Object Model)에서 사용되는 속성(property)이며, 함수가 아니다. 이러한 속성은 DOM 트리 내의 요소(element)들 간의 관계를 나타내는 데 사용된다.

속성명	속성 내용
parentNode	요소의 부모 요소를 나타내는 속성이다. 이를 사용하면 현재 요소의 직계 부모 요소에 접근할 수 있다.
childNodes	현재 요소의 모든 자식 노드의 목록을 나타내는 노드 리스트(NodeList)이다. 이 속성은 텍스트 노드, 요소 노드, 주석 노드 등 모든 종류의 노드를 포함한다.
nextSibling	현재 요소의 다음 형제 요소를 나타내는 속성이다. 텍스트 노드, 요소 노드, 주석 노드 등 모든 형제 노드를 대상으로 한다.
previousSibling	현재 요소의 이전 형제 요소를 나타내는 속성이다. 마찬가지로 텍스트 노드, 요소 노드, 주석 노드 등 모든 형제 노드를 대상으로 한다.

예시 코드

<!DOCTYPE html>
<html>
<head>
    <title>DOM Attribute and function example</title>
</head>
<body>
    <div id="parent">
        <p>First paragraph</p>
        <p>Second paragraph</p>
    </div>
</body>
<script>
    // Select element
    let parentElement = document.getElementById("parent");
    let firstParagraph = parentElement.childNodes[1];
    let secondParagraph = parentElement.childNodes[3];

    // Access to parents element by using parentNode
    let parent = firstParagraph.parentNode;

    // Access to child node by using childNodes
    let childNodes = parentElement.childNodes;

    // Access to sibling nodes by using nextSibling
    let nextSibling = firstParagraph.nextSibling;

    // Access to previous sibling nodes by using previousSibling
    let previousSibling = secondParagraph.previousSibling;

    // Output
    console.log("Parent Node :", parent);
    console.log("All child Node :", childNodes);
    console.log("Next sibling node :", nextSibling);
    console.log("Previous sibling node :", previousSibling);
</script>
</html>

parentNode, childNode, nextSibling, previousSibling 속성을 사용했을 때 나오는 결과 이미지입니다. — Output

8. getAttribute

getAttribute 메서드는 JavaScript에서 사용되며, HTML 요소의 특정 속성(attribute) 값을 가져오는 데 사용된다. 이 메서드를 사용하면 HTML 요소의 속성 값을 동적으로 읽어올 수 있다.

<!DOCTYPE html>
<html>
<head>
    <title>getAttribute example</title>
</head>
<body>
    <a href="https://snidercp.tistory.com" id="myLink">Jack Snider</a>

    <script>
        // Select element with "myLink" ID by using getElementById
        let linkElement = document.getElementById("myLink");

        // Get href attribute by using getAttribute
        let linkHref = linkElement.getAttribute("href");

        // Output
        console.log("href attribute value:", linkHref);
    </script>
</body>
</html>

getAttribute 메서드로 요소의 속성값을 가져온 결과를 출력하는 이미지입니다. — Output

<a> 요소를 가진 예시 링크를 정의하고, JavaScript 코드 블록에서 getElementById를 사용하여 id가 "myLink"인 링크 요소를 선택한다. 그 후, getAttribute를 사용하여 선택한 요소의 href 속성 값을 가져와서 변수 linkHref에 저장한다. 마지막으로 console.log를 사용하여 이 값을 콘솔에 출력한다.

9. getComputedStyle

getComputedStyle는 JavaScript에서 사용되는 메서드로, 계산된 스타일(computed style) 정보를 가져올 때 사용된다. 이 메서드는 특정 요소의 현재 스타일을 계산된 형태로 가져오며, 렌더링 된 페이지의 스타일 정보를 확인할 때 유용하다.

예시 코드

<!DOCTYPE html>
<html>
<head>
    <title>getComputedStyle example</title>
    <style>
        /* Define CSS styles. */
        #myDiv {
            width: 200px;
            height: 100px;
            background-color: lightblue;
            font-size: 16px;
            border: 2px solid darkblue;
        }
    </style>
</head>
<body>
    <div id="myDiv">This is an example.</div>

    <script>
        // Use getElementById to select the element with the id "myDiv."
        let myDiv = document.getElementById("myDiv");

        // Use getComputedStyle to retrieve style information.
        let computedStyle = getComputedStyle(myDiv);

        // Print the retrieved style information to the console.
        console.log("Background color:", computedStyle.backgroundColor);
        console.log("Font size:", computedStyle.fontSize);
        console.log("Border style:", computedStyle.borderStyle);
    </script>
</body>
</html>

getComputedStyle() 함수를 사용했을 때 나오는 결과에 대한 이미지입니다. — Output

<div> 요소에서 <style> 태그 내에서 스타일을 정의하고, JavaScript 코드 블록에서 getComputedStyle() 함수를 사용하여 id가 "myDiv"인 요소의 계산된 스타일을 가져온다. 그런 다음 console.log를 사용하여 가져온 스타일 정보를 콘솔에 출력한다.

오늘은 자바스크립트에서 요소를 가져오는 다양한 방법들에 대해 알아보았다, 다음 시간에는 이렇게 가져온 요소들을 조작하는 방법들에 대해 알아보자.

728x90

'Programming Language > JavaScript' 카테고리의 다른 글

[JavaScript] 자바스크립트 object 개념 (1)	2023.10.09
[JavaScript] 자바스크립트 익명 함수(Anonymous Function) (0)	2023.10.08
[JavaScript] 자바스크립트 onclick, addEventListener 함수 사용법 (0)	2023.09.25
[JavaScript] 자바스크립트 조건문,반복문, 논리 연산자 (0)	2023.09.19
[JavaScript] 자바스크립트 데이터 타입 (0)	2023.09.16

Contents

새소식

인기 검색어

[JavaScript] 자바스크립트로 HTML 요소 가져오기

1. getElementById()

2. getElementsByClassName()

3. getElementsByTagName()

4. querySelector()

getElementById("아이디")와 querySelector("#아이디")의 차이점

5. getElementsByName

6. querySelectorAll

7. parentNode, childNodes, nextSibling, previousSibling

8. getAttribute

9. getComputedStyle

'Programming Language > JavaScript' 카테고리의 다른 글

당신이 좋아할만한 콘텐츠

티스토리툴바