Introduction to DOM and nodes, attributes, and search nodes

This article mainly shares with you a detailed introduction to DOM, nodes, attributes, and methods of finding nodes. It has a very good reference value. Let’s follow the editor to take a look. I hope it will be helpful to everyone. I hope it can help. to everyone.

DOM (Document Object Modle) Programming interface for operating documents

DOM defines methods for representing and modifying documents. The css style sheet cannot be modified. Use DOM methods in js to change the css style of elements. , essentially adding inline styles 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.

Document, when written alone, represents the entire document, implicitly written on the upper level of the html tag, which is just the root tag in the document.

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

Method to get the element:

getElementById();

Browsers below IE8 do not distinguish the case of the id value, and match the attribute value of the element's name. 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 (text) node 3 // Text, spaces, carriage returns, etc. are all text nodes

Comment node 8

document node 9

documentfragment 11

Traverse Number of nodes:

parentNode is the parent node of the child node. 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 nodes, others are incompatible with IE9 and below)

parentElement 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

Four properties of the node:

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.

Related recommendations:

Several jQuery methods to find dom

React operates the real DOM to achieve dynamic bottom sucking

Example sharing JQuery selector and DOM node operation exercises

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