Use JavaScript functions to manipulate DOM elements and modify styles

Use JavaScript functions to manipulate DOM elements and modify styles

JavaScript is a powerful programming language that can be used to manipulate the DOM (Document Object Model) in HTML pages ) element and modify the style. In this article, we'll learn how to use JavaScript functions to perform these tasks and provide some concrete code examples.

1. Get DOM element
   To operate a DOM element, you first need to find it. We can use the getElementById function to get the DOM element by its ID. For example:

var element = document.getElementById("myElement");

2. Modify the text content of the DOM element
   Once we obtain the DOM element, we can modify its text content. You can use the innerText attribute or the textContent attribute to modify it. These two properties work very similarly, the difference lies in the way they treat HTML tags.

element.innerText = "新的文本内容";

3. Modify the style of DOM elements
   JavaScript can also be used to modify the style of DOM elements. We can access and modify the style properties of an element using the style attribute. For example, the following code will modify the background color of the element to red:

element.style.backgroundColor = "red";

4. Add and remove CSS class names
   If we want to add or remove a CSS class name, we can Use the function provided by the classList attribute to achieve this. The add function is used to add a class name, and the remove function is used to remove a class name.

element.classList.add("myClass");
element.classList.remove("myClass");

5. Dynamic creation of DOM elements
   In addition to modifying existing DOM elements, we can also use JavaScript to dynamically create new DOM elements and add them to HTML pages. You can use the createElement function to create a new element, and then use the appendChild function to add it to another element.

var newElement = document.createElement("div");
newElement.innerText = "新创建的元素";
parentElement.appendChild(newElement);

6. Listening to events
   JavaScript can also be used to listen to events on DOM elements and perform corresponding operations. Event listeners can be added using the addEventListener function. Here is an example of an alert box popping up when the button is clicked.

var button = document.getElementById("myButton");
button.addEventListener("click", function() {
    alert("按钮被点击了");
});

The above are some examples of using JavaScript functions to manipulate DOM elements and modify styles. By using these functions flexibly, we can achieve many interesting special effects and interactive effects. Hope this article helps you!

The above is the detailed content of Use JavaScript functions to manipulate DOM elements and modify styles. For more information, please follow other related articles on the PHP Chinese website!