Dom Study Notes

Dom

Document Object Model

 

Document: HTML page

Document Object: Elements on the page

Document Object Model: The Document Object Model is W3C.

A set of standards defined to allow js to operate on elements on the page

Dom considers the current document as a node of the document tree.

At the same time, many methods are defined to operate each element.

Each method has its own attributes.

 

Dom Basics

Childnodes [children is not recommended for compatibility issues]

Yes. The property is not enclosed in brackets. He has an object before which to add the object to the call.

It only contains Sublevel 1 nodes and does not contain Sublevel 1 nodes.

Illegal nesting will also be included in the total number

Element. childnodes (subnode list set) read-only attribute

There are 12 types of DOM nodes

Element Node nodetype 1

Text node nodetype 3

Attribute node nodetype 2

Compatibility problems

The text + Element Node line break in the standard browser is a text node

Non-standard only element nodes

Nodetype attributes

Node Type of the current element

 

Get the element attribute list set [Read-Only]

Element. Attributes get style ID class and so on
Oul. attributes [0]. Name

Oul. attributes [0]. Value

Oul. attributes [0]. nodetype

The difference between children and children is:

The standard browser only contains element-type nodes + tags that identify illegal nesting

Non-standard nodes that only contain Element Types

========================================================== ====================================

Firstchild \ firstelementchild
Obtain the first sub-element
Lastchild \ lastelementchild

The same compatibility issues with firstchild will identify text nodes

Firstelementchild [Read-Only]/IE6 does not support/does not recognize text/

Compatibility solution:

VaR ofirst = oul. firstelementchild | oul. firstchild

Ofirst. style. Background = 'red'

The standard browser will return NULL, that is, flase is the second method. If you design a style for a text node, an error will be reported.

Therefore, it is more reliable to use The 0th sub-elements.

All of the above have this compatibility problem.

========================================================== ====================================

Get the last nextsibling \ nextelementsibling in the sub-element
Obtains the next sibling node of a specified element.
Previussibling \ previuselementsibling
Obtains the previous sibling node of a specified element.

If no node is available, compatibility issues may occur.

========================================================== ====================================

 

Parentnode [Read-Only] is the parent node of the current node
Obtain the parent node and click the link to hide the entire Li node.

Parentnode & offsetparent differences

Element. offsetparent read-only attribute parent node

Offsetparent becomes a parent node with positioning. Multiple parent nodes are located away from the current element.

BUG: IE6. 7. If the parent level is not located. Default body. If positioning exists, HTML indicates a parent element of the current element.

If hashlouyt is triggered, offsetparent directs the parent element to the trigger element.

 

 

Element width and height

The offset from the current element to the parent (offsetparent) of the read-only attribute.

Offsetleft \ offsettop

BUG: IE7 or lower

If you do not locate

Offsetleft \ offsettop is the body distance

The current element is located

It will be retrieved normally.

-------------

The current element is located

But the parent level is not located.

Offsetparent-> body

Offsetparent-> html

Offsetleft the default margin value is 10 pixels and the standard value is 8.

Offsettop is 15 pixels

Offsetwidth \ clientwidth

 

 

 

 

 

 

 

 

 

 

Method 3 for operating element attributes

If there is a compatibility problem, two layers cannot be obtained under the standard
Get: getattribute (name)
Set: setattribute (name, value)
Delete: removeattribute (name)
Benefits of the third method: Custom Attributes and relative URLs

Create and insert Elements

Create DOM elements
Createelement (Label name) creates a node
Appendchild (node) append a node
Example: Content inserted into the message board
Insert element
Insertbefore (node, original node) is inserted before existing elements
Example: insert content into the inverted message board

Delete and replace Elements

Delete DOM elements
Removechild (node) deletes a node
Example: delete a message
Replace DOM elements
ReplaceChild (node, existing node) replace Node

Dom Study Notes