DOM summary

DOM (Document Object Model) provides a common access method to tag objects, and regards Html files as a node tree. None of the labels and texts are a node, attackers can access file nodes and Html tag content.

Different types of nodes in the DOM tree have some common attributes and methods. Through these attributes and methods, we can access all nodes in the DOM tree and dynamically create various types of nodes. A node is the most basic object type in DOM, and a node is anything in the DOM tree.

1. Access nodes

When accessing an element, we should know what the file element is:

Document.doc umentElement -- access element;

II. Detection node type

Use the nodeType feature to detect node types:

Alert (document. nodeType );

Alert(document.doc umentElement. nodeType );

3. Processing element attributes

The node object is inherited by all types of nodes even if it has the attributes method. Only element nodes can have the feature. The attributes attribute of an element node is actually NameNodeMap, which provides methods for accessing and processing its content;

1) getNamedItem (name) -- return that the value of nodeName is equal to the name node;

2) removegetNamedItem (name) -- delete a node whose nodeName attribute value is the same as name;

3) setNamedItem (name) -- Add the node to the list and index it according to the nodeName attribute;

4) Item (pos) -- like NodeList, the return position is in the pos node

DOM defines three element methods to help access features;

1) getAttribute (name) -- equal to attributes. getNamedItem (name). value;

2) setAttribute (name, newvalue) -- attributes. getNamedItem (name). value = newvalue;

3) removeAttribute (name) -- equal to attributes. removegetNamedItem (name );

4. Access a specified node

1) getElementsByTagName () -- Returns a NodeList array containing all the tag name features;

GetElementsByTagName ("img ")

2) getElementsByName () -- used to obtain all elements whose name attribute is equal to the specified value;

3) getElementById () -- take a single specified element (id is unique, so this is the fastest way to find the pointing element from the document tree );

5. Create and operate nodes

1) createAttribute (name): create a feature node with the given name (create an attribute );

2) createComment (text): Creates a comment node that contains text;

3) createDocumentFragment (): creates a file fragment node;

4) createElement (tagname): Creates a tag named tagname;

Document. createElement ("p ");

5) createTextNode (text): Creates a text node that contains text;

Document. createTextNode ("hello, world ");

6) removChild (): removes child elements;

Document. parentNode. removChild ();

7) appendChild (): add child elements;

Document. parentNode. appendChild ();

8) replaceChild (): replace the child element;

Document. parentNode. replaceChild (the node to be added, ground to be replaced );

9) insertBefore (): before inserting a new one to the old one;

Document. parentNode. insertBefore (the node to be added before that node );

10) cloneNode (): Clone node;

False indicates a shortest clone, and the cloned tag. true indicates a deep clone, and all clones are performed.

VI. table method

<Table/> add the following content to the element:

Caption: points to the <caption/> element (if any );

TBodies: a set of <tbody/> elements;

TFoot: point to the <tFoot/> element (if any );

THead: points to the <tHead/> element (if any );

Rows: a set of all rows in a table;

CreateTHead: create the <tHead/> element and put it into a table;

CreateTFoot: Create a <tFoot/> element and put it into a table;

CreateCaption: Create a <caption/> element and put it into a table;

DelectTHead: delete the <tHead/> element;

DelectTFoot: delete the <tFoot/> element;

DelectCaption: delete the <caption/> element;

DelectRow (position): deletes rows at a specified position;

InsertRow (position): inserts a new row at a specified position in the rows set;

<Tbody/> add the following content to the element:

Rows: a set of all rows in <tbody/>;

DelectRow (position): deletes rows at a specified position;

InsertRow (position): inserts a new row at a specified position in the rows set;

<Tr/> add the following content to the element:

Cells: The set of all cells in the <tr/> element;

DelectCell (position): deletes cells at a specified position;

InsertCell (position): insert a new cell at a given position in the cells set;

DOM summary