Shulou(Shulou.com)06/02 Report--

This article mainly introduces "summing up the knowledge points of DOM". In the daily operation, I believe that many people have doubts about summarizing the knowledge points of DOM. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts of "summing up the knowledge points of DOM". Next, please follow the editor to study!

1. What is DOM: Document Object Model

What is the API standard that specializes in operating web content-- W3C

Why: unify the API standard for different browsers to operate web content

Pros: almost all browsers are 100% compatible

2.DOM Tree:

What is: everything in the web page is saved in memory in a tree structure

Every item of content in a web page (elements, text, attributes, comments.) is a node object on the tree.

The only root node: document

Why: the tree structure is the best structure to preserve the relationship between superiors and subordinates.

Node object: Node

Each item in a web page is a node object on the DOM tree:

Three attributes that all nodes have:

NodeType: node typ

Front-end learning circle: 767273102, from the most basic HTML+CSS+JavaScript. JQuery,Ajax,node,angular has sorted out the actual combat data of the mobile HTML5 project.

When: as long as the type of node is judged, it includes: document 9 element 1 attribute 2 text 3 problem: the tag name of an element cannot be further distinguished.

NodeName: node name

When: as long as you further determine the tag name of an element-- instead of nodeType, it includes: document # document element full uppercase signature attribute attribute name-- not commonly used! Text # text

NodeValue: node value-not frequently used

The document null element null attribute attribute value text text content 3. Find: 4:

1. You can get the node directly without looking for it:

Document.documentElement html

Document.head head

Document.body body

Document.forms [id/i] form

two。 Find by the relationship between nodes:

When: if you have already got a node. When you want to find the surrounding nodes.

Including: 2 kinds of trees:

Node tree: a complete tree structure that contains all the content in a web page

2Category relationships:

1. Father and son: 4 kinds:

Parent node of Elm [XSS _ clean] elem

Direct child node of elem.childNodes elem

The first direct child node under elem.firstChild elem

The last direct child node under elem.lastChild elem

two。 Brother: 2 kinds:

The previous sibling element of elem.previousSibling elem

The latter sibling element of elem.nextSibling elem

Problem: disturbed by invisible empty characters!

two。 Element tree: a tree structure that contains only element nodes

2Category relationships:

Father and son: 4 kinds:

Parent element of elem.parentElement elem

Direct child elements of elem.children elem

The first direct child element under elem.firstElementChild elem

The last direct child element under elem.lastElementChild elem

two。 Brother: 2 kinds:

The former sibling element of elem.previousElementSibling elem, the latter sibling element of elem.nextElementSibling elem.

In the future, whenever you use DOM to manipulate web page content, you will use element tree.

Description: the element tree is not a new tree, but a subset of the node tree.

ChildNodes and children: dynamic set (live collection)

What is it: attribute values are not actually stored, and the DOM tree is re-searched every time the collection is accessed

Excellent: search for the first time, high efficiency! Because you don't have to return the full property.

Deficiency: every time you visit the collection, you will re-find the DOM tree, which reduces efficiency

Traverse:

Bad: for (var iTuno * layout-> paint ↑)

Css-> cssRules

How to:

If you add both parent and child elements, you should first add all child elements to the parent element in memory

Finally, the parent element is added to the page one time.

8. Delete:

Optimization: minimize the number of operations on the DOM tree

Why: reduce rearrangement and redraw

How to: 2:

1. If you add both the parent element and the child element, you should now add the child element to the parent element in memory, and finally add the parent element as a whole to the DOM Tree at once

two。 If the parent element is already on the page and you want to add multiple level child elements, you should use document fragments:

What is a document fragment: when a virtual parent element of multiple child elements is temporarily stored in memory: when multiple horizontal child elements are added to a web page at the same time, document fragments are available: 3 steps: 1. Create document snippet 2. Add child elements to document fragment 3. Add document fragments as a whole to the DOM tree

Delete: parent.removeChild (child)

Usually: child[ XSS _ clean] .removeChild (child) 9.HTML DOM common objects:

Image: create: var img=new Image ()

Select: represents a select element on the page

Attributes:

.selectedIndex gets the subscript position of the option selected by the current select

.value gets the value of the selected option in select

If the selected option does not have a value attribute, use innerHTML instead

.options gets the collection of all the option under the current select

.options.length gets the number of all option under select .options.length = 0

.length = > .options.length

Clear all option .length = 0

Method: .add (option) append an option

Problem: .add does not support document snippets. Remove (I) remove option in I location

Option: represents the next option element of select

Create: var opt=new Option (text,value)

Attribute: .text .value .index

Table: represents a table element

Manage line grouping:

Create a row grouping: var thead=table.createTHead ()

Var tbody=table.createTBody () var tfoot=table.createTFoot ()

Delete row grouping: table.deleteTHead ()

Table.deleteTFoot ()

Get row grouping: table.tHead table.tFoot table.tBodies [I]

Line grouping: control the line:

Add line: var tr= line grouping .insertRow (I)

Insert a new row fixed pattern in the I position: 1. Append a new line at the end: .insertRow () 2\. Insert a new line at the beginning: .insertRow (0)

Delete rows: line grouping .deleteRow (I)-not commonly used!

Problem: I require that the relative subscript position in the current row group cannot be obtained automatically and should be replaced by: table.deleteRow (tr.rowIndex) tr.rowIndex can automatically obtain the position of the current line in the entire table

Get row: row grouping .rows [I]

All right: manage the grid

Add case: var td=tr.insertCell (I)

Fixed usage: append a box at the end of the line: tr.insertCell () description: only td can be created, not th

Delete box: tr.deleteCell (I)

Get case: tr.cells [I]

Form: represents a form element

Get: var form=document.forms [i/id]

Attribute: .elements gets the collection of all the form elements in the form

.elements.length gets the number of form elements in the form .length = > .elements.length

Method:. Submit () instead of the submit button to manually submit the form in the program

Form elements:

Get: form.elements [i/id/name]

More simplified: form.name

Method: .focus gives focus to the current form element

At this point, the study of "summing up the knowledge points of DOM" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.