DOM, or document Object Model, is a standard programming interface recommended by the W3C for dealing with extensible markup languages. It is a platform – and language-independent application programming interface (API), it can dynamically access programs and scripts, update their content, structure and WWW document style, the importance of the DOM is self-evident, today we will learn about JavaScript DOM manipulation methods. DOM adding Refers to adding nodes. DOM operations are divided into two parts: creating a node and inserting a node. Create create node that is commonly used in API methods mainly include: 1. The document. The createElement method () : to create the specified HTML element (2) the document. The createTextNode () : Creates a text node 3. Document. CreateDocumentFrame () : create a document fragment 4. Document. The createAttribute () : create node properties 5. Node. The cloneNode () : Node.appendchild () : adds a new node at the end; node.insertbefore () : inserts a new node
This is a paragraph
This is another paragraph
Var para=document.createElement(“p”); If you need to
Element to add text, you must first create a text node. This code creates a text node: var node=document.createTextNode(” This is a new paragraph.” ); Then you must report to
The element appends the text node: para.appendChild(node); Finally, you must append the new element to an existing one. This code finds an existing element: var Element = document.getelementById (“div1”); This code appends a new element to the existing element: element.appendChild(para); The document.createAttribute() method creates and returns a new attribute node. However, this method is not very common, and node.setAttribute() is usually used when creating attributes.
This is a paragraph
This is another paragraph
newAttr .nodeValue = ‘Hello world! ‘; // The value of the title attribute is Hello world! node.setAttributeNode(attr); The node.clonenode () node.clonenode (deep) method returns a copy of the node, deep optional, indicating whether to use deep cloning, if true, all descendants of the node will be cloned, otherwise, Clone only the node itself.
This is a paragraph
This is another paragraph
cloneNode.id = “div2”; // Change the id of the cloned node to div2; document.body.appendChild(cloneNode); // Append the cloned node to the page; The main API for removing DOM nodes is node.removechild (); You can use parentNode.removeChild(child) to remove a child of the specified parentNode and return the deleted node. Note: This method is called on the parent of the removed node, not on the removed node. If the parameter node is not a child of the current node, the removeChild method will report an error.
This is a paragraph.
This is another paragraph.
Elements)
This is a paragraph.
This is another paragraph.
Find element with id=”div1″ : var parent= document.getelementById (“div1”); Find the id = “p1”
Element: var child= document.getelementById (“p1”); RemoveChild elements from parent: parent.removechild (child); InsertBefore () : inserts a new node. 3. ReplaceChild () : replaces the node. All of the above methods are children of a node of operation, that is, the parent node must be obtained in order to use them. Not all nodes have child nodes, and calling these methods on nodes that do not support child nodes will result in an error. DOM node lookup consists of element lookup and node lookup. 1. GetElementById () — access by ID; 2. GetElementsByClassName () — accessed by class name; 3. GetElementsByTagName () — accessed by tag name; 4. QuerySelector () — accessed via CSS selector (single); 5. QuerySelectorAll () – access (all) via CSS selector; For this section, visit the previous article: JavaScript-DOM access node Lookup all nodes have these properties, which are used to access the associated node nodes: 1.node.childNodes: Accesses all the direct child elements of a single element, which can be a looping array-like object. This collection of nodes can protect different types of child nodes (such as text nodes or other element nodes). 2. Node.firstchild: has the same effect as the first entry in the childNodes array (element.childNodes [0]), just a shortcut. 3. Node. LastChild: last with the.childnodes array (Element. The.childnodes [Element. The.childnodes. Length – 1]) is the same effect, is just a shortcut. 4. Node. ParentNode: access to the current Node’s parent, the parent Node, there can be only one ancestor nodes can use Node. ParentNode. ParentNode form to access. 5.Node.nextSibling: Access the next Node in the DOM tree at the same level as the current Node. 6.Node.previousSibling: Access the last Node in the DOM tree at the same level as the current Node. conclusion
DOM manipulation is still very important in JavaScript. Simply put, all interactions are based on the DOM. DOM operations, the most familiar is to add, delete, change, search DOM. Today’s content is also around these aspects of learning.