11. Element 객체 & 식별자 API

Element 객체란?

Element 객체란 문서상의 각각의 태그(=엘리먼트)의 내용들을 추상화한 객체이다.

여기서 말하는 문서는 HTML 문서만을 지칭하는 것이 아닌 마크업(<>와 같은 태그를 이용한 구조) 언어의 모든 문서를 말한다.(HTML, XML 등..)

즉, Element 객체는 모든 마크업언어의 형태인 문서에 대해서 공통적이고 기본적인 기능을 정의하는 표준 또는 규격이라 할 수 있다.

HTMLElement 객체란?

HTML 문서에 대해 공통적이고 기본적인 기능을 정의하는 표준 또는 규격이라 할 수 있다.

위에서 설명한 Element 객체와 같은 기능을 하는 객체지만 HTML이 앞에 붙은 이유는 HTML 문서에 한정하여 정의된 표준이라는 것이다.

HTML 문서에 한정하여 정의한다는 것은 HTML 문서가 부가적으로 가져야 할 기능들을 추가하기 위해 분리시켰다는 의미로 볼 수 있다.(같은 맥락으로 XML 문서는 XMLElement, SVG는 SVGElement 라는 객체들이 분리된다.)

위와 같은 관계도를 DOM Tree 라고 한다.

DOM이란 Document Object Model 의 약자로 문서객체모델이라고 하며 HTML, XML 등 문서의 프로그래밍 인터페이스이다.

DOM 에 대해선 더 많은 내용과 깊이가 있어 따로 정리하겠다.

Element 식별자 API

Element 객체가 갖고있는 API는 식별자, 속성, 조회 등이 있다.

엘리먼트를 제어하기 위해서는 해당 엘리먼트를 조회하기 위한 식별자가 필요하다.

HTML에선 Tag명, ID, Class 라는 것으로 엘리먼트를 식별한다.

(1) TagName

코드로 확인해본다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <li id="son">Son</li>
    <script>
    var son = document.getElementById('son');
    console.log(son.tagName);
    </script>
</body>
</html>

li 엘리먼트에서 id값을 son으로 하여 생성한 후 자바스크립트로 id값이 son이라는 엘리먼트를 조회하여 son 이라는 변수에 넣었다. 그리고 console.log로 son 객체에 대한 tagName 을 찍어보았다.

하단 콘솔창에 LI 라는 것을 확인할 수 있다.

tagName 이라는 기능은 Element 객체의 식별자 API 이다. 말 그대로 해당 엘리먼트의 태그 이름을 알아내는 기능이다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <li id="son">Son</li>
    <script>
    var son = document.getElementById('son');
    console.log(son.tagName);
    son.tagName = "Test";
    console.log(son.tagName);
    </script>
</body>
</html>

이번엔 해당 태그네임을 Test라고 변경한 후 console.log로 찍어보았다.

여전히 LI 로 출력된다.

이는 TagName 이라고 하는 기능이 읽기전용임을 의미한다.

(2) id

id는 문서에서 단 하나만 등장할 수 있는 식별자이다.

즉, 겹칠수가 없다.

코드로 확인한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <li id="son">Son</li>
    <li id="kane">Kane</li>
    <script>
    var son = document.getElementById('son');
    var kane = document.getElementById('kane');

    console.log(son.id);
    console.log(kane.id);

    son.id = "Tottenham1";
    kane.id = "Tottenham2";

    console.log(son.id);
    console.log(kane.id);
    </script>
</body>
</html>

2개의 li 엘리먼트에 각 id값을 지정한 후 son, kane 이라는 변수에 각각 해당하는 id에 대한 엘리먼트를 담았다.

이후 console.log 로 id값을 찍었고 각각의 id값을 변경한 후 다시 console.log로 찍어보았다.

id값이 변경된 것을 확인할 수 있고 html 문서상에도 li 엘리먼트에 id값이 변경된 것을 확인할 수 있다.

(3) className

여러개의 엘리먼트를 그룹핑할 때 사용한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <li id="son" class="son">Son</li>

    <script>
    var son = document.getElementById('son');
    console.log(son.className);
    son.className += "Tottenham"
    console.log(son.className);
    </script>
</body>
</html>

li 엘리먼트의 class 명에 대하여 제어한다.

(4) classList

className에 비해 class에 관련해 더 편하게 제어할 수 있다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
</head>
<body>
    <li id="son" class="son kane alli">Son</li>

    <input type="button" value="DOMTokenList" onclick="console.log(son.classList);" />
    <input type="button" value="조회" onclick="loop()"; />
    <input type="button" value="추가" onclick="son.classList.add('loris');" />
    <input type="button" value="제거" onclick="son.classList.remove('alli');" />
    <input type="button" value="토글" onclick="son.classList.toggle('son');" />

    <script>
        function loop(){
        var son = document.getElementById('son');
        for(i=0; i<son.classList.length; i++){
            console.log(son.classList[i]);
        }
    }
    </script>
</body>
</html>

DOMTokenList 버튼 클릭 시 해당 li 엘리먼트의 class의 list를 확인한다.

조회버튼 클릭 시 loop() 함수가 호출되며 class의 length를 계산해서 for문으로 모든 class를 조회한다.

추가버튼 클릭 시 class 속성이 깜빡거리면서 loris 가 추가된다.

제거버튼 클릭 시 alli가 제거된다.

토글버튼 클릭 시 있으면 없애고 없으면 추가하게 된다.

'Javascript' 카테고리의 다른 글

14. jQuery 조회 범위 제한 (0)	2021.09.16
13. jQuery 속성 제어 (0)	2021.09.15
10. jQuery 알아보기 (0)	2021.09.11
9. HTML Element (0)	2021.09.10
8. jQuery 기본 사용법 (0)	2021.09.09