Home >Web Front-end >JS Tutorial >Introduction to document object in js

Introduction to document object in js

PHPzOriginal: 2024-02-18 13:06:07713browse

Introduction to the Document object in JavaScript and code examples

Introduction:
In JavaScript, the Document object is an interface that represents the entire HTML document. It provides How to access and operate the documentation. This article will introduce the common methods and properties of the Document object and provide some specific code examples.

getElementById method
getElementById is an important method of the Document object, used to obtain the corresponding element node based on the id attribute of the specified element. Dynamic changes to the page can be achieved by modifying the properties or content of element nodes. The following is a specific code example:

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

In the above code, the element node with the id "myHeading" is obtained through the getElementById method, and the innerHTML attribute is used to change its content to "Hello, JavaScript! ".

getElementsByTagName method
getElementsByTagName method is used to obtain all element nodes of the specified tag name and return a NodeList object. You can use the length property of the NodeList object to get the number of matching elements and access each element by index. The following is a sample code:

<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>

In the above code, all li element nodes are obtained through the getElementsByTagName method, and the text color of each li element is changed to red through a for loop.

createElement and appendChild methods
The createElement method is used to create a new element node, while the appendChild method adds the new element node to the specified parent node. The following is a sample code:

<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>

In the above code, a new p element node is created through the createElement method and added to the div element with the id "myDiv" using the appendChild method. .

Summary:
This article introduces some common methods and properties of Document objects in JavaScript, including getElementById, getElementsByTagName, createElement and appendChild. Through these methods and properties, you can easily access and operate the element nodes of HTML documents. I hope the code examples provided in this article will be helpful to readers who are learning and using JavaScript.

The above is the detailed content of Introduction to document object in js. For more information, please follow other related articles on the PHP Chinese website!

JavaScript html for 循环接口 Length JS 对象 innerHTML li

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Use the return keyword in JavaScriptNext article：Use the return keyword in JavaScript

See more

Introduction to document object in js

Related articles