Home > Web Front-end > JS Tutorial > Summary of some commonly used attributes in DOM operations_javascript skills

Summary of some commonly used attributes in DOM operations_javascript skills

WBOY
Release: 2016-05-16 16:09:59
Original
1456 people have browsed it

1.DOM: Document Object Model DOM (Document Object Model) defines a standard method for accessing and processing HTML documents. DOM presents HTML documents as a tree structure (node ​​tree) with elements, attributes, and text.

2. Some commonly used attributes of DOM

 2.1 Get elements by ID

(1) Grammar:

Copy code The code is as follows:

document.getElementById("id");

(2) Function: ID is a person’s ID card. We can find the tag by looking for its ID, and then perform corresponding operations.

(3) Note: Don’t forget to write the document!

 2.2 innerHTML attribute

(1) Grammar:

Copy code The code is as follows:

Obgect.innerHTML="Hello World"

(2) Function: Mainly to obtain or replace the content in the tag

 (3) Example:

Copy code The code is as follows:





innerHTML


javascript


JavaScript is a simple object-based, event-driven scripting language. It is embedded in HTML documents and is interpreted and executed by the browser. It produces dynamic display effects on web pages and implements interactive functions with users.





 (4) Note: Object is the element object obtained, such as the element obtained through document.getElementById("ID").

 2.3 Change HTML style

(1) Grammar:

Copy code The code is as follows:

Object.style.property

(2) Function: Used to modify HTML style

 (3) Example:

Copy code The code is as follows:


I love JavaScript


JavaScript enables web pages to display dynamic effects and implement interactive functions with users.




(4) Note: There are many styles of property, such as color, height, etc., which can be modified using this method. Don’t forget to add a semicolon after the property.

 2.4 Showing and hiding (display attribute)

(1) Grammar:

Object.style.display=value
(2) Function: Showing and hiding are often seen on web pages, which is achieved using the display attribute

 (3) Example:

Copy code The code is as follows:




(4) Note: The value of value is none and block, where none means not to display content, and block means to display content

 

2.5 className attribute

(1) Grammar:

Object.className=classname


(2) Function: 1. Get the class attribute of the element; 2. Specify a css style for an element in the web page to change the appearance of the element

 (3) Example:


className attribute



JavaScript enables web pages to display dynamic effects and implement interactive functions with users.



JavaScript enables web pages to display dynamic effects and implement interactive functions with users.







The above is the entire content of this article, I hope you all like it.
Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template