First, let's introduce the DOM, a set of methods for abstracting and conceptualizing the content of a document. That is, Document Object Model. When a web page is created and loaded into a web browser, the DOM converts the written web page into a document object, and through the web page model provided by the browser, the map can be read through Javascript .
For example, DOM is like a city map for a web page loaded by a browser, and you can find the place you need by clicking on the map.
Objects in Javascript are split into three categories
- User-defined objects: objects created by developers themselves;
- Built-in objects: objects built into the Javascript language, such as Array, Math and Date, etc.;
- Host object: An object provided by the browser, such as Window (Window Object Model)
DOM represents a web page as a family tree (node tree) [a set of n (n>=1) finite nodes composed of a hierarchical relationship], let's look at a Demo example
1 <! DOCTYPE html > 2 < html > 3 < head > 4 < meta charset ="utf-8" /> 5 < title > Javascript study notes </ title > 6 </ head > 7 < body > 8 < h1 > DOM Structure Diagram Analysis </ h1 > 9 < p title ="a gentle reminder" > Shopping List </p> 10 <ul id="shopList"> 11 <li class="sale">水果</li> 12 <li class="sale">削皮刀</li> 13 </ul> 14 </body> 15 </html>
<!DOCTYPE html> tells the browser which HTML or XHTML specification it should use, and then marks the beginning of the entire document from an open html tag, and all the content in this page is inside it, so the <html> tag has no parent, No siblings either, this tag is the root element, representing the entire document.
Next, go deeper and find that there are two branches under html, head and body. They are located at the same level and do not contain each other, so they are called siblings. They have a common parent element html, but each has its own child elements. And so on, we draw the document structure diagram of Demo
The family tree parsed by the DOM is also known as the node tree, and the word node is a network term that represents a connection point in the network. A network is a collection of nodes. There are also many types of nodes in the DOM, among which there are three most common nodes:
- Element node: The atom of the DOM is the element node, and the name of the label is the name of the element, such as "P" or "LI";
- Text nodes: On the Internet where content is king, most content is provided by text, and text nodes are always contained within element nodes, but not all element nodes contain text nodes;
- Attribute node: The attribute node is used to describe the element node in detail. All attribute nodes are contained within the element node, but not all element nodes contain attribute nodes;
There are three ways to get element nodes on a web page through JS (Javascript is case-sensitive):
- getElementById
- document.getElementById(id): Returns the object corresponding to the element node of the given id attribute
- getElementsByTagName
- document.getElementsByTagName(tag): Returns an array of objects, each corresponding to an element with a given tag in the document
- getElementsByTagName allows wildcards *
- getElementsByClassName
- document.getElementsByClassName(class): Access elements by the class name in the class attribute
However, although getElementsByClassName works well, only newer browsers support this DOM method, so we use a script to detect it, and if not, use a custom function
1 function getElementsByClassName(node,classname){ 2 if(node.getElementsByClassName){ 3 return node.getElementsByClassName(classname); 4 }else{ 5 var result = new new Array(); 6 var elems = node.getElementsByTagName("*"); 7 for(var i = 0;i < elems.length;i++){ 8 if(elems[i].className.indexOf(classname)!=-1){ 9 result[result.length] = elems[i]; 10 } 11 } 12 return result; 13 } 14 }
This getElementsByClassName function accepts two parameters, node represents the search starting point in the DOM tree, and the second classname is the class name to be searched, but unfortunately it is not suitable for the case of multiple class names.
After reading how to get the element, the next step is to set the attribute. After getting the required element, we can get its various attributes. getAttribute is such a method. Correspondingly, setAttribute is used to change the value of the attribute node. It is worth noting that the set/getAttribute method belongs to the element node object and cannot be called with document
- getAttribute
- object.getAttribute(attribute)
- setAttribute
- object.setAttribute(attribute,value)
DOM provides a lot of properties and methods, if you need it, you can refer to the special document for understanding. If there are mistakes, please correct me, if you have any questions, please leave a message in the comment area