Detailed introduction to DOM, nodes, attributes, and methods of finding nodes

The following is an introduction to DOM and methods for finding nodes, attributes, and nodes that I will share with you. It has a very good reference value.

DOM (Document Object Modle) Programming interface for operating documents

DOM defines methods for representing and modifying documents , the css style sheet cannot be modified. Using the DOM method in js to change the css style of the element is essentially adding an interline style to the element.

The DOM object is the host object, which is used to operate a collection of HTML and xml functional objects. xml——>xhtml——>html4.0——>html5

The difference between HTML and xml: There is basically no difference except that xml can customize tags. json replaced.

document, when written alone, it represents the entire document, implicitly written on the upper layer of the html tag, and html is just the root tag in the document.

Note: BOM and DOM grouped things are array-like, not arrays.

Method to get elements:

getElementById();

Browsers below IE8 do not distinguish the size of the id value Write, and match the element's name attribute value. Since the id value will be modified in the background, try not to use it or use it less.

getElementsByTagName(); tag name, all browsers support

getElementsByClassName(); browsers IE8 and below do not support

getElementsByName(); in older versions , only the name of the tag that can submit the request will take effect (form, form element, img, iframe)

document.querySelector(); css selector, IE7 and below are not compatible, and are not real-time.

document.querySelectAll();

Node type:

Element node 1

Attribute node 2

Text node 3 // Text, spaces, carriage returns, etc. are all text nodes

Comment node 8

document node 9

documentfragment 11

Number of traversed nodes:

parentNode is the parent node of the child node, and the final parentNode node is the document node.

childNodes All child nodes of the parent node, element nodes, comment nodes, text nodes

firstChild first child node

lastChild last child node

nextSibling Next sibling node

previousSibling Previous sibling node

Number of traversed element nodes: (Except children node, others are IE9 and the following are not compatible)

parentElement is the parent element node of the element. The final parent element node is the html element, and the document is a self-contained node.

children are the child nodes of the element under the parent element.

node.childElementCount === node.children.length The number of element child nodes of the current child node. Use children.length.

firstElementChild The first element child node

lastElementChild The last element child node

nextElementSibling, previousElemnetSibling

The four nodes Attributes:

nodeName Except for element nodes, the returned results have a '#' in front of them, and element nodes return uppercase tag names, and the types are read-only.

nodeValue is only used for text nodes and comment nodes, and can be read and written.

nodeType returns a number, which represents the corresponding node type. Read-only

attributes The attribute collection of the element node.

node.hasChildNodes() method determines whether there are child nodes in the parent node, and the return result is a Boolean value.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

js Implementing mutual transfer of Json code between front and backend

$http service Post method passingjson parameter case detailed explanation

What are the frequent mistakes made by novice JS users

The above is the detailed content of Detailed introduction to DOM, nodes, attributes, and methods of finding nodes. For more information, please follow other related articles on the PHP Chinese website!