자바스크립트 DOM 소개

돔이란 무엇인가요?

DOM(문서 개체 모델)은 확장 가능한 마크업 언어 처리를 위해 W3C 조직에서 권장하는 표준 프로그래밍 인터페이스입니다. 문서 객체 모델의 역사는 1990년대 후반 Microsoft와 Netscape 사이의 "브라우저 전쟁"으로 거슬러 올라갑니다. JavaScript와 JScript의 생사를 놓고 경쟁하기 위해 양 당사자는 브라우저에 대규모로 강력한 기능을 부여했습니다. Microsoft는 VBScript, ActiveX 및 Microsoft 고유의 DHTML 형식을 포함하여 많은 독점 기능을 웹 기술에 추가했습니다. 이로 인해 많은 웹 페이지가 Microsoft가 아닌 플랫폼 및 브라우저를 사용하여 제대로 표시되지 않게 되었습니다. DOM은 당시 양조된 걸작이다.

DOM(Document Object Model)은 HTML 및 XML의 API(응용 프로그래밍 인터페이스)입니다. DOM은 전체 페이지를 노드 수준으로 구성된 문서로 계획합니다.

소위 문서 개체 모델은 실제로 HTML의 헤더, 단락, 목록, 스타일, ID 등과 같은 웹 페이지 HTML의 다양한 요소를 내부적으로 표현한 것입니다. 모든 요소는 DOM을 통해 액세스할 수 있습니다. .

궁극적으로 JavaScript는 Html 페이지를 작동하고 Html을 DHtml로 변환해야 하며, Html 페이지를 작동하려면 DOM이 필요합니다. DOM은 Html 페이지를 객체로 시뮬레이션합니다. JavaScript가 일부 계산, 루프 및 기타 작업만 수행하고 Html을 작동할 수 없으면 존재 의미를 잃게 됩니다.

DOM은 HTML 페이지의 모델입니다. 각 태그는 객체로 처리됩니다. JavaScript는 DOM의 속성과 메서드를 호출하여 웹 페이지의 텍스트 상자, 레이어 및 기타 요소를 프로그래밍 방식으로 제어할 수 있습니다. 예를 들어 텍스트 상자의 DOM 개체를 조작하여 텍스트 상자의 값을 읽고 설정할 수 있습니다.

JavaScript는 페이지의 모든 HTML 요소를 변경할 수 있습니다

JavaScript는 페이지의 모든 HTML 속성을 변경할 수 있습니다

JavaScript는 페이지의 모든 CSS 스타일을 변경할 수 있습니다

JavaScript는 페이지의 모든 이벤트에 반응할 수 있습니다

찾기 HTML 요소

일반적으로 JavaScript에서는 HTML 요소를 조작해야 합니다.

이 작업을 수행하려면 먼저 요소를 찾아야 합니다. 이를 수행하는 세 가지 방법이 있습니다:

ID로 HTML 요소 찾기

태그 이름으로 HTML 요소 찾기

클래스 이름으로 HTML 요소 찾기

DOM에서 HTML 요소를 찾는 가장 쉬운 방법은 요소 ID를 사용하는 것입니다. .

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<head>
<body>
    <div id="div1">
        <p id="p1">
            我是第一个P</p>
        <p id="p2">
            我是第二个P</p>
    </div>
 <script>
    window.onload = function () {
            var str = document.getElementById("p1").innerHTML;
            alert(str);        //弹出    我是第一个P
        }
  </script>
</body>
</html>

태그 이름으로 HTML 요소 찾기

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<head>
<body>
    <div id="div1">
        <p id="p1">
            我是第一个P</p>
        <p id="p2">
            我是第二个P</p>
    </div>
    <script>
        window.onload = function () {
            var str = document.getElementsByTagName("p")[1].innerHTML;
            alert(str);        //输出  我是第二个P，因为获取的是索引为1的P，索引从0开始
        }   
      </script>
</body>
</html>

클래스 이름으로 HTML 요소 찾기

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<head>
<body>
    <div id="div1">
        <p id="p1" class="class1">
            我是第一个P</p>
        <p id="p2">
            我是第二个P</p>
    </div>
    <script>
        window.onload = function () {
            var node = document.getElementsByClassName("class1")[0];
            alert(node.innerHTML);
        }
      </script>
</body>
</html>

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <head> <style type="text/css"> body {background-color:#eeeeee} </style> </head> <body> <h3>通过 id 查找 HTML 元素</h3> <p id = "hw">Hello world!</p> <script> x = document.getElementById("hw"); document.write('<p>id="hw"的段落的文本是：'+x.innerHTML+'</p>'); </script> <button onclick = "setCurrentTime()">将id="hw"的文字改为当前时间</button> <script> function setCurrentTime(){ x = document.getElementById("hw"); x.innerHTML = Date() } </script> <h3>通过标签名查找 HTML 元素</h3> <div id = "mainDiv"> <p>This is a paragragph.</p> <p>This is another paragragph.</p> <p>Yes you're right! This is also paragragph.</p> </div> <script> xx = document.getElementById("mainDiv"); tagContents = xx.getElementsByTagName("p"); document.write("<p>使用Javascript查找id为mainDiv下的p标签的内容</p>"); for(i=0;;i++){ var tag = tagContents[i] if(tag!=null){ document.write("<p>"+tag.innerHTML+"</p>") }else{ document.write("<p>共有"+i+"条内容</p>") break; } } </script> <h3>修改 CSS 样式</h3> <p> <span id = "para_1">This is a test paragraph.</span> <button onclick="changeTextColor()">改变文字颜色</button> </p> <p> <span id = "para_2">This is another paragraph. <button onclick="changeTextFont()">改变字体</button> </p> <p> <span id = "para_3">This is HELLO WORLD.</span> <button onclick="changeTextSize()">改变字号</button> </p> <p> <button onclick="changeVisibility()">显示/隐藏</button> <span id = "para_4">示例文字</span> </p> <script> function changeTextColor(){ ele_1 = document.getElementById("para_1"); ele_1.style.color = "red"; } function changeTextFont(){ ele_2 = document.getElementById("para_2"); ele_2.style.fontFamily = "Arial"; } function changeTextSize(){ ele_3 = document.getElementById("para_3"); ele_3.style.fontSize = "larger"; } document.getElementById("para_4").style.visibility = "visible" function changeVisibility(){ ele_4 = document.getElementById("para_4"); if(ele_4.style.visibility.match("visible")){ ele_4.style.visibility = "hidden" }else{ ele_4.style.visibility = "visible" } } </script> </body> </html>

제출하다 코드 재설정

자동운전