Analysis of the difference between Node objects and Element objects in DOM

The content of this article is about the analysis of the difference between Node objects and Element objects in DOM. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Node object

The Node object is provided in the Dom standard specification. This object mainly provides properties and methods for parsing the DOM node tree structure. The DOM tree structure mainly relies on nodes for parsing. , becomes the DOM node tree structure. The Node object is the main entrance to parse the DOM node tree structure. The properties and methods provided by the Node object can realize operations such as traversing nodes and inserting nodes.

Judge node type

Element name.nodeName; - Get the label name (uppercase)
Element name.nodeType; - Get the type of element
Element name.nodeValue; - Get the text content of the element

Get the parent node

Node name.parentNode; - Get the parent node of the child node
Node name.parentElement; - Get its parent element node

Get the child node

Node name.childNodes ; - Get all child nodes under the parent node
Node name.firstChild; - Get the first child node under the parent node
Node name.lastChild; - Get the last child node under the parent node

Get adjacent sibling nodes

Node name.previousSibling; - Get the previous sibling element
Node name.nextSibling; -Get the next sibling element

appendChild() method

Parent node.appendChild (child node); - Add child nodes to the parent node, by default, add them from the end
Parent node.insertBefore (newly created node, old node in the page); - Add to the parent element The specified child node is added in front of it

Remove node

Parent node.removeChild(child node); - Delete the specified child node

Replace node

Parent node.replaceChild(new child node, target node); - You can replace the selected target child node in the parent node

Copy node

The copied target node.cloneNode( true); - true means deep cloning, which will clone everything in the node, false means non-deep cloning, which will not clone the text. The default is false

textContent attribute

Node.textContent; - Output the text content in the node

Element object

The Element object is provided in the DOM standard specification, which provides the properties and methods of all elements in the HTML page. The DOM standard specification The Node object is provided, which mainly relies on the DOM node tree structure to access and update the content of the HTML page. The Element object is provided in the DOM standard specification, which mainly relies on the DOM element tree structure to access and update HTML page content. All HTML page elements are HTMLElement objects, and this object is inherited from the Element object

Get child elements

Parent element.firstElementChild; - Get the first child element in the parent element
Parent element.lastElementChild; - Get the last child element in the parent element

Get the phase Neighboring sibling element

Element.previousElementSibling; - Get the previous sibling element of the element
Element.nextElementSibling; - Get the next sibling element of the element

Attribute operation

Element.getAttribute('Attribute name'); - Get the specified attribute of the specified element
Element.setAttribute('Attribute name', 'Attribute value') - Set the attribute name and attribute value of the specified element
Element.removeAttribute ('Attribute name'); - Delete the attribute of the specified element
Element.hasAttribute('Attribute name'); - Determine whether the specified attribute of the specified element exists, and the result returns a Boolean value

innerHTML attribute

Element.innerHTML; - Get the HTML code of the specified element
Parent element.innerHTML=HTML code; - Add HTML code to the parent element and write the HTML code directly in the string, but this method has security issues

Related recommendations:

Jquery objects and javascript objects, that is, DOM objects, are converted to each other_jquery

##Attributes of DOM and XMLHttpRequest objects and method, domxmlhttprequest

The above is the detailed content of Analysis of the difference between Node objects and Element objects in DOM. For more information, please follow other related articles on the PHP Chinese website!