DOM(문서 개체 모델)

(사진은 인터넷에서 퍼왔습니다)

HTML DOM은 HTML Document Object Model 또는 약어입니다. HTML DOM은 HTML 요소를 객체로 정의하는 W3C(World Wide Web Consortium) 표준입니다. 각 HTML 요소(예: <h1>, <p>, <a> 등)는 다음을 포함하는 객체로 생각할 수 있습니다 .

메소드(HTML 요소에서 수행할 수 있는 작업)
속성(설정 또는 변경할 수 있는 HTML 값)
이벤트(HTML 요소에 발생할 수 있는 일)

따라서 HTML DOM은 다음을 정의합니다.

HTML 문서 액세스 표준
모든 HTML 요소에 대한 속성, 메서드 및 이벤트

HTML DOM은 다음과 같은 표준을 제공합니다.

기존 HTML 요소 및 속성 변경
HTML 요소 및 속성 추가 및 제거
HTML 요소의 스타일 변경
HTML 이벤트에 응답 또는 추가

DOM 문서 객체

문서 개체는 HTML DOM의 맨 위에 위치하며 페이지에 로드된 다른 모든 개체의 상위 개체입니다. 페이지의 다른 요소에 액세스해야 하는 경우 이제 Document 객체부터 시작하세요.

버튼의 onclick 이벤트가 실행될 때(즉, 버튼이 클릭될 때) 일부 JavaScript를 실행하는 방법을 살펴볼 때.

다음 섹션에서는 다음 방법을 연구합니다 .

getElementById

다음 세 가지 속성 도 살펴보겠습니다 .

내부 HTML
스타일
기인하다

getElementById 방법

문서 객체에는 다음과 같이 사용되는 getElementById라는 특수 메소드가 있습니다.

document.getElementById(id)

실제 예:

<!DOCTYPE html>
<html>
<body>
    <button onclick="getById()">Push me</button>
    <p id="test">Lets learn some JavaScript!</p>
    <script>
        function getById() {
            document.getElementById("test");           
        }
    </script>
</body>
</html>

위의 예에서는 버튼 onclick 이벤트가 발생할 때 getById 함수가 호출된 후 다음을 수행합니다.

getElementById 메소드를 사용하여 id test 로 요소를 가져옵니다 . 이 경우에는 단락입니다.

그러면 어떻게 되나요? 음, 아무것도... 우리는 그 요소에 대해 아무것도 하지 않았습니다.

innerHTML 속성

이전 섹션에서는 ID로 요소를 가져오는 방법을 보여주었습니다. 이제 그걸로 뭔가를 해보자.

<!DOCTYPE html>
<html>
<body>
    <button onclick="changeHTML()">Push me</button>
    <p id="test">Lets learn some JavaScript!</p>
    <script>
        function changeHTML() {
            document.getElementById("test").innerHTML = "We are learning JavaScript!";
        }
    </script>
</body>
</html>

위의 예에서 버튼 onclick 이벤트가 발생 하면 changeHTML 함수가 호출되고 다음이 수행됩니다.

getElementById 메소드를 사용하여 id test 로 요소를 가져옵니다 . 이 경우에는 단락입니다.
내부 HTML 속성 에 "We are learning JavaScript!"라는 값을 할당하여 단락의 내용을 변경합니다 .

스타일 속성

ID로 요소를 가져올 때 변경할 수 있는 또 다른 속성입니다. 아래 코드를 살펴보십시오.

<!DOCTYPE html>
<html>
  <body>
    <button onclick="changeColour()">Push me</button>
    <p id="test">Lets learn some JavaScript!</p>   
    <script>
      function changeColour() {
        document.getElementById("test").style.color = "blue";
      }
    </script>
  </body>
</html>

위의 예에서 버튼 클릭 이벤트가 발생 하면 changeColor 함수가 호출되고 다음과 같습니다.

getElementById 메소드를 사용하여 ID 테스트 로 요소를 가져옵니다 . 이 경우 단락
style.color 속성 에 "blue" 값을 할당하여 단락의 텍스트 색상을 변경합니다.

또 다른 예제 코드는 다음과 같습니다.

<html>
  <body>
    <button onclick="changeColour()">Push me</button>
    <p id="test">Lets learn some JavaScript!</p>   
    <script>
      function changeColour() {
        document.getElementById("test").style.fontSize = "40px";
      }
    </script>
  </body>
</html>

여기에는 버튼과 단락이 포함되어 있습니다. 버튼을 클릭하면 changeColour() JavaScript 함수가 호출됩니다. 이 함수는 가 있는 요소를 document.getElementById("test") 가져온 id="test" 다음 style.fontSize 해당 속성을 사용하여 해당 요소의 글꼴 크기를 "40px"로 설정합니다. 즉, 버튼을 클릭하면 단락의 텍스트가 40픽셀로 렌더링됩니다.

속성 속성

HTML 속성 값을 어떻게 변경합니까? 이 경우 이미지의 src 속성입니다.

<!DOCTYPE html>
<html>
  <body>
    <button onclick="changeImage()">Push me</button>
    <img id="someImage" src="smile.png">  
    <script>
      function changeImage() {
        document.getElementById("someImage").src = "frown.png";
      }
    </script>
  </body>
</html>

여기에는 버튼과 이미지가 포함되어 있습니다. 버튼을 클릭하면 changeImage() JavaScript 함수가 호출됩니다. 이 함수는 를 사용하여 요소를 document.getElementById("someImage") 가져온 id="someImage" 다음 src 해당 속성을 사용하여 요소의 이미지 주소를 "frown.png"로 변경합니다. 즉, 버튼을 클릭하면 이미지가 "smile.png"에서 "frown.png"로 변경됩니다.

createElement 방법

<!DOCTYPE html>
<html>
<body>
  <button onclick="create()">Push me</button>
  <script>
    function create() {
      let paragraph = document.createElement("p");   
      paragraph.innerHTML = "This is a paragraph.";   
    }
  </script>
</body>
</html>

위 코드에서:

HTML 요소를 생성하고 변수에 할당
요소의 내부 HTML 설정

그러면 어떻게 되나요? 글쎄요... 아직 문서에 해당 요소를 추가하지 않았습니다.

appendChild 방법

단순히 새로운 요소를 만드는 것만으로는 충분하지 않습니다. 문서에도 추가해야 합니다.

<!DOCTYPE html>
<html>
<body>
  <button onclick="create()">Push me</button>
  <script>
    function create() {
      let paragraph = document.createElement("p");
      paragraph.innerHTML = "This is a paragraph.";
      document.body.appendChild(para);
    }
  </script>
</body>
</html>

위 코드에서는 요소를 생성하고 문자열을 innerHTML 요소에 할당한 후 AppendChild 메서드를 사용하여 요소를 문서에 추가합니다.

제거 방법

<!DOCTYPE html>
<html>
<body>
  <button onclick="remove()">Push me</button>
  <p id="someText">This is a paragraph.</p>
  <script>
    function remove() {
      let paragraph = document.getElementById("someText")
      paragraph.remove();
    }
  </script>
</body>
</html>

위의 코드에는 버튼과 단락이 포함되어 있습니다. 버튼을 클릭하면 remove() JavaScript 함수가 호출됩니다. 이 함수는 요소를 document.getElementById("someText") 가져온 id="someText" 다음 remove() 메서드를 사용하여 문서에서 요소를 완전히 제거합니다. 즉, 버튼을 클릭하면 페이지에서 해당 단락이 삭제됩니다.