HTML 태그에 접근하기

HTML 태그 접근

 

1. javascript에서 태그는 하나의 객체로 만들어져 있다 => DOM

    1) 태그를 불러오면 태그는 객체이기 때문에 각 멤버변수를 가지고 있다. => 속성(property)

 

2. 속성값으로 태그 가져오기

태그의 id속성값으로 가져오는 방법	document.getElementById("id"); // 아이디는 단일값 -> return값 : 단일값
태그의 class속성값으로 가져오는 방법	document.getElementsByClassName("className");
태그명으로 가져오는 방법	document.getElementsByTagName("tagName");
태그의 name속성값을 가져오는 방법	document.getElementsByName("name");
선택자를 이용해서 가져오는 방법	하나만 가져오기	document.querySelector(선택자);
	전부 가져오기	document.querySelectorAll(선택자);

⭐id를 속성값으로 가져오는 방법 외에는 return값이 배열이 된다.

    <div id="container">
        <ul>
            <li id="li">1</li>
            <li class="liClass">2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <br>
        <p>6</p>
    </div>
    <script>
        var li = document.getElementById("li");
        console.log(li);

        var liClass = document.getElementsByClassName("liClass");
        console.log(liClass);

        var selectorAll = document.querySelectorAll("div#container>ul>li");
        console.log(selectorAll);
    </script>

페이지 출력

console창 출력