It – Small class of Suzhen Academy
directory
- background
- Knowledge of anatomy
- Q&A
- The solution
- Coding of actual combat
- Expand the thinking
- reference
- More discussion
1. Background
DOM (Document Object Model) is an API (application programming interface) for HTML and XML documents. The DOM represents a hierarchical tree of nodes, allowing developers to add, remove, and modify portions of a page.
2. Knowledge analysis
What is DOM?
- DOM stands for Document Object Model.
- DOM is a programming interface, it’s a set of apis, it’s a set of apis for HTML documents, XML documents, etc.
- The DOM is used to access or manipulate node elements in HTML documents, XHTML documents, and XML documents.
- JavaScript can access and manipulate all elements of an HTML document through the DOM.
- JavaScript is a scripting language, and DOM is used to get and manipulate node attributes in HTML documents.
- JavaScript typically obtains and manipulates HTML attributes through the DOM.
What are DOM nodes?
- Everything in an HTML document is a node
- The entire document is a document node
- Each HTML element is an element node
- The text inside an HTML element is a text node
- Each HTML attribute is an attribute node
- Comments are comment nodes
What are the common DOM operations?
- Find nodes
- The new node
- Adding a New Node
- Remove nodes
- Set the style
Common methods to find nodes are:
- Document.getelementbyid (‘ ID attribute value ‘); Returns a reference to the object with the specified ID
- Document. The getElementsByClassName (‘ class attribute value); Returns a collection of objects with the specified class
- Document. GetElementsByTagName (‘ tag name ‘); Returns a collection of objects with the specified label name
- Document. The getElementsByName (‘ name attribute value); Returns the combination of objects with the specified name
- The document/element. QuerySelector (‘ CSS selectors); Only the first matched element is returned
- The document/element. QuerySelectorAll (‘ CSS selectors); Returns all matched elements
- document.documentElement; Gets the HTML tag from the page
- document.body; Gets the BODY tag on the page
- document.all[”]; Gets the object collection type of all element nodes in the page
Common methods for creating a node are as follows:
- Document.createelement (‘ element name ‘); Create a new element node
- Document.createattribute (‘ Attribute name ‘); Create a new property node
- Document.createtextnode (‘ Text content ‘); Create a new text node
- Document.createcomment (‘ comment node ‘); Create a new comment node
- document.createDocumentFragment( ); Create the document fragment node
Common methods for adding new nodes are:
- element.setAttribute( attributeName, attributeValue ); Adds the specified attribute to the element and sets the attribute value
- element.setAttributeNode( attributeName ); Add attribute nodes to elements
- To add a new element to the HTML DOM, you must first create the element (the element node) and then append it to an existing element.
-
- Document.createtextnode (‘ Add text content ‘); Create a new text node
- 2)parent. AppendChild (new node created); Append a new node to the last child of the parent node or parent.insertBefore(newChild, existingChild); Parentnode. removeChild(existingChild); parentNode.removeChild(existingChild) DOM needs to know what element you want to delete, and its parent element. Common solutions: find the child element you want to remove and use its parentNode attribute to find the parent element: var child= document.getelementById (“p1”); child.parentNode.removeChild(child); Set style ele.style.styleName = styleValue; Set the CSS style for the ele element
3. Frequently Asked Questions
- Are DOM and HTML the same thing?
- How does DOM relate to JavaScript?
- Write the details
- How do I get adjacent nodes?
- Can nodes be copied?
4. Solutions
Are DOM and HTML the same thing?
DOM is an API. HTML(Hyper Text Markup Language) is a Markup Language. HTML is treated as an object in the DOM model standard. The DOM provides a programming interface, but it doesn’t actually manipulate the content in HTML. Front-end engineers, however, typically work with HTML on the browser side. Every Web browser uses the DOM, so pages can be accessed by scripting languages. All browsers use Javascript as the default scripting language. Therefore, HTML can be operated directly by DOM model on the browser side, loading or directly inserting Javascript scripts through script tags, and operating HTML files on the browser side directly through DOM. It’s this seamless blend that makes it easy to confuse the concepts of DOM and HTML.
How does DOM relate to JavaScript?
Javascript can directly access and manipulate the content of web documents through the DOM, which was originally designed as an API for Javascript manipulation. But at the end of the day, they were two separate entities. And Javascript isn’t the only programming language that can use the DOM; Python, for example, can also access the DOM. So DOM is not an API for Javascript, nor is it an API in Javascript. But JavaScript can access and manipulate HTML and XML document content through the DOM.
Write the details
Element does not add an S only when looking for an ID. For newcomers, if you don’t pay attention to details, you might end up with a typo and lose track of the error for a while
How do I get adjacent nodes?
NeborNode. PreviousSibling: access to the known node of the adjacent nodes on a nerbourNode. NextSlbling: access to the next node of known nodes
Can nodes be copied?
cloneNode(true | false); Copy a node parameter: Whether to copy all properties of the original node
5. Coding
<! DOCTYPE html> <html> <head> <meta charset="utf-8"</title> <meta name="viewport" content="Width = device - width, initial - scale = 1.0, the maximum - scale = 1.0, user - scalable = no">
</head>
<body style="font-size:20px;">
<h1 id="id" class="class">AAAAAAA</h1>
<h2 class="class">BBBBBB</h2>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<input type="text" name="kuang" value="Input field" >
<p>CCCCCCCC</p>
<p>DDDDDDDD</p>
<p>EEEEEEEE</p>
<div id="div1">
<p id="p1"Word-wrap: break-word! Important; "> < p style =" max-width: 100%; </p> <p id="p2"< p style = "max-width: 100%; clear: both; min-height: 1em; </p> </div> <button onclick="create()">create</button>
<button onclick="set()">set</button>
<button onclick="del()">delete</button>
<button onclick="change()">change</button> <script> var a = document.getelementbyid ("id"); // Return a reference to console.log(a) with the specified object ID; var b = document.getElementsByClassName("class"); Console.log (b); // Return console.log(b); var c = document.getElementsByTagName("li"); Console.log (c); // Return console.log(c); var d = document.getElementsByName("kuang"); // Return console.log(d), a collection of objects with the specified name; var e = document.querySelector("p"); // Returns the first matching element console.log(e); var f = document.querySelectorAll("p"); // Return all matching elements console.log(f); var g = document.documentElement; // Get the HTML tag console.log(g) from the page; var h = document.body; // Get the BODY tag console.log(h); var i = document.all; Console.log (I); // Create a nodefunction create(){
// var para=document.createElement("p"); // // Create a new <p> element // var node=document.createTextNode("This is the new paragraph."); // // add text to the <p> element by creating the text node // para.appendChild(node); // // appends the text node to the <p> element // var element= document.getelementbyid ("div1"); // // append the new element to an existing element, find an existing element // element.appendChild(para); // // Append a new element to the existing element var Element = document.getelementById ("p2");
element.innerHTML="New paragraph"; // Insert text content} // add new nodesfunction set() {/ / adds specified attributes to elements and document set attribute value. The getElementsByTagName ("input")[0].setAttribute("type"."button"); } // Delete the nodefunction delVar parent= document.getelementById (){// To delete an HTML element, you must first obtain the element's parent."div1"); / / find the id ="div1"Var Child = document.getelementById ("p1"); / / find the id ="p1"The <p> element parent. RemoveChild (child); // Remove the child from the parent} // Set the stylefunction change() {
var j =document.getElementById("id");
j.style.backgroundColor="red";
}
</script>
</body>
</html>
Copy the code6. More discussion
What are common DOM-events?
- Onclick event – when the user clicks
- Onload event – the user enters
- Onmouseover event – mouseover
- Onmouseout event – Mouse out
- Onmousedown event – Mouse down
- Onmouseup event – Mouse up
- http://www.runoob.com/jsref/dom-obj-event.html/HTML DOM events
What are the advantages and disadvantages of DOM?
DOM has the following advantages: easy to use. When using DOM, all XML document information is stored in memory, and traversal is simple. XPath is supported to enhance the ease of use. The main disadvantages of DOM are: low efficiency, slow parsing speed, high memory usage, and almost impossible to use for large files. In addition, the inefficiency is significant because parsing using the DOM creates an object for each element, attribute, processing-Instruction, and comment of the document. The creation and destruction of a large number of objects used in the DOM mechanism will undoubtedly affect its efficiency.
7. References
-
http://www.runoob.com/htmldom/htmldom-tutorial.html/ novice tutorial – HTML DOM tutorial
-
Common operations – GraceZy – http://www.cnblogs.com/yinshuige/p/5812095.html/DOM blogs
-
thanks
-
Thank you for watching