푸린세스

DOM4 - jQuery 객체 본문

카테고리 없음

DOM4 - jQuery 객체

푸곰주 2023. 5. 12. 16:19
<!DOCTYPE html>
<html>
<body>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li id="active">JavaScript</li>
</ul>
<script>
console.group('before');
var lis = document.getElementsByTagName('li');    //HTMLCollection
for(var i = 0; i < lis.length; i++){
    console.log(lis[i]);
}
console.groupEnd();
console.group('after');
lis[1].parentNode.removeChild(lis[1]);
for(var i = 0; i < lis.length; i++){
    console.log(lis[i]);
}
console.groupEnd();      

</script>
<script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>
</body>
</html>

after기준으로 설명

 

jQuery 객체에는 조회된 엘리먼트가 담겨 있다. jQuery 객체는 일종의 유사배열의 형태로 조회된 엘리먼트를 가지고 있기 때문에 배열처럼 사용해서 엘리먼트를 가져올 수 있다.

한가지 주의할 것은 li[i]의 값은 해당 엘리먼트에 대한 jQuery 객체가 아니라 DOM 객체라는 것이다. 따라서 jQuery의 기능을 이용해서 이 객체를 제어하려면 jQuery 함수를 이용해야 한다.

 

 

 

 

아래와 같은 방법으로 조회된 결과를 열람할수도 있다. 

 

<ul>
    <li>html</li>
    <li>css</li>
    <li>JavaScript</li>
</ul>
<script>
    var li = $('li');
    li.map(function(index, elem){ //elem : DOM object 여기서는 html LI element
        console.log(index, elem);
        $(elem).css('color', 'red'); //DOM객체 직접이용해서 css명령어X
                                        //DOM객체를 함수로 감싸서 jQuery객체로 만든다음 메소드를쓴다.
    })
</script>

map은 jQuery 객체의 엘리먼트를 하나씩 순회한다. 이 때 첫번째 인자로 전달된 함수가 호출되는데 첫번째 인자로 엘리먼트의 인덱스, 두번째 인자로 엘리먼트 객체(DOM)이 전달된다. 참고