Some summary of using DOM

This time I will bring you some summary of using DOM, what are the precautions when using DOM, the following is a practical case, let's take a look.

DOM is a language-neutral API for accessing html and xml documents. DOM1 level visualizes html and xml documents as a jagged node tree. You can use javascript to manipulate this number of nodes, thereby changing the appearance and structure of the Dieten document.

DOM is composed of various nodes. A brief summary is as follows:

The most basic node type is Node, which is used to abstractly represent an independent part of the document. All other types are Inherited from Node.

.Document type represents the entire document, which is the root node of a group of hierarchical nodes. In JavaScript, the document object is an instance of Document. Using the document object, there are many ways to query and obtain nodes. First, it can get the child nodes of the document, such as var hetml=document.documentElement;//Get the reference to html. The second is that it can obtain document information, for example: var original=document.tittle; document.tittle=”new title”;//Set the title of the document. The third is to find elements, including getElementById(), and getElementByName();

Element nodes represent all elements relative to html and xml, and can be used to operate the content and attributes of these elements.

There are also some node types, which respectively represent document content (text), comments (comment), document type (Documentype), CDATA area (CDATAsection) and document fragments.

The operation of accessing the DOM is intuitive in many cases, but there are still some problems when processing script and style elements. Since these two elements contain script and style information, browsers usually treat them as Discrimination.
The key to understanding DOM is to understand the impact of DOM on performance. DOM is often the most expensive part of the program in JavaScript, and because there are many problems accessing Nodelist, NoList causes the most problems, and NdeList objects are dynamic. This means that every time you access the NodeList object, you have to run a query. In view of this, the best way is to reduce DOM operations.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

js design pattern - the use of singleton pattern

Why should the front end use modularity?

The above is the detailed content of Some summary of using DOM. For more information, please follow other related articles on the PHP Chinese website!