[JavaScript] 요소 접근하여 가져오기 - 태그명

태그명으로 요소에 접근하기

document.getElementByTagName("태그명");

<h3>2) 태그명으로 접근하기</h3>
<ul>
    <li>목록1</li>
    <li>목록2</li>
    <li>목록3</li>
    <li>목록4</li>
    <li>목록5</li>
</ul>

<button onclick="accessTag()">태그로 접근</button>

<script>
    function accessTag(){
        // 태그는 중복이 가능하기 때문에 배열에 담겨서 반환된다 ( [] )
        var list = document.getElementsByTagName("li"); // [li요소객체, li요소객체, ...]

        console.log(list);
        console.log(list.length); // 배열의 크기

        list[0].innerHTML="안녕하세요";
        list[3].innerHTML="반갑습니다";

        for(var i=0; i<list.length; i++){
            list[i].innerHTML = "안녕하세요"+(i+1);
        }
    }
</script>

좌) 원본 화면 / 중) 태그로 접근 버튼 클릭 후 / 우) 콘솔창