This is the 14th day of my participation in the August Text Challenge.More challenges in August
The concept of the DOM
Document Object Model (DOM) is a standard programming interface recommended by W3C to deal with extensible Markup language. It is a platform – and language-independent application programming interface (API) that dynamically accesses programs and scripts to update their content, structure, and style of WWW documents (currently, HTML and XML documents are defined through the notes section). Documents can be further processed, and the results can be added to the current page. DOM is a tree-based API document that requires the entire document to be represented in storage during processing.
DOM tree DOM is also known as the document tree model
- Document: A web page can be called a document
- Nodes: Everything in a web page is a node (tags, attributes, text, comments, etc.)
- Element: Tags in a web page
- Attribute: Indicates the attribute of the tag
Getting page elements
Gets the element by ID
document.getElementById()
- Method: Call the getElementById method of the Document object.
- Parameter: String id attribute value.
- Return value: the element object with the corresponding ID name.
Note:
-
Because id names are unique, some browsers support direct access to elements using ID names, but this is not a standard approach and is not recommended.
-
If js comes before the HTML structure, the structure will not be loaded and the element with the corresponding ID cannot be obtained.
var para = document.getElementById("para");
Copy the code
Gets the element by tag name
• Method: Call the getElementsByTagName method of the Document object.
• Parameter: label name of a string type.
• Return value: array of element objects with the same name.
Note:
-
You manipulate data in the same way you manipulate arrays.
-
The elements obtained internally by the getElementsByTagName method are added dynamically. This means that the ID does not have to be used only after the HTML page has been rendered, like the ID. For example, a Tag can be written before the , showing an empty array and then pushed into it during page rendering.
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
<script>
// Get the element ahead of time
var divs = document.getElementsByTagName("div");
console.log(divs);
</script>
</head>
<body>
<p>text1</p>
<p>text2</p>
<p>text3</p>
<p>text4</p>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<div>
<p>text5</p>
</div>
<script>
console.log(divs);
// Get the element by the tag name
var ps = document.getElementsByTagName("p");
console.log(ps);
// HTMLCollection A collection of HTML elements
// The operating room needs to follow the way of manipulating arrays
// go through the number group
for (var i = 0; i <= ps.length - 1; i++) {
// Print each item
console.log(ps[i]);
}
ps[0].style.background = "pink";
</script>
</body>
</html>
Copy the code
Gets the tag element inside the element object
• You can also call the getelement by tag method inside the element object, such as the div element object
Call the getElementsByTagName method.
• Purpose: Narrow the selection of elements, similar to descendant selectors in CSS.
<body>
<div id="box1">
<p>text1 of box1</p>
<p>text2 of box1</p>
<p>text3 of box1</p>
<p>text4 of box1</p>
</div>
<div id="box2">
<p>text1 of box2</p>
<p>text2 of box2</p>
<p>text3 of box2</p>
<p>text4 of box2</p>
</div>
<script>
// The element object can continue to call the method that gets the element by the tag name
// Similar to CSS descendant selectors, narrow the selection
var box1 = document.getElementById("box1");
// We are used to writing sequential calls separately
var ps1 = box1.getElementsByTagName("p");
console.log(ps1);
</script>
</body>
Copy the code
Get elements by name (not recommended)
• Method: Call the getElementsByName method of the Document object. (getElementsByTagName differs from getElementsByTagName in that it can only be called by document.)
• Parameter: the value of the name attribute as a string.
• Return value: an array of element objects with the same value as the name attribute.
• Selected elements change dynamically.
• Not recommended: There are compatibility issues in IE and Opera. Elements with the same ID attribute value will be selected.
<body>
<form>
<input type="radio" name="age">0 ~ 10<br>
<input type="radio" name="age">11 ~ 20<br>
<input type="radio" name="age">20 ~ 30<br>
</form>
<div id="age">age</div>
<script>
// Get the element from the tag's name attribute
var ages = document.getElementsByName("age");
// NodeList NodeList collection class array
console.log(ages);
// Compatibility problem: There is compatibility problem in IE and Opera, the part with the same id attribute value will be selected
</script>
</body>
Copy the code
Gets elements by class name
• Method: Call the getElementsByClassName method of the Document object.
• Parameter: class attribute value of string type.
• Return value: An array of element objects with the same class property value, dynamically added.
• Browser compatibility problem: Internet Explorer 8 or later is not supported
<body>
<div id="box1">
<p>text1 of box1</p>
<p class="para">text2 of box1</p>
<p class="para">text3 of box1</p>
<p>text4 of box1</p>
</div>
<div id="box2">
<p>text1 of box2</p>
<p class="para">text2 of box2</p>
<p class="para">text3 of box2</p>
<p>text4 of box2</p>
</div>
<script>
// Get the element from the class attribute value
// var paras = document.getElementsByClassName("para");
// Get the element object with id box1
var box1 = document.getElementById("box1");
// The getElementsByClassName method can also be called inside the element object
var paras1 = box1.getElementsByClassName("para");
console.log(paras1);
// Compatibility problem: Internet Explorer 8 and below are not supported
</script>
</body>
Copy the code
Gets elements based on the selector
• Method 1: Call the querySelector method of the Document object and use the CSS selector to select the first qualified tag element.
• Method 2: Call the querySelectorAll method of the Document object and use the CSS selector to select all qualified tag elements.
Class selector is preceded by.
Prefix the ID selector with #
• Arguments: string selectors in CSS.
• Browser compatibility problem: Browsers earlier than Internet Explorer 8 are not supported
Note:
Both methods are similar to ID selection and can only be selected after rendering is complete
conclusion
Master, no compatibility issues:
getElementById()
getElementsByTagName()
To understand:
getElementsByName()
getElementsByClassName()
querySelector()
querySelectorAll()