'JavaScript DOM Programming Art' Reading Notes DOM Basics_javascript skills

DOM
         
DOM: Document Object Model;

Node

Element nodes: The atoms of DOM are element nodes. Elements such as

,

,

. Elements can contain other elements. The only element that is not contained within another element is the element

Text node: In XHTML documents, text nodes are always included inside element nodes.

Attribute node: Attribute node is used to give a more specific description of the element. For example, almost every element has a title attribute, and we can use this attribute to accurately describe what is contained in the element:

 

Don't forget to buy this stuff.

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

CSS

Get element
There are three methods to get element nodes: getElementById, getElementsByTagName, and getElementsByClassName.

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

You can also combine getElementById and getElementsByTagName. As shown below:

Copy code The code is as follows:

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


This way you can get how many elements the element with the id attribute value of purchase contains.

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

Copy code 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;
}
}


This getElementsByClassName function accepts two parameters. The first node represents the starting point of the search element in the DOM tree, and the second classname is the class name to be searched.

Getting and setting properties

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

Copy code The code is as follows:

object.getAttribute(attribute)


setAttribute() allows us to modify the value of the attribute node. After modifying the document through setAttribute, when you view the source code of the document through the browser's view source option, you will still see the attribute values ​​before the change. In other words, the modifications made by setAttribute will not change. will be reflected in the source code of the document itself. This phenomenon of "inconsistency between appearance and inside" comes from the working mode of the DOM: the static content of the document is loaded first, and then dynamically refreshed. The dynamic refresh does not affect the static content of the document. This is the true power of the DOM: refreshing page content without refreshing the page in the browser.