js의 문서 객체 소개-JS 튜토리얼-php.cn

js의 문서 객체 소개

PHPz

풀어 주다： 2024-02-18 13:06:07

원래의

699명이 탐색했습니다.

js의 문서 객체 소개

JavaScript의 Document 개체 소개 및 코드 예제

소개:
JavaScript에서 Document 개체는 HTML 문서 전체에 대한 액세스 및 작업 방법을 제공하는 인터페이스입니다. 이 문서에서는 Document 개체의 일반적인 메서드와 속성을 소개하고 몇 가지 특정 코드 예제를 제공합니다.

getElementById 메소드
getElementById는 지정된 요소의 id 속성을 기반으로 해당 요소 노드를 얻는 데 사용되는 Document 객체의 중요한 메소드입니다. 요소 노드의 속성이나 콘텐츠를 수정하여 페이지를 동적으로 변경할 수 있습니다. 다음은 구체적인 코드 예시입니다.

<html>
<body>
  <h1 id="myHeading">Hello, World!</h1>
  <script>
    var heading = document.getElementById("myHeading");
    heading.innerHTML = "Hello, JavaScript!";
  </script>
</body>
</html>

로그인 후 복사

위 코드에서 ID가 "myHeading"인 요소 노드는 getElementById 메서드를 통해 획득되고 해당 콘텐츠는 innerHTML 속성을 사용하여 "Hello, JavaScript!"로 변경됩니다.

getElementsByTagName 메소드
getElementsByTagName 메소드는 지정된 태그 이름의 모든 요소 노드를 가져오고 NodeList 객체를 반환하는 데 사용됩니다. NodeList 객체의 length 속성을 사용하여 일치하는 요소 수를 가져오고 인덱스별로 각 요소에 액세스할 수 있습니다. 다음은 샘플 코드입니다.

<html>
<body>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  <script>
    var listItems = document.getElementsByTagName("li");
    for (var i = 0; i < listItems.length; i++) {
      listItems[i].style.color = "red";
    }
  </script>
</body>
</html>

로그인 후 복사

위 코드에서는 getElementsByTagName 메서드를 통해 모든 li 요소 노드를 가져오고, for 루프를 통해 각 li 요소의 텍스트 색상을 빨간색으로 변경합니다.

createElement 및appendChild 메소드
createElement 메소드는 새 요소 노드를 생성하는 데 사용되는 반면,appendChild 메소드는 지정된 상위 노드에 새 요소 노드를 추가합니다. 다음은 샘플 코드입니다.

<html>
<body>
  <div id="myDiv"></div>
  <script>
    var newElement = document.createElement("p");
    newElement.innerHTML = "This is a new paragraph.";
    document.getElementById("myDiv").appendChild(newElement);
  </script>
</body>
</html>

로그인 후 복사

위 코드에서는 createElement 메소드를 통해 새 p 요소 노드가 생성되고,appendChild 메소드를 사용하여 ID가 "myDiv"인 div 요소에 추가됩니다.

요약:
이 문서에서는 getElementById, getElementsByTagName, createElement 및 AppendChild를 포함하여 JavaScript의 Document 객체에 대한 몇 가지 일반적인 메서드와 속성을 소개합니다. 이러한 메서드와 속성을 통해 HTML 문서의 요소 노드에 쉽게 액세스하고 작동할 수 있습니다. 이 기사에 제공된 코드 예제가 JavaScript를 배우고 사용하는 독자에게 도움이 되기를 바랍니다.

위 내용은 js의 문서 객체 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!