Article Directory
1 What is DOM?
The following is on the rookie website
DOM is a W3C standard, and DOM defines a standard for accessing HTML and XML documents.
The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of documents.
1.1 Define the structure of the document
The DOM specification abstracts HTML documents in web pages into document objects in memory (DOM TREE). Each node object in the genus corresponds to an element in the HTML document.
1.2 How to access the documentation?
By accessing the node object.
Document interface as document entry
The Document interface represents the entire document. The object document in JavaScript is an implementation of the Document interface.
Method 1: Directly access the node object in the document
| method | description |
|---|---|
| document.getElementsById | Get the node object through the id attribute |
| document.getElementByName | Get the node object through the id attribute |
| document/element.getElementsByTagName | Get the node object through the tag attribute |
| document/element.getElementsByClassName | Get the node object through the class attribute |
| document/element.querySelector | Get the first node object through the css selector |
| document/element.querySelectorAll | Get all node objects through css selector |
Access node objects around a node through node relationship
Parent node ( parentNode ): Get the parent node object.
( OwnerDocument ): Get the document node (root node) object to which the node belongs.
Siblings ( sibling Nodes )
nextSibling : Get Object previous sibling node
nextElementSlibling : Gets the previous sibling node object
previousSibling : Get the next sibling node object.
previousElementSibling : Get all child element node objects.
Child nodes :
childNodes : Get all child node objects
children : Get all child element node objects
hasChildNodes : Determine whether child node objects are included
childElementCount : Get the number of child element node objects
firstChild : Get the first byte point object
firstElementChild : Get the first child element node object
lastChild : Get the last byte point object
lastElementChild : Get the last child element node object