Home > Developer > JavaScript
Through the HTML DOM, you can access all the elements of a JavaScript HTML document.
HTML DOM (Document Object model)When a Web page is loaded, the browser creates a Document object model for the page. The Document Object Model DOM defines a standard way to access and manipulate HTML documents. The DOM renders an HTML document as a tree structure with elements, attributes, and text (the node tree).
The HTML DOM model is constructed as a tree of objects :
With the programmable object model, JavaScript has the ability to create dynamic HTML.
Typically, with JavaScript, you need to manipulate HTML elements.
In order to do this, you must first find the element. There are three ways to do this:
The simplest way to find HTML elements in the DOM is by using the ID of the element.
This example finds the id= "Intro" element:
Example var X=document.getelementbyid ("Intro");If the element is found, the method returns the element in the form of an object (in X).
If the element is not found, the X will contain null.
This example finds the element id= "main" and then finds all the <p> elements in the id= "main" element:
Instance<body>
<p> Hello, World!</p>
<div id= "Main" >
<p>dom is very useful </p>
<p> This example shows the <b>getElementsByTagName</b> method </p>
</div>
<script>
var X=document.getelementbyid ("main");
var y=x.getelementsbytagname ("P");
document.write (the first paragraph in the ' id= ' main element is: ' +y[1].innerhtml);
</script>
</body>
The results shown are:
Parse This example: to find the second P element in the div and modify its contents. We first find its parent element by ID Div:var x=
document.getElementById ("main"). Then look for the tag in the parent class element: Var y=x.getelementbytagname ("P"); at this point, Y stores all the P tags in the div, starting with table 0, is also equivalent to an array. We're looking for a second P-tag, which is y[1];. To modify the contents of the second P tag, that is y[1].innerhtml.
Of course, the above example, we can also be the same code to achieve:Body>
<p> Hello, World!</p>
<div id= "Main" >
<p>dom is very useful </p>
<p> This example shows the <b>getElementsByTagName</b> method </p>
</div>
<script>
var x=document.getelementsbytagname ("P");
document.write (the first paragraph in the ' id= ' main element is: ' +x[2].innerhtml);
</script>
</body>
The only difference between this code and the above is that the range of P elements is not the same. In this example we look for P in docunment (the entire page document), find all the P elements in the page, and store them in X. We're going to get a third p tag, so it's x[2]. The example above is looking for the P tag in its id=main div, so we find two P, and the second p is certainly y[1].
Looking closely, we find that searching by ID is the only element in the document, so getElementById is element. And, looking through the label, getElementsByTagName is elements.
Find HTML elements by class nameThis example uses the getelementsbyclassname function to find the elements of the class= "Intro":
Example var x=document.getelementsbyclassname ("Intro");In the above 3 ways, we have found the label we want to find and so on (of course, the above example has also changed the HTML content, we have to show to find, only display to see the effect. ）。 So next, we'll show what we can do to find everything.
JavaScript HTML DOM-changing HTMLThe HTML DOM allows JavaScript to change the contents of an HTML element.
(i) Change the HTML output stream (document.write)
JavaScript is able to create dynamic HTML content:
In JavaScript, document.write () can be used to write content directly to the HTML output stream.
Example <! DOCTYPE html>The simplest way to modify HTML content is to use the InnerHTML property.
To change the contents of an HTML element, use this syntax:
This example changes the contents of the <p> element:
Examples <body>This example changes the contents of the
Example <! DOCTYPE html>
<script>
var Element=document.getelementbyid ("header");
Element.innerhtml= "New Header";
</script>
</body>
Example Explanation:
The above HTML document contains the
We use the HTML DOM to get the id= "header" element
JavaScript changes the contents of this element (InnerHTML)
To change the attributes of an HTML element, use this syntax:
document.getElementById (ID).attribute=new ValueThis example changes the SRC attribute of the element:
Example <! DOCTYPE html>Three
JavaScript HTML DOM-changing CSSHTML DOM allows JavaScript to change the style of HTML elements.
Change HTML StyleTo change the style of your HTML elements, use this syntax:
document.getElementById (ID). Style. Property=New StyleThe following example changes the style of the <p> element:
Html>
<body>
<p id= "P2" >hello world!</p>
<script>
document.getElementById ("P2"). style.color= "Blue";
</script>
<p>the paragraph above was changed by a script.</p>
</body>
Show and hide Text
Javascript HTML DOM
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
