Document Object Model (DOM)

 

W3C proposes the Document Object Model dom (Document Object Mode ). The browser uses Dom to allow JavaScript to access elements on the page, dom is an internal representation of the text title, paragraph, list, style, ID, class, and all other data in XHTML on the webpage.

1. Understand dom

Dom defines many node types:

1. Document Node

2. documenttype

3. documentfragment

4. Element

5. Text node text

6. attribute node ATTR

7. cdatasection Node

8. Comment the node comment

All types of nodes have common attributes and methods.

Nodename: node name;

Nodevalue: the value of the node;

Nodetype: node type;

Ownerdocument: the document to which the node belongs;

Firstchild: point to the first node in the childnodes list

Lastchild: points to the last node in the childnodes list

Previussibling: refers to the forward sibling node.

Nextsibling: pointing to the next sibling Node

Haschildnodes (): If childnodes contains one or more nodes, return true;

Attributes: Contains ATTR objects that represent the characteristics of an element.

Appendchild (node): add the node to the end of childnodes

Removechild (node): delete a node from childnodes

ReplaceChild (newnode, oldnode): replace oldnode with newnode.

Insertbefore (newnode, refnode): Insert newnode before refnode

Ii. Use dom

1. Access related nodes

Document.doc umentelement access to the

Childnodes. Length get the number of subnodes

Document. Body points to the <body/> element

2. Process Element attributes

Getnameditem (name)-return the node with the nodename attribute value equal to the name

Removenameditem (name)-delete a node whose nodename attribute value is equal to name

Setnameditem (node)-Add a node to the list and index it according to its nodename attribute

Item (POS)-same as nodelist, return the node at the POs

Dom defines three element methods to help access features:

Getattribute (name)

Setattribute (name, newvalue)

Removeattribute (name)

3. Access a specified Node

1) getelementsbytagname () method

2) getelementsbyname () method

3) getelementbyid () method

4. create and operate nodes

Createattribute (name): Use a given name to create a feature node

Createcomment (text) creates a comment node that contains text

Createdocumentfragment () create a document fragment Node

Createelement (tagname) creates an element marked as tagname

Createtextnode (text): Create a text node that contains text

1) createelement (), createtextnode (), appendchild ()

2) removechild (), replaceChild (), insertbefore ()

3) createdocumentfragment ()

4) clonenode (true) copies the elements and all child nodes together.

Clonenode (false) only copies Elements

5. Operate on text nodes

Appenddata (string) adds the string to the end of the text node

Deletedata (offset, count) deletes the specified number of characters starting from the specified position in a text node.

Insertdata (offset, string) inserts the specified string into the position specified by the text node

Replacedata (offset, Count, string) replaces the specified number of text data at the specified position of the text node with the given string

Splittext (offset) divides the text node at the specified position into two parts, returns the right part as a new text node, and remains unchanged on the left.

Substringdata (offset, count) returns the specified number of strings from the text data of the text node at the specified position

Iii. Table Method

<Table/> the following content is added to the element:

Caption-point to <caption/> element

Tbodies-<tbody/> element set

Tfoot-pointing to <tfoot/> element

Thead-points to the <thead/> element

Rows-set of all rows in a table

Createthead ()-create the <thead/> element and put it into the table

Createtfoot ()-create a <tfoot/> element and put it in a table

Createcaption ()-create a <caption/> element and put it into the table

Deletetthead ()-delete the <thead/> element

Deletettfoot ()-delete <tfoot/> element

Deletetcaption ()-delete <caption/> element

Deleterow (position)-delete a row at a specified position

Insertrow (position)-Insert a new row at a specified position in the rows set

The <tbody/> element adds the following content:

Set of all rows in rows-<tbody/>

Deleterow (position)-delete a row at a specified position

Insertrow (position)-Insert a new row at a specified position in the rows set

The following content is added to the <TR/> element:

Cells-<TR/> set of all cells in the element

Deletecell (position)-delete a cell at a specified position

Insertcell (position)-Insert a new cell at a specified position in the cells set

 

Document Object Model (DOM)