JS dom

JavaScript

JS dom

테라시아 2024. 12. 3. 15:53

DOM(Document Object Model)
    - HTML Tag 들을 하나씩 오브젝트화 한 것
    - HTML 페이지의 모양과 내용을 제어하기 위해 사용하는 객체

    <div>
        <ul>
            <li></li>
        </ul>
    </div>

    - div, ul, li 어떤 것도 자바스크립트의 객체로 선언 가능
    - HTML 태그 당 DOM 객체가 하나씩 생성
    - HTML 태그의 포함관계에 따라 Parent-Child 관계로 구성

☆ Code

★ DOM

<!doctype html>
<html>
<head>
    <title>DOM</title>
</head>
<body>
    <h1>Name Property</h1>
    <hr>
    <form name="joinForm" id="abcdefg">
        <div name="abdiv">
            <input type="text" name="id">
            <input type="button" value="btn" name="abbutton">
        </div>
        <div>
            <input type="checkbox" name="lang" value="Java" isPossible="X">Java
            <input type="checkbox" name="lang" value="C" checked>C
            <input type="checkbox" name="lang" value="Javascript">Javascript
        </div>
        <input type="button" value="checkAll" onclick="checkAll()">

    </form>
</body>
<script>
    console.log(document.joinForm);
    console.log(joinForm);
    console.log(joinForm.id);
    console.log(joinForm.abbutton);

    const checkboxes = document.getElementsByName("lang");
    console.log(checkboxes);
    console.log("Try Start");
    checkboxes.forEach((checkbox, index) => {
        console.log(index + ":" + checkbox.checked);
    });

    function checkAll(){
        checkboxes.forEach((checkbox, index) => {
            if(checkbox.getAttribute("isPossible") != "X"){
                checkbox.checked = true;
            }
        });
    }
</script>
</html>