js의 문서 객체 소개
- PHPz원래의
- 2024-02-18 13:06:07622검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!