Home > Developer > Web Develop
Finally began to review the knowledge of the DOM, this a busy paper, basically did not read the technical book.
Remember last year when the internship, only to start the real contact front, found that the original JS can be used so flexible.
Speaking of DOM, you have to mention the composition of JavaScript, JavaScript is made up of three parts:
1 ECMAScript
2 BOM
3 DOM
At first, the page was made up of HTML, a static label language, and later, to enrich the Web page, the script language was introduced.
But because of too many browser vendors, each manufacturer uses its own language, resulting in a wide variety of script languages, eventually by Netscape and Sun to standardize script, launch ECMAScript.
Then the browser wars make DOM a specification.
To put it simply:
ECMAScript is a basic JavaScript core, the BOM is JavaScript for the browser, and the DOM is the JavaScript for the document object.
Here's a brief introduction to the DOM.In the DOM, all the tags in the HTML are objects, and the entire HTML page is a document tree.
Each tag is an object in this document, each of which consists of an element node, an attribute node, and a text node.
ELEMENT node: Defines the type of the label
Attribute node: Defines the attributes in a tag
Text node: Defines the text that the label contains, which is the main display of the label
Their relationship is as follows:
The four most common methods for DOM are:
1 getElementById () Gets the node object by the ID name in the tag
2 getElementsByTagName () gets an array of node objects by tag name
3 getattribute () Gets a property of an object
4 SetAttribute () sets a property of an object
For example, the following sample code:
<!doctype html>p {color:yellow; Font-family: "Arial", sans-serif; Font-size:1. 2em; } body {color:white; Background-Color:black; }. Special {font-Style:italic; } h2.special {text-transform:uppercase; } #purchases {border:1px solid white; Background-color: #333; Color: #ccc; Padding:1em; } #purchases li {font-Weight:bold; } </style> t forget to buy this stuff.</p> <ul id= "purchases" > <li>a tin of beans</li> <li>Cheese</li> <li>Milk</li> </ul> <ul id= "Test" > <li>a tin of Beans</li> <li>Cheese</li> <li>Milk</li> </ul> <p class= "Special" >this paragraph has the special class</p>
Through the above code, you can more clearly understand the effect of these four methods, the page effect is as follows:
GetElementsById ()by getElementById () you can return the node object where the ID is located, the ID is unique in HTML and cannot be duplicated, so you can only get an object by this method.
So the following code:
var purchases = document.getElementById ("purchases"); Console.log (purchases);You will get the following results:
getElementsByTagName ()Look at getElementsByTagName (), which is the collection of all objects that return the label, so the method name is elements!
var liItems1 = document.getElementsByTagName ("li"); Console.log (LIITEMS1); var liItems2 = Purchases.getelementsbytagname ("*"); Console.log (LIITEMS2);In the preceding code, the first method obtains a collection of Li objects that are the entire document, and the second method is the Li collection contained in the Purchases object.
Therefore, the first method obtains 6 Li objects, while the second method has only three.
It is also possible to see that this method returns a collection that has an attribute, length, that can be used to get the collection.
GetAttribute ()This method can only be called by an object, but it cannot be a document object. Therefore, the method is usually called using getElementById to obtain the specified ID of the object.
Two methods, you can get the specific properties of the object.
var pitems = document.getElementsByTagName ("P"); for (var i=0;i<pitems.length;i++) { console.log (Pitems[i].getattribute ("title")); }In the above code, a collection of objects of P tags is obtained, and the example code above has two P tags, so this collection contains two objects. Only the first object contains the title property.
Therefore, the following results are obtained:
SetAttribute ()Similar to the GetAttribute method above, it can only be called by an object.
var pspecial = pitems[pitems.length-1]; Pspecial.setattribute ("title", "My Special title"); for (var i=0;i<pitems.length;i++) { console.log (Pitems[i].getattribute ("title")); }The above code, just as a reference: Since the second object does not have a title property, after setting the Titel property for him, we get the following:
It is important to note that because the DOM is generated dynamically after the page loads the static code file, the operation of the DOM does not change the contents of the source code.
ReferenceReference book:The Art of JavaScript DOM programming
"The web Must Know"--dom: four Common methods
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
