Javacript Advanced Programming-dom

1. DOM

DOM (Document Object model) is an API (application interface) for HTML and XML documents

1.1 Node Hierarchy

The DOM can portray any HTML and XML document as a structure composed of multiple nodes. The nodes are divided into several different types, each representing different information and tags in the document.

1.1.1 Node Type

A node interface is defined in DOM1, which is implemented by all node types in the DOM, which is implemented as a node type in JavaScript.

Each node has a NodeType property, so all node types share the same basic properties and methods

Each node has a NodeType property that indicates the type of the node, and the node type is represented by the following 12 numeric constants defined in the node type, and any node type is more than one:

L Node.element_node (1);

L Node.attribute_node (2);

L Node.text_node (3)

L Node.cdata_section_node (4)

L Node.entity_reference_node (5)

L Node.entity_node (6)

L Node.processing_instruction_node (7)

L Node.comment_node (8)

L Node.document_node (9)

L Node.document_type_node (10)

L Node.document_fragment_ndoe (11)

L Node.notation_node (12)

(1). Determine the node type

if (Somenode.nodetype = = 1) {

}

For all browsers

(2). NodeName and NodeValue, which can be used to understand specific information, depending on the property type

(3). Node Relationship:

1. ChildNodes object, NodeList is a class array object that holds an ordered set of nodes that can be accessed by location
2. ParentNode property that points to the parent node in the document tree
3. PreviousSibling: The Front sibling node
4. Newsibling: The rear sibling node
5. FirstChild: First child node
6. LastChild: Last child node
7. Ownerdocument, which points to the document node that represents the entire document

(4). AppendChild (): Add a node at the end of a node

HasChildNodes (): Whether there are child nodes

InsertBefore (): Insert node in front

ReplaceChild (): Replace node

RemoveChild (): Remove node

CloneNode (): Copy node

1.1.2 Document Type

The value of L NodeType is 9

The value of L nodename is "#document"

The value of L nodevalue is null

The value of L parentnode is null

The value of L ownerdocument is null

L The child node may be a DocumentType (up to one), Element (up to one), processinginstruction or comment

Common Properties:

Document.body

Document.title

Document. Url

Document.domain

Document.referrer

document.getElementById ()

document.getElementsByTagName ()

Document.anchors

Document.applets

Document.forms

Document.images

Document.links

1.1.3 Element type

The value of L NodeType is 1

L nodename value is the signature value of the element

The value of L nodevalue is null

The value of L parentnode is document or element

L child nodes may be element,text,comment,processinginstruction,cdatasection or EntityReference

The following properties are generally present:

Id,title,lang,dir,classname

<div id= "id" title= "title" lang= "Lang" dir= "dir" class= "ClassName" ></div>

You can use GetAttribute (), SetAttribute (), and RemoveAttribute () to manipulate properties

The element type is the only DOM node type that uses the Attributes property, representing all of the property collections.

1.1.4 Text Type

The value of L NodeType is 3

The value of L nodename is "#text"

The value of L nodevalue is the text that the node contains

The value of L parentnode is element

l have no child nodes

L can access text in the text node through the NodeValue property or the Data property

L AppendData (text)

L DeleteData (Offset,count)

L InsertData (Offset,text)

L ReplaceData (Offset,count,text)

L Splittext (offset)

L Substringdata (Offset,count)

1.1.5 Comment

The value of L NodeType is 8

The value of L nodename is "#comment"

L NodeValue value is the content of the comment

The value of L parentnode is element or document

l have no child nodes

1.1.6 cdatasection

The value of L NodeType is 4

The value of L nodename is "#cdata-section"

The value of L NodeValue is the content contained in the CDATA area

The value of L parentnode is element or document

l have no child nodes

1.1.7 DocumentType

The value of L NodeType is 10

The value of L nodename is the name of DOCTYPE

The value of L nodevalue is null

The value of L parentnode is document

l have no child nodes

1.1.8 DocumentFragment

The value of L NodeType is 11

The value of L nodename is ' #document-fragment '

The value of L nodevalue is null

The value of L parentnode is null

L child nodes may be element,text,comment,processinginstruction,cdatasection or EntityReference

1.1.9 attr Type

The value of L NodeType is 2

The value of L nodename is the name of the attribute

L NodeValue value is the value of the attribute

The value of L parentnode is null

l have no child nodes

1.2 DOM Manipulation Technology 1.2.1 Dynamic scripting

var script = document.createelement (' script ');

Script.type = "Text/javascript";

Script.sec = "Io.js";

Document.body.appendChild (script);

1.2.2 Dynamic Style

var link = document.createelement ("link");

Link.rel = "stylesheet";

Link.type = "Text/css";

Link.href = "Io.css";

var head = document.getElementsByTagName ("head") [0];

Head.appendchild (link);

1.2.3 Operation Form

<table> Properties and methods

L Caption

L Tbodies

L TFoot

L THead

L Rows

L Createthead ()

L Createtfoot ()

L Createcaption ()

L Deletethead ()

L Deletetfoot ()

L Deletecaption ()

L DeleteRow (POS)

L InsertRow (POS)

<tbody> Properties and methods

L Rows

L DeleteRow (POS)

L InsertRow (POS)

<tr> Properties and methods

L Cells

L Deletecell (POS)

L InsertCell () Pos

1.2.4 Using NodeList

Since nodelist is dynamic, when iterating nodelist, the second variable is initialized with the length property, and the iterator is compared with the variable

Javacript Advanced Programming-dom