1. Documentation: “D” in DOM
“D” stands for document.
2. Object: “O” in DOM
O stands for object category of objects
- User-defined Objects
- Native Objects
- Host Object
The Window object corresponds to the browser window itself, and the properties and methods of this object are commonly referred to as BOM (browser object model), which provides methods such as window.open and window.blur. So much so that pop-ups and drop-down menus can be abused
3. Model: “M” in DOM
The “M” stands for “Model.” DOM represents a document as a tree (a mathematical concept) of sample code
<! DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Shoping List<title> </head> <body> <h1>What to Buy </h1> <p title=" A gentle reminder">Don't forget to buy this stuff.<p> < UL ID =" daylight "> <li> A tin of beans<li> <li Class ="sale">Cheese<li> <li class="sale important">Milk<li> </ul> <body> </ HTML > <head> and <body> belong to the next branch, are at the same level and are not included in each other, and are brothers. The <head> element has two child elements <meta> and <title>. The <body> element has three child elements <p>, <h1>, and <ul>. <ul> is also a parent element with three child elements, all of which are <li> elements.Copy the codeIf you can think of the various elements of a document as a family tree, we can describe the DOM in the same terms. But I think it’s more accurate to call it ** “node tree” **
4, node,
Node is a network term. It refers to a connection point in a network. A network is a collection of nodes. The same is true for DOM, where documents are collections of nodes.
- Element nodes
- Text node
- An attribute node
4, 1 element node
DOM atoms are element nodes ** elements such as ,
, < UI >, etc. The name of the tag is the name of the element. The element can also contain other elements. The only element not included in the other elements is the < HTML > element, which is the root of our node tree.
4, 2 Text node
In the example above, the
element contains the text “Don’t forget to buy this stuff.” It is a text node.
4, 3 Attribute nodes
Attribute nodes are more specific descriptions of elements. For example, almost all elements have a title attribute, which we can use to give an accurate description of what is contained within the element:
<p title="a gentle reminder">Don't forget to buy this stuff.<p>
Copy the codeIn the DOM, title=”a gentle reminder” is an attribute node, and in the previous example the unordered list element
-
has an ID attribute. Some list elements
- have a class attribute.
The relationship between the three
4, 4 CSS
Like javascript scripts, we can also embed CSS styles in the section of the document (between the style> tags). You can also put it in a separate file. ** The format of the CSS file referenced in an HTML file:
<link type="text/ CSS "href="file.css" rel="stylesheet"> ** Inheritance is a powerful function of CSS technology. HTML <p class="special">This pargraph has the special class<p> <h2 class="special">So dose This Headline </h2> CSS special{font: italic; } ' 'CSS h2. Special {text-transform: uppercase; The id attribute is used to add a unique identifier to an element in a web page: HTML < UL ID =" daylight "> CSS # daylight {border:1px solid white; Background - color: # 333; Color: # CCC; padding:1em; }``` ```css #purchases li{ font-weight:bold; } ' '####4, 5 get element > There are three DOM methods to get element nodes, Get - **getElementById** - *getElementsByTagName** - *getElementsByClassName** by element ID, tag name, and class name respectively ###1)getElementById This method returns an object corresponding to the element node with the given id attribute value, ** case sensitive in javascript **. It is a function specific to the Document object. In script code, the function name must be followed by a pair of parentheses that contain the arguments to the function. ** 'document.getelementById (id)' has only one argument in the getElementById method: ** The value of the id attribute of the element you want to get. ** The ID attribute must be in single or double quotes. This call will return an object corresponding to a unique element in the Document object. The HTLM ID value of the element is' furnished '` ``` HTML <! DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Shoping List<title> </head> <body> <h1>What to Buy </h1> <p title=" A gentle reminder">Don't forget to buy this stuff.<p> < UL ID =" daylight "> <li> A tin of beans<li> <li class="sale">Cheese<li> <li class="sale important">Milk<li> </ul> <script> alert(typeof docment.getElementById("purchases")); </script> <body> </ HTML > // validates with the 'typeof' operator (the Typeof operator tells us whether its operand is a letter, number, function, Boolean, or object.Copy the codeValidation can be an object
2)getElementsByTagName
The getElementsByTagName method returns an array of objects, each corresponding to an element in the document with a given label. Its parameters is the tag name: decument. GetElementByTagName (tag)
alert(document.getElementsByTagName("li").length); // Display the list elements in the document: 3 <! DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Shoping List<title> </head> <body> <h1>What to Buy </h1> <p title=" A gentle reminder">Don't forget to buy this stuff.<p> < UL ID =" daylight "> <li> A tin of beans<li> <li class="sale">Cheese<li> <li class="sale important">Milk<li> </ul> <script> var items=document.getElementByTagName("li"); for (var i=0; i<items.length; i++){ alert(typeof items[i]); } </script> <body> </ HTML > // the code run results show three alert dialog boxes, display the message is "object".Copy the codeGetElementsByTagName allows you to take a wildcard as an argument, and the wildcard (*) must be enclosed in quotes
alert(document.getElementsByTagName("*").length); Var shopping=document.getElementById(" daylight robbery "); var items=shopping.getElementsByTagName("*"); As a result, the items array will only contain elements in the list of elements whose ID attribute value is purshaseCopy the code3)getElementByClassName
This method allows us to access elements by the class name in the class attribute, and getElementByClassName takes only one argument, the class name:
GetElementByClassName (class) returns the same value as getElementsByTagName, an array of elements with the same class name. ` ` ` javascript document. GetElementsByClassName (" sale ") ` ` ` using this method can also have a look for those with multiple element of the name of the class. Multiple class names can be separated by Spaces between ` ` ` javascript alert (document. GetElementsByClassName (" important sale "). The length). // The dialog box displays 1, indicating that only one element matches. The order of class names does not matter, even if the element has more class names.Copy the codeIt can also be used in combination with getElementById
var shopping=document.getElementById("purchase"); var sales=shopping.getElementsByClassName("sale"); The Sales array contains only the elements with the "Sale" class in the "robbery" list.Copy the codeThe getElementByClassName method is useful, but only newer browsers support it. Therefore, you need to use existing DOM methods to implement your own getElementsByClassName.
The function getElementsByClassName (node, the classname) {if (node. GetElementsByClassName) {/ / return using existing methods node.getElementsByTagName("*"); for (var i=0; i<elems.length; i++){ if(elems[i].ClassName.indexof(classname)! = -1){ results[results.length]=elems[i]; }} return results; ####5 Get and set attributes - **getAttribute method **(get the attribute of an element) - **setAttribute method **(change the attribute node value) #####5, 1getAttribute getAttribute is a function, It has only one argument (the name of the attribute you want to query). HTML Object.getAttribute (attribute) getAttribute can only be called from the element node object. For example, you can share with getElementByTagName method for each ` < p > ` elements of the title attribute ` ` ` HTML var ¶s = document. The getElementByTagName (" p "); for (var i=0; i<paras.length; i++){ alert(paras[i].getAttribute("title")); } Alterdui with text "a gentle reminder" displayed after the code runsCopy the codeSource: Jane Book