1. DOM 소개

웹페이지가 로드되면 브라우저는 해당 페이지의 문서 객체 모델, 즉 DOM(Document Object Model)을 생성합니다.

2.DOM 작업 HTML

2.1 HTML 출력 스트림 변경

문서가 로드된 후에는 document.write()를 사용하지 마세요. 문서를 덮어씁니다.

2.2 요소 찾기

ID로 HTML 요소 찾기

태그로 HTML 요소 찾기

2.3 HTML 콘텐츠 변경

속성 사용: 내부 HTML

2.4 HTML 속성 변경

속성 사용: attribute

Object_HTML.html

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--修改-->
        <p id="pid">Hello</p>
        <button onclick="demo()">按钮</button>
        <script>
            function demo(){                var nv=document.getElementById("pid");
                nv.innerHTML="World";
                document.getElementsByName("p");//p如果相同，相同元素的第一个            }        </script>
        <!--修改属性-->
        <br />
        <a id="aid" href="http://www.baidu.com">百度</a>
        <button onclick="demobd()">跳转</button>
        <script>
            function demobd(){
                document.getElementById("aid").href="index.html";
            }        </script>
        
        <br />
        <img id="iid" src="img/294224.jpg" height="200" width="300"/>
        <button onclick="demoimg()">切换</button>
        <script>
            function demoimg(){
                document.getElementById("iid").src="img/308048.jpg";
            }        </script>
        
    </body></html>

로그인 후 복사

3.DOM 작업 CSS

DOM 개체를 통해 CSS 변경

구문: document .getElementById(id).style.property=new style

Object_CSS.html

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/Object_CSS.css" />
    </head>
    <body>
        <p id="p" class="p">
            hello        </p>
        <button onclick="demo()">按钮</button>
        <script>
            function demo(){
                document.getElementById("p").style.background="blue";
                document.getElementById("p").style.color="white";
            }        </script>
        
    </body></html>

로그인 후 복사

css/Object_CSS.css

.p{
    background-color: blueviolet;
    height: 200px;
    width: 300px;
}

로그인 후 복사

4.DOM 이벤트 리스너

4.1 DOM EventListenter

메소드: addEventListener()

이 메소드는 지정된 요소에 핸들을 추가하는 데 사용됩니다.

4.3 RemoveEventListener()

메소드 제거 및 핸들 추가

EventListener.html

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <button id="btn">按钮</button>
        <script>
            document.getElementById("btn").addEventListener("click",function(){
                alert("hello");
            });        </script>
        
        <button id="btnjb">句柄</button>
        <script>
            var x=document.getElementById("btnjb");
            x.addEventListener("click",hello);
            x.addEventListener("click",world);
            x.removeEventListener("click",hello);            function hello(){
                alert("hello");
            }            function world(){
                alert("world");
            }        </script>
    </body></html>

로그인 후 복사

위 내용은 모두의 학습에 도움이 되기를 바랍니다. 관련 권장 사항:

js의 내장 객체 구문 분석

code

js의 사용자 정의 객체 구문 분석

위 내용은 JavaScript의 DOM 객체 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!