@[toc]
Document Object Model Document Object Model
The HTML DOM defines the objects and attributes of all HTML elements, as well as the methods to access them. In other words, the HTML DOM is the standard for how to get, modify, add, or delete HTML elements. The DOM allows JavaScript to modify the content of a web page at will.
-
Documentation: Documentation is a web page, and a web page is a document
-
Object: Object means to convert every node in the web page into an object.
After converting the objects, you can manipulate the web page in a pure object-oriented form
- Model: Models are used to represent nodes and relationships between nodes to facilitate page operation
- Node: Node is the most basic unit that constitutes a web page. Each part of a web page can be called a Node. There are different types of nodes.
– Common nodes
– Document node (Document), representing the entire web page
– The document node represents the entire HTML file, and all nodes in the web page are its children
The -document object exists as an attribute of the window object, so we can use it without getting it
– With this object, we can look for node objects throughout the document access and create various nodes from this object
– Element nodes, representing tags in web pages
– Various tags in HTML are element nodes, which are the most commonly used nodes
– The browser converts all the tags in the page to an element node
– Attribute Indicates the Attribute of the tag
– Indicates the attributes of each tag
– Note here that the attribute node is not a child of the element node, but a part of the element node
– The specified attribute node can be obtained from the element node
– Text node, which represents the Text content in the web page
– The text node represents the text content of the HTML tag. Any non-HTML text is a text node
– Text nodes generally exist as children of element nodes
– Generally, the element node is obtained when the text node is obtained. The text node is obtained from the element node
This is a paragraph
–
This is a paragraph
element node
-id =” HHH Attribute node
– This is a paragraph text node
– Node properties nodeType
The nodeType property returns the type of the node. NodeType is read-only.
The more important node types are:
Document loading
When a browser loads a page, it loads it from top to bottom, loading one line and executing one line. If the JS code is written to the top of the page, when the code is executed, the DOM object in the page has not been loaded, and the DOM object cannot be obtained normally, resulting in DOM operation failure.
This will give an error and there will be no hahaha when you click the button
Solution 1:
You can write js code underneath the body
<html>
<head></head>
<body>
<button id="btn">button</button>
<script>
var btn = document.getElementById("btn");
btn.onclick = function() {};</script>
</body>
</html>
Copy the code### Solution 2:
Write js code in window.onload = function(){} and the window.onload callback will not be executed until the entire page is loaded, so you can ensure that the DOM object is already loaded when the code is executed
<html>
<head>
<script>
window.onload = function() {};</script>
</head>
<body></body>
</html>
Copy the codeDOM query
Document object query
methods
Document.getelementbyid (" ID attribute value ");Query an element node object based on its ID attribute
Document. The getElementsByName (" name attribute value ");Queries a list of element node objects based on the element’s name attribute value, encapsulates them in an array, even if there is only one.
Document. GetElementsByClassName (" a class attribute value ");Queries a list of element node objects based on their class attribute value, encapsulates them in an array, and even if there is only one element, encapsulates them in an array.Internet Explorer 8 and later are not supported.
Document. The getElementsByTagName (" label name ");Query a list of element node objects by label name, encapsulate them in an array, and even if there is only one, encapsulate them in an array.
Added: innerHTML and innerText
-
These two properties are not defined in the DOM standard, but are supported by most browsers
-
The innerHTML gets the HTML tag, and the innerText automatically removes the tag
-
If you use these two attributes to set the content inside the tag, there is no difference
-
For self-closing tags, these two attributes have no meaning
Other properties and methods of the ## document object
-
Document. documentElement retrieves the HTML root element of the page and holds the HTML root tag
-
Document. body Gets the body element in the page and holds a reference to the body
-
All the elements in the document. All access page, be equivalent to the document. The getElementsByTagName (” * “);
-
document.querySelector()Use CSS selectors to query a page for an element, and if multiple elements are matched, it returns the first element found -
document.querySelectorAll()Querying a set of elements on a page according to a CSS selector wraps all matched elements into an array and returns them, even if only one was matched
Element object query
methods
element.getElementsByTagName()Returns a collection of all child elements of the specified label name
attribute
element.childNodesGets all of the current elementChild nodes, whitespace between labels will also be treated as text nodes (IE8 does not treat whitespace nodes as child nodes below)
element.childrenGets all of the current elementChild elements
Note the difference between this and the previous one, and it is recommended to use this.
-
FirstChild gets the firstChild of the current element, including blank text
-
Element. lastChild gets the lastChild of the current element, including blank text
– element. FirstElementChild get the first child of the current element, including blank text
Incompatible with IE8 and below
-
Element. parentNode gets the parent of the current element
-
Element. previousSibling gets the previousSibling of the current element, including blank text
-
Element. nextSibling gets the nextSibling of the current element, including blank text
-
Element. PreviousElementSibling a sibling elements before access to the current element
-
Element. NextElementSibling get after a sibling of the current element
<ul id="city">
<li>Beijing</li>
<li>Xi 'an</li>
<li id="ly">luoyang</li>
<li>kaifeng</li>
<li>anyang</li>
<li>nanjing</li>
<li>hangzhou</li>
</ul>
<script>
var lc=document.getElementById("ly");
var re=lc.parentNode; / / output city
var pre1=lc.previousSibling; / / output is undefined
var nex1=lc.nextSibling; / / output is undefined
var pre2=lc.previousElementSibling; // Go to Xi 'an
var nex=lc.nextElementSibling; // Output unsealed
</script>
Copy the codeThe DOM to modify
-
Document.createelement () creates an element node object based on the tag name
-
Document.createtextnode () creates a text node object from the text content
-
Document.createattribute () creates a text node object based on the attribute
-
AppendChild adds the specified child node to the parent node
-
Parent node. InsertBefore (new node, old node) Inserts a new node in front of the old node
-
Parent node. ReplaceChild (new node, old node) replaces the old node with a new node
-
RemoveChild (child node) Removes the specified child node
-
Parentnode.removechild (child node)
Such as:
Add a hangzhou
// Add a hangzhou method 1
var city=document.getElementById("city");
var li=document.createElement("li"); // Create a new
var text=document.createTextNode("Hangzhou"); // Create a new text
li.appendChild(text); // Set text to the child of Li
city.appendChild(li); // Set li as the child node of city
Copy the code
// Add a hangzhou method 2
var city=document.getElementById("city");
city.innerHTML+=Guangzhou "< li > < / li >"
Copy the code
// Add a hangzhou method 3 a combination of the first two methods, recommended
var city=document.getElementById("city");
var li=document.createElement("li");
li.innerHTML="Guangzhou";
city.appendChild(li);
Copy the codeInsert a Shanghai before Luoyang
Shanghai replaces Luoyang
var city=document.getElementById("city");
var ly=document.getElementById("ly");
var li=document.createElement("li"); // Create a new
var text=document.createTextNode("Hangzhou"); // Create a new text
li.appendChild(text); // Set text to the child of Li
// Insert a Shanghai before Luoyang
city.insertBefore(li,ly);
// Shanghai replaced Luoyang
city.replaceChild(li,ly);
Copy the codeDelete the luoyang
// delete luoyang method 1
var city=document.getElementById("city");
var ly=document.getElementById("ly");
city.removeChild(ly);
Copy the code
var ly=document.getElementById("ly");
// Delete luoyang method 2 recommended
ly.parentNode.removeChild(ly);
Copy the code