javascript set document

JavaScript is a powerful programming language that can embed code directly in web pages to change the appearance and behavior of web pages. In JavaScript, the document object represents the entire web page, and we can use it to dynamically modify the content and structure of the web page.

In this article, we will discuss some basic settings and usage of document objects in JavaScript.

1. Get the element
To modify the elements in the web page, you must first get the reference of the element. In JavaScript, you can get an element through the following methods:

1. Get by id
   If the element has a unique id attribute, you can get a reference to the element through the document.getElementById() method . This method accepts a string parameter, which is the id value of the element, and returns an object representing the element. For example:

var elem = document.getElementById("my-element");

2. Getting by tag name
   You can use the document.getElementsByTagName() method to get all the elements with the specified tag name. This method accepts a string parameter, which is the label name, and returns a node list object. For example:

var elems = document.getElementsByTagName("p");

3. Getting by class name
   You can use the document.getElementsByClassName() method to get all elements with the specified class name. This method accepts a string parameter, which is the class name, and returns a node list object. For example:

var elems = document.getElementsByClassName("my-class");

4. Getting through the selector
   You can use the document.querySelector() and document.querySelectorAll() methods to get elements that match the specified selector. These methods accept a string parameter, the CSS selector, and return a node object or node list object. For example:

var elem = document.querySelector(".my-class");
var elems = document.querySelectorAll("p");

2. Modify element attributes and content
After obtaining the element reference, you can use JavaScript to modify the element's attributes and content. The following are some common operations:

1. Modify the text content of the element
   You can use the innerHTML attribute to modify the text content of the element. For example:

elem.innerHTML = "Hello, world!";

2. Modify the style of the element
   You can use the style attribute to modify the style of the element. For example:

elem.style.color = "red";
elem.style.backgroundColor = "blue";

3. Modify the class of the element
   You can use the className attribute to modify the class of the element. For example:

elem.className = "my-class";

4. Modify the attributes of the element
   You can use the setAttribute() method and removeAttribute() method to modify the attributes of the element and delete the attributes of the element. For example:

elem.setAttribute("href", "http://www.example.com");
elem.removeAttribute("target");

3. Adding and deleting elements
JavaScript can also dynamically add and delete elements. Here are some examples:

1. Add elements
   New elements can be created using the createElement() method and added to the document using the appendChild() method or insertBefore() method. For example:

var newElem = document.createElement("p");
newElem.innerHTML = "This is a new paragraph.";
document.body.appendChild(newElem);

2. Remove elements
   You can use the removeChild() method to remove elements from the document. For example:

document.body.removeChild(elem);

4. Event handler
Event handler in JavaScript is used to respond to user operations or browser events. Here are some examples:

1. Add event listeners to elements
   You can use the addEventListener() method to add event listeners to elements. This method accepts three parameters: event type, event handling function, and whether to trigger the event during the capture phase (optional). For example:

elem.addEventListener("click", function() {
  alert("Clicked!");
});

2. Remove the event listener of the element
   You can use the removeEventListener() method to remove the event listener of the element. This method accepts two parameters: event type and event handling function, which must be the same as the function used when adding the event listener. For example:

elem.removeEventListener("click", listener);

5. Summary
The document object in JavaScript can help us dynamically modify the content and structure of web pages so that users can interact with web pages. This article introduces some common usage methods, including getting elements, modifying element properties and content, adding and removing elements, event handlers, etc. I hope this content can help you better use JavaScript to display excellent results on web pages.

The above is the detailed content of javascript set document. For more information, please follow other related articles on the PHP Chinese website!