Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

FU11M00N

[ JavaScript ] JS 제어대상 찾기 getElementById ,getElementsByTagName,getElementsByClassName 본문

SUA 정보보안/JavaScript

[ JavaScript ] JS 제어대상 찾기 getElementById ,getElementsByTagName,getElementsByClassName

호IT 2021. 2. 7. 13:59

 

 

 

 

이미지 출처 :    https://www.inflearn.com/course/javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%95%EC%A2%8C#

 

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다.

 

 

 

 

 

 

- DOM 제어 대상 찾기

 

제어의 대상에 해당되는 객체를 찾는 것이 먼저 되어야 문서를 자바스크립트로 제어할수있습니다.

 

문서 내에서 객체를 찾는 방법은 document 객체의 메소드를 이용하면 할수있습니다.

 

 

 

- document.getElementsByTagName

 

 

문서 내에서 특정 태그에 해당되는 객체를 찾는 방법은 여러가지가 있습니다.

 

getElementsByTagName은 인자로 전달된 태그명에 해당하는 객체들을 찾아서

그 리스트를 NodeList라는 유사 배열에 담아서 반환합니다.

 

NodeList는 배열은 아니지만 length와 배열접근연산자를 사용해서 엘리먼트를 조회할 수 있다는 특징을 갖습니다.

 

 

아래는 예제입니다.

 

 

 

 

 

 

 

 

 

 

 

<!DOCTYPE html>
<html>
<body>
<ul>
    <h1>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>      
    </h1>

</ul>
<script>
    var lis = document.getElementsByTagName('li');
    for(var i=0; i < lis.length; i++){
        lis[i].style.color='blue';   
    }
</script>
</body>
</html>

 

document.getElementsByTagName('li') 를 이용해서, li 태그를 배열 안에 넣습니다. 그 후

 

태그들의 color 를 "blue" 로 바꿔줬습니다.

 

 

 

만약 조회의 대상을 좁히려면 아래와 같이 특정 객체를 지정하면 됩니다.

 

다른 메소드에 또한 적용할수있습니다.

 

<!DOCTYPE html>
<html>
<body>
<ul>
    <h1>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    </h1>
</ul>
<ol>
    <h1>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    </h1>
</ol>
<script>
    var ul = document.getElementsByTagName('ul')[0];
    var lis = ul.getElementsByTagName('li');
    for(var i=0; lis.length; i++){
        lis[i].style.color='blue';   
    }
</script>
</body>
</html>

 

 

 

 

이렇게 document.getElementsByTagName 를 사용하면 특정 태그를 조회할 수 있게 됩니다.

 

 

 

 

 

- document.getElementsByClassName

 

 

class 속성의 값을 기준으로 객체를 조회할수도 있습니다.

 

 

<!DOCTYPE html>
<html>
<body>
<ul>
    <h1>
    <li>HTML</li>
    <li class="active">CSS</li>
    <li class="active">JavaScript</li>
    </h1>
</ul>
<script>
    var lis = document.getElementsByClassName('active');
    for(var i=0; i < lis.length; i++){
        lis[i].style.color='blue';   
    }
</script>
</body>
</html>

 

 

 

 

클래스 또한 tagName 과 같이 여러 개가 조회될 수 있기 때문에, getElements 의 모습으로 s가붙기때문에 복수형입니다. 

 

 

 

 

 

 

- document.getElementById

 

 

id 값을 기준으로 객체를 조회하고, 다른 메소드들에 비해 성능면에서 가장 우수합니다.

 

 

 

 

 

<!DOCTYPE html>
<html>
<body>
<ul>
    <li>HTML</li>
    <li id="active">CSS</li>
    <li>JavaScript</li>
</ul>
<script>
    var li = document.getElementById('active');
    li.style.color='red';
</script>
</body>
</html>

 

 

 

 

 

id 값은 중복이 안되고, 하나만 가능하기 때문에 getElement 의 모습입니다.

 

 

SUA 정보보안 멘토링에 참여하고 있습니다.

 

 

'SUA 정보보안 > JavaScript' 카테고리의 다른 글

[ JavaScript ] JS 제어 대상 찾기 : 제이쿼리(jQuery)  (0) 2021.02.07
[ JavaScript ] JS 제어대상 찾기 querySelector , querySelectorAll  (0) 2021.02.07
[ JavaScript ] JS 창(Window) 제어  (0) 2021.02.07
[ JavaScript ] JS Navigator 객체  (0) 2021.02.07
[ JavaScript ] JS location 객체  (0) 2021.02.07
'SUA 정보보안/JavaScript' Related Articles more
Comments