DOM basics of Reading Notes in JavaScriptDOM programming Art

This article mainly introduces the DOM basis of Reading Notes in JavaScriptDOM programming art. For more information, see DOM

DOM: Document Object Model;

Node

Element Node: DOM atoms are element nodes.,

,

And so on. An element can contain other elements. The only element that is not included in other elements isElement

Text node: in XHTML documents, text nodes are always contained in element nodes.

Attribute node: A property node is used to describe elements in more detail. For example, almost every element has a title attribute, which can be used to accurately describe what is contained in the element:

Don't forget to buy this stuff.

In DOM, title = "a gentle reminder" is an attribute node.

CSS

Get Element
GetElementById, getElementsByTagName, and getElementsByClassName can be used to obtain element nodes.

GetElementsByTagName allows a wildcard to be used as its parameter, which means that every element in the document will have a place in the array returned by this function. The wildcard ("*") must be enclosed in quotation marks to be different from the multiplication operation.

You can also combine getElementById and getElementsByTagName. As follows:

The Code is as follows:


Var shopping = document. getElementById ("purchase ");
Var items = shopping. getElementsByTagName ("*");


In this way, we can obtain the number of elements contained in the element whose id attribute value is purchase.

The getElementsByClassName method is only supported by newer browsers. To make up for this, DOM script programmers need to use the existing DOM method to implement their own getElementsByClassName. In most cases, their implementation process is similar to the following getElementsByClassName:

The Code is as follows:


Function getElementsByClassName (node, classname ){
If (node. getElementsByClassName ){
Return node. getElementsByClassName (classname );
} Else {
Var results = new Array ();
Var elems = node. getElementsByTagName ("*");
For (var I = 0; I If (elems [I]. className. indexOf (classname )! =-1 ){
Results [results. length] = elems [I];
}
}
Return results;
}
}


The getElementsByClassName function accepts two parameters. The first node indicates the start point of the search in the DOM tree, and the second classname indicates the class name to be searched.

Get and set attributes

GetAttribute is a function with only one parameter-the name of the attribute you want to query:

The Code is as follows:


Object. getAttribute (attribute)


SetAttribute () allows us to modify the value of the attribute node. After the document is modified through setAttribute, When you view the source code of the document through the view source (view source Code) option of the browser, the previous attribute value will be changed, that is, the changes made by setAttribute are not reflected in the source code of the document. This "table is different" phenomenon comes from the DOM working mode: loading static content of the document first, then dynamically refreshing, dynamic refreshing does not affect the static content of the document. This is the real power of DOM: refreshing the page content does not require refreshing the page in the browser.