Hello everyone~ I am an honest and pure hard-working programmer! ! ! ! !
What are the common DOM operations?
1. Background introduction
What is DOM? DOM is short for Document Object Model.
The DOM is a platform- and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.
In the HTML DOM, everything is a node. DOM is HTML viewed as a tree of nodes.
2. Knowledge analysis
What is a DOM node?
Everything in an HTML document is a node
The entire document is a document node
Each HTML element is an element node
Text inside an HTML element is a text node
Each HTML attribute is an attribute node
Comments are comment nodes
3. Frequently Asked Questions
What are the common DOM operations, methods of accessing elements and DOM properties?
4. Solutions
1. Common dom operations
By using the getElementById() method.
By using the getElementsByTagName() method
By using the getElementsByClassName() method.
2. Methods of accessing properties
getElementsByTagName() 方法
Returns a collection of objects with the specified tag name.
The order in which elements are returned is their order in the document.
Strings passed to the getElementsByTagName() method can be case-insensitive.
getElementsByClassName() method
Get all elements with the specified class name:
The getElementsByClassName() method returns a collection of all elements with the specified class name in the document as a NodeList object.
A NodeList object represents an ordered list of nodes. NodeList object We can access the nodes in the list by the node index number in the node list (the index number starts from 0).
You can use the length property of the NodeList object to determine the number of elements of the specified class name, and loop through the elements to get the one you need.
getElementById() method
The getElementById() method returns a reference to the first object with the specified ID.
If you need to find a specific element in the document, the most efficient method is getElementById().
When manipulating a particular element of a document, it's a good idea to give that element an id attribute, give it a unique name (within the document), and then use that ID to find the desired element.
Common DOM properties
1. innerHTML property
The easiest way to get the content of an element is to use the innerHTML attribute.
The innerHTML property is useful for getting or replacing the content of an HTML element.
2. nodeName property
The nodeName attribute specifies the name of the node.
nodeName is read-only
The nodeName of the element node is the same as the tag name
The nodeName of the property node is the same as the property name
The nodeName of a text node is always #text
The nodeName of a document node is always #document
3. nodeValue property
The nodeValue property specifies the value of the node.
The nodeValue of the element node is undefined or null
The nodeValue of a text node is the text itself
The nodeValue of the property node is the property value
5. Coding practice
dome
6. Think outside the box
How to modify the html content and css style of an element
Change HTML content
document.getElementById("p1").innerHTML="New text!";
Change CSS styles
document.getElementById("p2").style.color="blue";
7. References
8. More discussion
1. In addition to these three methods, what other methods are there?
solve:
document/element.querySelector('CSS selector');
document/element.querySelectorAll('CSS selector');
document.createTextNode('text content'); etc.
2. What is your understanding of subscripting?
solve:
Subscripts start from 0
3. What other properties can be used to change CSS styles?
solve:
classNane
Skill Tree - IT Cultivation Institute
It is a free online IT technology learning platform.
Each occupation provides about 15 tasks for beginners to learn more quickly and efficiently;
All tasks are skill points extracted from real projects.
Emphasizes the learning method of actual combat drills + self-study priority + mentoring by senior teachers,
A strict daily newspaper system, a happy atmosphere of communication, discussion and learning, and countless brothers and sisters help you solve your doubts!