JavaScript 2 Dom__java

JavaScript 2 DOM

Note: In the following, Chinese characters represent variables, English words are keywords. such as document.getElementById (parameters)

1.DOM (document object model)

The HTML DOM defines the objects and properties of all HTML elements, as well as the methods to access them.

2. Nodes (node)

All content in an HTML document is a node, based on the HTML DOM standard of the consortium:

The entire document is a document node

Each HTML element is an element node

Text within an HTML element is a text node

Each HTML attribute is an attribute node

Comments are annotation nodes

······

Through the HTML DOM, all nodes in the tree are accessible through JavaScript. All HTML elements (nodes) can be modified, or nodes can be created or deleted.

3. node type (any node must reside in its one), can be found through the query node NodeType properties.

ELEMENT node	Node.element_node (1)
Attribute node	Node.attribute_node (2)
Text node	Node.text_node (3)
CDATA Nodes	Node.cdata_section_node (4)
Entity reference name node	Node.entry_reference_node (5)
Entity name node	Node.entity_node (6)
Processing instruction Node	Node.processing_instruction_node (7)
Annotation node	Node.comment_node (8)
Document node	Node.document_node (9)
Document Type Node	Node.document_type_node (10)
Document fragment Node	Node.document_fragment_node (11)
DTD Declaration node	Node.notation_node (12)

For example:

if (node. nodeType = = 1) {...}

Note: It is best not to write "node. NodeType = = Node.element_node", not supported in IE.

4. node NodeName and NodeValue properties

Common nodes	Elements	Property	Text	Comments
NodeName Festival Roll Call	Label Signature	Property name	#text	#comment
NodeValue node Value	Null	Specific property value	Specific text	Comment Content

For example:

if (node. tagname.tolowercase () = = "div") {}

Note 1: Access the tag name of the element, you can use NodeType, or you can use tagname (for clarity).

Note 2: Because in HTML, the tagname result is uppercase, in XHL (sometimes including XHTML), the result is consistent with the source code, and in order to apply to any document, the toLowerCase () method is converted to lowercase.

5. Common Properties and methods of nodes ① Common Properties

Child nodes. parentnode	Point to its parent node
Parent node. childnodes	Array pointing to its child nodes
Child nodes. ownerdocument	Point to its document node, usually documents
Child nodes. Privioussibing (Sib relatives)	Point to its previous sibling node
Child nodes. nextsibing	Point to its next sibling node
Parent node. firstchild	Point to its first child node
Parent node. LastChild	Point to its last child node

Each node has a childnodes attribute, which holds the Noselist object and is a set of ordered child nodes.

How to use:

var x = parent node. childnodes[0]; x= first child node

var x = parent node. Childnodes.item (0); x= first child node

var y = parent node. childnodes.length; A general method for y= number of sub-nodes ②

Format	Describe	return value
Parent node. appendchild (new child node)	Add the new child node to the end of the parent node	New child node
Parent node. Insertchild (new child node, old child node)	Before the new child node is added to the parent's old child node	New child node
Parent node. replacechild (new child node, old child node)	Replace old child nodes with new child nodes	。。。
Parent node. removechild (Old child node)	Removing Old child nodes	Old child nodes

6.Document type node ①javascript represents documents by document type, representing the entire HTML page.

Its child nodes may be documenttype (up to one), Element (up to one), processinginstruction or comment. ② Common Properties and methods:

var x = document.documentelement;	x = HTML Node
var x = document.body;	x = Body Node
var x = document.getElementById ("ABC")	ID names must match strictly, including case
var x = document.getelementbytagname ("P")	Returns a collection of class arrays

③ Some special properties:

var x = document.anchors;	x = All <a> elements with the name attribute
var x = document.links;	x = all <a> elements with href attributes
var x = document.forms; Same result as Document.getelementbytagname ("forms")	x = ALL <forms> elements
var x = document.images; Same result as Document.getelementbytagname ("IMG")	x = ALL elements

7.element type node ① Access Elements

document.getElementById ()//is a Document object-specific function that can only be document.

node. getElementsByTagName ()//node can be document, but other. Returns an array of objects.

node. Getelementsbyclassname ()/Ibid., is added to the HTML5 Dom and may not be suitable for old browsers

Note 1:id names must be strictly matched, including case

Note 2:getelementsbytagname () and Getelementsbyclassname () allow the wildcard "*" to be used, representing all

For example 1:

var x = document.getElementById ("abc");

var y = x.getelementbytagname ("Li"); Searching for the Li element in the X element

For example, 2://applies to the new and old browser function method, node search scope, Theclassname to find the class name

function Getelementsbyclassname (node,theclassname) {
  if (node.getelementsbyclassname) {
    //using existing methods
    Return Node.getelementsbyclassname (Theclassname);
  }
  else{
    var results = new Array ();
    var elems = node.getelementbytagname ("*");  Get all Tags
    for (var i=0;i<elems.length;i++) {
      //When the element's class name (ClassName) matches the name of the class (Theclassname) to be found
      if (elems[i ].classname.indexof (theclassname)!=-1) {
        resulus[results.length] = elems[i];   With the assignment operation, Resules.length is increasing
      }
    } return
    resules
}

② queries, setting, removing attributes

Attributes are unique to an element, and the action object of an attribute can only be an element

element. GetAttribute ("property name")//Return property value

element. setattribute ("Property name", "Property value")

element. RemoveAttribute ("property name")//Delete attribute and property value.

Note 1:setattribute (), if the property does not exist, create the property and set the value, or replace the property value if the property exists.

Note 2:removeattribute (), IE6 and previous versions are not supported

For example:

<div id= "mydiv" class= "BD" title= "body text" lang= "en" dir= "ltr" ></div>

var Div=document.getelementbyid ("Mydiv");

Div.getattribute ("class")//"BD"

Div.classname//"BD"

Div.setattribute ("id", "ABC")//ID property name to ABC

div.id= "ABC"; ID property name changed to ABC

problem ... can use Div.classname query, div.id= "ABC" setting, GetAttribute and setattribute is useless ... Explanation: Dom operations are divided into 3 aspects, namely, the DOM core (core), Html_dom and Css_dom. Methods of the DOM core: document.getElementsByTagName ("form"); element. GetAttributes ("src"); The Html_dom method: Document.form; element. src; The Css_dom method: element. style.color= "Red";

attributes properties of ③ elements

Format: element. Attributes

Returns: A collection of attributes for an element

Used://when enumerating element attributes

var Elem=document.getelementbyid ("header");

for (Var i=0;i<elem.attributes.length;i++) {

xxx = Elem.attributes[i];

}

Have the following methods:

getNamedItem (name)	Returns a node named name
RemoveNamedItem (name)	Remove the node from the name of the deletion
SetNamedItem (name)	Add named name to get node
Item (POS)	Returns the node at the location of the digital POS

Example:

<div id= "mydiv" class= "BD" title= "body text" lang= "en" dir= "ltr" ></div>

var Div=document.getelementbyid ("Mydiv");

var x = Div.attributes.getNamedItem ("id"). nodevalue; x = "Mydiv"

var x = div.attributes["id"].nodevalue; x = "Mydiv"

var x = div.getattribute ("id")//x = "Mydiv"

var x = div.id; x = "Mydiv"

Div.attributes.getNamedItem ("id"). nodevalue = "Someohterid"; Id= "Someohterid"

div.attributes["id"].nodevalue = "Someohterid"; id = "Someohterid"

Div.getattribute ("id") = "Someohterid"; id = "Someohterid"

Div.id = "Someohterid"; id = "Someohterid"

④ Create an element

Document.createelement ("label name")

child nodes of the ⑤ element

In different browsers, the number of child nodes may be different. For example:

<ul id= "MyList" >

<li>item 1</li>

<li>item 1</li>

<li>item 1</li>

</ul>

In IE, UL includes 3 sub nodes, 3 li.

In other browsers, UL includes 7 sub nodes, 3 li,4