How to operate DOM in JS

DOM (Document Object Model) is a standard of W3C (World Wide Web Consortium). DOM defines the standard for accessing HTML and XML: W3C Document Object Model (DOM) is a platform- and language-neutral interface, which allows dynamic access by programs and scripts. and update the document's content, structure and style.

The W3C Dom standard is divided into 3 different parts: 1. Core DOM - a standard model for any structured document 2. XML DOM - a standard model for XML documents 3. HTML DOM - for HTML documents The standard model

where in the HTML DOM, everything is a node, and the DOM is HTML.1. The entire document is a document node2. Each HTML element is an element node3. The text within the HTML element is a text node 4. Each HTML attribute is an attribute node 5. Comments are comment nodes

HTML DOM treats HTML documents as a tree structure, which is called a node tree. HTML DOM, all nodes in the tree can be accessed through JavaScript, all HTML nodes (elements) can be modified, and nodes can be created or deleted.

Some commonly used HTML DOM methods: 1.getElementById( id)-Get the node (element) with the specified id 2.appendChid(node)-Insert a new child node (element) 3.removeChild(node)-Remove the child node (element)

Some commonly used HTML DOM attributes: 1.innerHTML-the text value of the node (element) 2.parentNode-the parent node of the node (element) 3.childNodes-the child node of the node (element) 4..attributes-the attribute node of the node (element)

DOM operation

Create element

var newp = document.createElement("p");Set class name newp.className = "item";Set ID

newp.id = "first";Set the background color newp.style.background = "red";Add the element box into the body

Get the element to be added first

var body = document.getElementsByTagName("body")[0];var box = document.getElementsByClassName("box")[0];body.appendChild(newp);//There are two contents in body, one is newp and the other is box //The current situation is to insert the content of newp behind the box

If you want to insert the content in p into the front of the box, the following is as follows: body.insertBefore(newp, box); delete the element body.removeChild( box);//Remove the box label box.remove();DOM attribute

Node: Label text annotation statement (doctype)

You can obtain all nodes of the element order through the following method: console. log(box.childNodes); Get the child node of the label type. The obtained node is a label console.log(box.cheildren[0]); size position console.log(newp.offsetWidth);//The printing width includes the border console .log(newp.clientWidth);//Does not contain borders or scroll bars (visible area) console.log(newp.scrollHeight);//It is also the vertical/horizontal scroll distance of the element, or the element scroll Walk through the invisible part of overflow and process the excess part. Visible is visible by default. overflow:scroll; //The position of the scroll bar appears relative to the position of the parent. console.log(newp.offsetTop); console.log(newp.offsetLeft) ;The distance the child element scrolls up. Except for scrollTop, the above elements are read-only console.log(newp.scrollTop)

Timer

One-time timer, can only be used once

Writing method 1: var time = setTimeout(function(){ console.log("One-time timer"); },1000);Writing method 2: function f1(){ console.log("One-time timer"); Timer"); } setTimeout(f1,1000); Clear one-time timer clearTimeout(time); Loop timer, the function will be executed every once in a while

Writing method 1: var timer = setInterval (funtion(){ console.log("Loop timer"); })var timer = setInterval(f2, 1000); Clear the loop timer clearInterval(timer); DOM is an HTML document structure, which is actually to enable JS to operate html elements According to a specification formulated, the root of DOM is the document object. This object has many attributes and placement methods, such as creating nodes, copying nodes, removing nodes, modifying attributes, etc. The emergence of DOM objects is to facilitate JavaScript to operate HTML tags. DOM is comprehensively called Document Object. Model (Document Object Model) is also based on HTML documents. It is provided to Javascript to dynamically (such as click events) modify the state of the document, so operating the DOM is operating the HTML document object (each tag)

CSS is just an HTML document style, and javascript can combine HTML and CSS, which is what was previously called DHTML (dynamic HTML)

DOM is to define the nodes in XML (or HTML) into a basic unified The object data can provide technical specifications controlled by programming language (such as javascript)

You can use javascript language to operate the DOM to change the web page. In order to change the web page, you must tell Javascript which node to operate, which is to operate the DOM

Manipulating DOM allows you to change the interaction mode of web pages. All web page interactions rely on this DOM technology. Even without Javascript, you can use other languages ​​​​to manipulate DOM

DOM is a tree , the values ​​​​and the leaves are numbered. You tell a script a function to find which leaf on that branch, and what changes should be made to this leaf

When you enter data in the search bar of Zhihu At this time, Javascript captures your input, uses an asynchronous query to the server, and dynamically displays the search results.

When you slide down, Javascript captures the distance you slide, and determines whether the DOM has changed based on the distance, and then allows the top navigation bar to scroll with the browser window to prevent you from looking back.

When you click the modify button, javascript captures the mouse click event of this button and feeds back an editable answer to you

Javascript cannot really change the DOM, it only changes the presented content. When you refresh You will find that the presented content disappears.

But you can pass these changes to the back-end language interface in the form of requests, and the back-end language PHP Python Java Node, etc. will perform subsequent operations. They After receiving your request, modify the server data, so that the changes will take effect and will not disappear after refreshing.

However, there is no need for the server to mix in user interactions such as pop-up windows sliding over and changing color, etc. The interaction is only temporarily used up and will become the default. It does not need to be saved to the server. Just ensure that there is feedback during the interaction.

HTML expresses the static structure (the basic elements of the web page and the basic functions of each element) What meaning can the basic function of the element produce, and what kind of content can this meaning produce)

CSS presents hierarchical beautification (the basic and special attributes of the element, the shape, state of the element, and the layout of the element)

Javascript is responsible for dynamic interaction (operating DOM using AJAX for asynchronous refresh and interacting with the server). The link introduced is not bad. https://www.zhihu.com/question/34219998/answer/58211568DOM is the interface for Javascript to operate web pages. , the full name is Document Object Model (Document Object Model). Its function is to convert the web page into a javascript object, so that Javascript scripts can be used to perform various operations (such as adding and deleting elements, etc.)

The browser will, based on the DOM model, Parse the documented structure (such as HTML or XML, etc.) into a series of nodes, and then parse these nodes into a tree structure (Dom Tree). All nodes and the final tree structure have standardized external interfaces, so the DOM can Understood as a programming interface for web pages. DOM has standard international standards. We are currently using DOM3

Strictly speaking, DOM does not belong to Javascript, but DOM operations are the most common tasks of Javascript, and the most common tasks of Javascript are the most Common DOM manipulation languages.

DOM

DOM, the Document Object Model, is a standard of W3C (World Wide Web Consortium)

DOM defines a standard for accessing HTML and XML: W3C Document Object Model (DOM) is platform-neutral and Language interface, which allows programs and scripts to dynamically access and update the content, structure and style of the document

The W3C Dom standard is divided into 3 different parts: 1. Core DOM - for any structured document Standard Model 2.XML DOM - Standard Model for XML Documents 3.HTML DOM - Standard Model for HTML Documents

In HTML DOM, everything is a node, and DOM is regarded as the number of nodes HTML.1. The entire document is a document node 2. Each HTML element is an element node 3. The text within an HTML element is a text node 4. Each HTML attribute is an attribute node 5. Comments are comment nodes

HTML DOM treats HTML documents as a tree structure. This structure is called a node tree. Through HTML DOM, all nodes in the tree can be accessed through JavaScript. All HTML nodes (elements) can be modified and created. Or delete a node.

Some commonly used HTML DOM methods: 1.getElementById(id)-get the node (element) with the specified id 2.appendChid(node)-insert a new child node (element) 3 .removeChild(node)-Delete child nodes (elements)

Some commonly used HTML DOM attributes: 1.innerHTML-the text value of the node (element) 2.parentNode-the parent node of the node (element) 3.childNodes -Child node 4 of node (element)..attributes-Attribute node of node (element)

DOM operation

Create element

var newp = document.createElement(" p");Set the class name newp.className = "item";Set the ID

newp.id = "first";Set the background color newp.style.background = "red";Add the element box into the body

Get the elements to be added first

var body = document.getElementsByTagName("body")[0];var box = document.getElementsByClassName("box")[0];body. appendChild(newp);//There are currently two contents in the body, one is newp and the other is box//The current situation is to insert the content of newp behind the box

If you want to insert the content of p into The front of the box is as follows: body.insertBefore(newp, box); delete element body.removeChild(box);//remove box label box.remove();DOM attribute

Node: Label text annotation statement ( doctype)

You can obtain all the nodes of the element order through the following method: console.log(box.childNodes); Get the child node of the label type, and the obtained node is a label console.log(box.cheildren[0 ]); Size position console.log(newp.offsetWidth); //Print width includes border console.log(newp.clientWidth); //Does not include border or scroll bar (visible area) console.log(newp. scrollHeight);//It is also the distance that the element has been scrolled vertically/horizontally, or the invisible part of the element rolled away by the overflow process. The excess part is visible by default. overflow:scroll; //The position of the scroll bar appears relative to the positioning parent. A position of the level console.log(newp.offsetTop); console.log(newp.offsetLeft); A distance when the child element is scrolled up. Except for scrollTop, the above elements are all read-only console.log(newp.scrollTop)

Timer

One-time timer, can only be used once

Writing method 1: var time = setTimeout(function(){ console.log("One-time timer") ; },1000);Writing method 2: function f1(){ console.log("One-time timer"); } setTimeout(f1,1000);Clear the one-time timer clearTimeout(time);Loop timer, every After a period of time, the function will be executed once

Writing method 1: var timer = setInterval(funtion(){ console.log("Loop timer"); })var timer = setInterval(f2, 1000);Clear Loop timer clearInterval(timer); DOM is an HTML document structure. It is actually a specification formulated to enable JS to operate html elements. The root of DOM is the document object. This object has many attributes and placement methods, such as creating nodes, copying nodes, and removing nodes. The emergence of DOM objects such as modifying attributes is to facilitate JavaScript to operate HTML tags. DOM is a Document Object Model (Document Object Model), which is also based on HTML documents. It is provided to Javascript to dynamically (such as click events) modify the status of the document. , so operating the DOM is operating the HTML document object (each tag)

CSS just styles the HTML document, and javascript can combine HTML and CSS, which is what was previously called DHTML (dynamic HTML)

DOM is a technical specification that defines the nodes in XML (or HTML) into basically unified object data and can provide program language (such as javascript) control.

You can use javascript language to operate DOM. Change the web page. In order to change the web page, you must tell Javascript which node to operate. This is operating the DOM

Manipulating the DOM allows you to change the interaction method of the web page. All web page interactions rely on this DOM technology, even if it is not used Javascript, you can also use other languages ​​​​to operate DOM

DOM is a tree, the values ​​​​and leaves are numbered, you tell a script a function to find which leaf of that branch, for this one What changes does Ye Ye want to make

When you enter data in Zhihu’s search bar, Javascript captures your input, uses asynchronous query to the server, and dynamically displays the search results.

When you slide down, Javascript captures the distance you slide, and determines whether the DOM has changed based on the distance, and then allows the top navigation bar to scroll with the browser window to prevent you from looking back.

When you click the modify button, javascript captures the mouse click event of this button and feeds back an editable answer to you

Javascript cannot really change the DOM, it only changes the presented content. When you refresh You will find that the presented content disappears.

But you can pass these changes to the back-end language interface in the form of requests, and the back-end language PHP Python Java Node, etc. will perform subsequent operations. They After receiving your request, modify the server data, so that the changes will take effect and will not disappear after refreshing.

However, there is no need for the server to mix in user interactions such as pop-up windows sliding over and changing color, etc. The interaction is only temporarily used up and will become the default. It does not need to be saved to the server. Just ensure that there is feedback during the interaction.

HTML expresses the static structure (the basic elements of the web page and the basic functions of each element) What meaning can the basic function of the element produce, and what kind of content can this meaning produce)

CSS presents hierarchical beautification (the basic and special attributes of the element, the shape, state of the element, and the layout of the element)

Javascript is responsible for dynamic interaction (operating DOM using AJAX for asynchronous refresh and interacting with the server). The link introduced is not bad. https://www.zhihu.com/question/34219998/answer/58211568DOM is the interface for Javascript to operate web pages. , the full name is Document Object Model (Document Object Model). Its function is to convert the web page into a javascript object, so that Javascript scripts can be used to perform various operations (such as adding and deleting elements, etc.)

The browser will, based on the DOM model, Parse the documented structure (such as HTML or XML, etc.) into a series of nodes, and then parse these nodes into a tree structure (Dom Tree). All nodes and the final tree structure have standardized external interfaces, so the DOM can Understood as a programming interface for web pages. DOM has standard international standards. We are currently using DOM3

Strictly speaking, DOM does not belong to Javascript, but DOM operations are the most common tasks of Javascript, and the most common tasks of Javascript are the most Common DOM manipulation languages.

相关推荐：

js中DOM知识点分享

The above is the detailed content of How to operate DOM in JS. For more information, please follow other related articles on the PHP Chinese website!