DOM
DOM: Document object model;
node
Element node: The atom of the DOM is the element node. Elements like <body>, <p>, <ul>, etc. Elements can contain other elements. The only element that is not included in the other element is the <html> element
Text node: In XHTML documents, text nodes are always included inside element nodes.
Attribute node: Attribute nodes are used to give more specific descriptions of elements. For example, almost every element has a title attribute, and we can use this attribute to accurately describe what is contained in the element:
<p>Don't forget to buy this stuff.</p>
In the DOM, title="a gentle reminder" is an attribute node.
CSS
Get elements
getElementById, getElementsByTagName, getElementsByClassName three methods to get element nodes.
getElementsByTagName allows a wildcard as its parameter, which means that each element in the document will have a place in the array returned by the function. Wildcards ("*") must be in quotes, which is to be different from multiplication operations.
You can also use getElementById and getElementsByTagName. As shown below:
The code copy 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 purchase contains.
The getElementsByClassName method is only supported by newer browsers. To make up 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:
The code copy 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<elems.length;i++){
if(elems[i].className.indexOf(classname) != -1){
results[results.length] = elems[i];
}
}
return results;
}
}
The getElementsByClassName function accepts two parameters. The first node represents the starting point of search in the DOM tree, and the second classname is the class name to be searched for.
Get and set properties
getAttribute is a function that has only one parameter - the name of the attribute you are planning to query:
The code copy is as follows:
object.getAttribute(attribute)
setAttribute() allows us to modify the value of the attribute node. After modifying the document through setAttribute, when viewing the source code of the document through the browser's view source option, what you see will still be the previous property value, that is, the modifications made by setAttribute will not be reflected in the source code of the document itself. This phenomenon of "inconsistent inside and outside" comes from the working mode of DOM: first load the static content of the document, then dynamically refresh, dynamic refresh does not affect the static content of the document. This is the real power of DOM: refreshing the page content without refreshing the page in the browser.