The DOM model treats the entire document (XML and HTML) as a tree structure and represents the document with a Document object.

According to the W3C DOM specification, the DOM is an application programming interface (API) for HTML and XML, and the DOM maps the entire page to a file composed of hierarchical nodes. There are three levels: Level 1, Level 2 and Level 3.

DOM stipulates that each component in a document is a Node. It can be said that an HTML document is a collection of nodes. Common DOM nodes are as follows:

  • Document node (Document) : Represents the entire Document

  • Element node: A tag in a document

  • Text node (Text) : Text in the tag

  • Attribute node (Attr) : Represents an attribute for which an element has an attribute

DOM node type

The NodeType attribute indicates the NodeType, as listed in 12 below

The node type

describe

1

Element

On behalf of the element

2

Attr

On behalf of the property

3

Text

Represents the textual content of an element or attribute.

4

CDATASection

Represents the CDATA portion of the document (text that is not parsed by the parser).

5

EntityReference

Represents an entity reference.

6

Entity

Represents the entity.

7

ProcessingInstruction

Represents processing instructions.

8

Comment

Stands for comment.

9

Document

Represents the entire document (the root of the DOM tree).

10

DocumentType

Provides interfaces to entities defined for documents

11

DocumentFragment

Represents a lightweight Document object that can hold part of a Document

12

Notation

Symbol that represents a declaration in a DTD.

DOM node relationship

nodeType

Returns the numeric value of the node type (1 to 12)

nodeName

Element node: tag name (uppercase), attribute node: attribute name, text node :#text, document node :#document

nodeValue

Text node: contains text, attribute node: contains attribute, element node, and document node: NULL

hasChildNodes

Returns true if one or more nodes are included

contains

Returns true for descendant nodes

isEqualNode

Both nodes refer to the same object: the passing node and reference node’s reference to the same object return true

isSameNode

Refers to whether two nodes are of the same type, have equal Attributes /childNodes, etc

compareDocumentPostion

Determine the various relationships between nodes

parentNode

The parent node

parentElement

Parent node tag element

childNodes

All child nodes

children

Layer 1 child node

firstChild

The first child is in the form of a Node object

firstElementChild

The first child tag element

lastChild

The last child node

lastElementChild

The last child tag element

previousSibling

Last sibling node

previousElementSibling

Last sibling tag element

nextSibling

Next sibling node

nextElementSibling

Next sibling tag element

childElementCount

Number of first-level child elements (excluding text nodes and comments)

ownerDocument

Document node that points to the entire document

The difference between nodes and elements

Element is contained in node and its nodeType is 1

ParentElement matches when parent is an element and parentNode matches when parent is a node.

If the nodeType of the parent node is not 1, that is, it is not an Element node, its parentElement is null

Document Document object element lookup

The BOM core is window, the DOM core is Document

Get the Element object

getElementById()

One argument: the ID of the element tag

getElementsByTagName()

One argument: element tag name

getElementsByName()

One argument :name The name of the property

getElementsByClassName()

One argument: A string containing one or more class names

querySelector()

Receives CSS selectors and returns the first element matched, or null

querySelectorAll()

Receives CSS selectors, returns an array, or returns []

ELEMENT object ELEMENT operation

All the DOM object can be thought of as a node, in addition to CURD the DOM tree (the appendChild/removeChild/replaceChild), and other operations

nodeName

The tag name of the access element

tagName

The tag name of the access element

createElement()

Create a node

appendChild()

Adds the node at the end and returns the new node

insertBefore()

Insert a node before a reference node, with two parameters: the node to be inserted and the reference node

insertAfter()

Insert the node after the reference node with two parameters: the node to be inserted and the reference node

replaceChild()

Replace a node with two parameters: the node to be inserted and the node to be replaced (removed)

removeChild()

Remove node

cloneNode()

Clone, a Boolean parameter, true for deep copy, false for shallow copy

importNode()

Copy a node from a document with two parameters: the node to copy and a Boolean (whether to copy child nodes)

insertAdjacentHTML()

Insert text, two arguments: the position to insert and the text to insert

  • “Beforebegin “, inserted before the element

  • “Afterbegin “, inserted before the first child of the element

  • “Beforeend “, inserted after the last child of the element

  • “Afterend “, inserted after the element

Node attributes

attributes

Gets all tag attributes

getAttribute()

Gets the specified tag properties

setAttribute()

Sets the specified label genus

removeAttribute()

Removes the specified label genus

createAttribute

Create a properties

Reference article:

ECMAScript, BOM, DOM (core, browser object model and the document object model (DOM) www.cnblogs.com/best/p/8028…

JavaScript learning summary (3) the BOM and the DOM, rounding segmentfault.com/a/119000000…

Javascript BOM and DOM operation explanation (1) blog.csdn.net/openbox2008…

JavaWeb: JavaScript (BOM and DOM) blog.csdn.net/weixin\_423…

The HTML DOM Event object www.w3school.com.cn/jsref/dom_o…

The XML DOM object Element – www.w3school.com.cn/xmldom/dom_…

JAVAScript DOM and variance analysis of BOM www.cnblogs.com/fjner/p/589…

Reprint the home station article talk about BOM and DOM (2) : the DOM node level/properties/selector/relationship/operation, rounding, please indicate the source: www.zhoulujun.cn/html/webfro…