html DOM에 대해 알아보기 3

오늘은 어제에 이어서 html dom 객체에 대해 알아보려 합니다.

document 객체

브라우저가 html 문서를 불러오기 전에 document 객체를 먼저 생성하여 document 객체를 최상위로 dom 트리를 생성하기 때문에 DOM 트리의 최상위 객체입니다.

속성은 html 문서의 전반적인 속성을 내포하며, 메소드는 dom 객체의 검색과 생성 그리고 html 문서의 전박적인 제어를 맡음으로서 html 문서를 대변하는 객체이기도 합니다.

document 객체 접근

window.document 또는 document의 이름으로 접근하지만, document 객체는 dom 객체가 아닙니다.

document.getElementById("id").style.color = "black";

DOM 트리에서 객체 찾기

태그의 이름으로 DOM 객체를 찾으려면 document.getElementsByTagName()를 이용합니다.

이는 태그와 같은 이름의 모든 DOM 객체를 찾아서 컬렉션을 반환합니다.

컬렉션은 []와 인덱스를 이용하여 각 원소에 접근합니다.

<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
function func() {
    var arr = document.getElementsByTagName("span");
    for(var i=0; i<arr.length; i++) {
        var span = arr[i];
        span.style.color = "red";
        }
}
</script>
</head>
<body>
<button onclick="func()">누르세요</button>
</h3>
<hr>
<span>색의 변화</span>를 줍니다.
<span>색의 변화</span>를 줍니다.
<span>색의 변화</span>를 줍니다.
<span>색의 변화</span>를 줍니다.
</body>
</html>

class 속성으로 DOM 객체 찾기

document.getElementsByClassName()으로 동일한 class 속성(이름)을 가진 모든 DOM 객체들을 찾아 컬렉션 형태로 반환합니다.

다음편에서 계속됩니다.

Written on May 3, 2018