JavaScript Learning note--5.dom (Document Object model)

1. How to get the object

Method One

document.getElementsByTagName ("div");

document.getElementById ("Head");

Document.getelementsbyname ("username");

Method two//via array

document.all//exists for IE, does not exist for FF

Document.body

Document.forms

Document.images

Document.links

2. Manipulating objects

Action Properties

Action Content

. innertext//text (IE)

. textcontent//text (FF)

. innerhtml//Content

. value//form Content

Action Style

. style.color//Gets or sets the text color

. style.backgroundcolor//Gets or sets the text color

Note: You can only get property values in inline styles

So some of the commonly used but not set properties in the line need a special way to get

. offsetwidth//element Width (width in the same CSS)

. offsetheight//element Height

. offsetleft//elements to the left of the document offset distance (same as in CSS)

. offsettop//element to the top of the document offset distance

document.documentelement.clientwidth//window width

document.documentelement.clientheight//window Height

Document.body.scrollTop | | document.documentelement.scrolltop//the top distance of the window scroll

Document.body.scrollLeft | | document.documentelement.scrollleft//window scrolling left distance

Note: If there are multiple styles that need to be manipulated at the same time, you should define a class that uses the

. classname//Setting Class name

. Classname= "One Two"//Set multiple class names

. Classname= "One"

. classname+= "Two"//setting up multiple class names in another way (note preceded by a space)

. Classname= ""//Purge class

3. Model

Consider the entire document as a inverted tree, with each element (node) connected

Get node

. parentnode//parent Node

. childnodes//All child nodes

. firstnode//first child node

. lastnode//Last child node

. nextsibling//Next Sibling node

. previoussibling//Previous Sibling node

Node properties

. nodetype//types

element is 1 attribute 2 text is 3

Note 8 document is 9

. nodename//Name

The element name is the label signature property named attribute name is #text

The document is named #document

. nodevalue//Content

Text content is a property value for the text attribute content

Other Types No NodeValue

Create a Node

Document.createelement ()//Create Element

. appendchild ()//INSERT into an object as a child node

. InsertBefore ()//As a sibling node before inserting into an object

. RemoveChild ()//Delete node

Form objects

Document.form//form is the name of the form

. name//get form elements (attributes)

. focus ()//Get focus Method

. Submit ()//Submit method

OnSubmit () Commit event on//form

The option object in the. options[]//select

Index value of the option object in the. selectedindex//select

@zhnoah
Source: http://www.cnblogs.com/zhnoah/
This article is owned by me and the blog Park, Welcome to reprint, but without the consent of the author must retain this paragraph, and in the article page obvious location to the original
The right to pursue legal liability.

JavaScript Learning note--5.dom (Document Object model)