자바스크립트 - Elements 객체

WEB/Javascript

자바스크립트 - Elements 객체

IM레나2 2021. 9. 13. 22:10

*생활코딩 자바스크립트강의 공부

Elements 객체

엘리먼트를 추상화한 객체

#식별자 API

엘리먼트의 이름, id, class는 식별자로 사용된다.

식별자 API는 이 식별자를 가져오고 변경하는 역할을 한다.

<html>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <body>
        <ul>
            <li>html</li>
            <li>css</li>
            <li id="active" class="important current">JavaScript</li>
        </ul>
        <script>
        console.log(document.getElementById('active').tagName)
        </script>
    </body>
</html>

console.log(document.getElementById('active').tagName)
- LI

var active = document.getElementById('active');
console.log(active.id);
- active
active.id = 'deactive';
- 'deactive'
console.log(active.id);
- deactive

var

class 값 변경시 프로퍼티 이름으로 className을 사용한다.

active.className = "current";

class 네임의 리스트

active.classList[0];

<input type="button" value="DOMTokenList" onclick="console.log(active.classList);" />
<input type="button" value="조회" onclick="loop();" />
<input type="button" value="추가" onclick="active.classList.add('marked');" />
<input type="button" value="제거" onclick="active.classList.remove('important');" />
<input type="button" value="토글" onclick="active.classList.toggle('current');" />
**

#조회 API

엘리먼트를 조회하는 기능

document.getEelementsBy* 메소드로 엘리먼트를 조회함

console.group('대상');

var 대상 = document.getElementsById('active');

console.groupEnd();

#속성 API

속성을 제어하는 API

Element.getAttribute(name)
Element.setAttribute(name, value)
Element.hasAttribute(name);
Element.removeAttribute(name);

모든 엘리먼트의 속성은 자바스크립트 객체의 속성과 프로퍼티로 제어가 가능하다.

<p id="target">
    Hello world
</p>
<script>
    var target = document.getElementById('target');
    // attribute 방식
    target.setAttribute('class', 'important');
    // property 방식
    target.className = 'important';
</script>

생활코딩-자바스크립트