Home > Developer > JavaScript
DOM Programming
The important role of 1.js is that it allows users to interact with page elements-->js essence
"2.DOM programming is also the basis of Ajax
3.DOM (Document Object model), which is an application programming interface (API) for HTML and XML, the DOM maps the entire page to a file composed of hierarchical nodes.
"4.dom Object Hierarchy graph
Window
|
|___event
|_____________document
|_____document |______body
|_____location |______stylesheet
|_____history |
|_____navigator |
|_____screen |______images
|______links
|______froms
|______all
|______frames
"5.confirm ()
SetInterval ("expression", Time): Method invokes a function or evaluates an expression by a specified period (in milliseconds)
"6.History: That object contains URL information that the client has accessed
"7.Loaction:
"8.screen
"9.event
--------------------------------------------------------------------------------------------------------------- ---
<! DOCTYPE HTML public '-//w3c//dtd HTML 4.01 strict//en ' HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD ' >
<meta http-equiv= ' content-type ' content= ' text/html; Charset=utf-8 ' >
<title> Insert title here </title>
<script type= "Text/javascript" >
function Test () {
document.write ("Hello");
}
</script>
<body>
<input type= "button" id= "BUT1" value= "Lisnda"/>
<script type= "Text/javascript" >
document.getElementById ("But1"). Onclick=test;
</script>
</body>
--------------------------------------------------------------------------------------------------------------
"" "" "(" "" "" "" "" "" "", "" "" "" "" "" "
————————————————————————————————————————————————————————————————
The 1.document object represents the entire HTML document, so you can access all the elements (objects) in the entire document.
"2.document Common functions:
(1). Write () output text content or JS code to the document
(2). Writeln () output text content or JS code to the document, line-wrap output
(3). The open () method opens a new document and erases the contents of the current document.
(4). Close ()
(5) the. getElementById () method returns a reference to the first object that owns the specified ID.
(6). Getelementbyname () returns a collection of objects with the specified name.
(7). Getelementbytagname () returns a collection of objects with the specified label name.
(8). createelement ()
3. How to create HTML elements dynamically using DOM objects
(1) Creating elements
var myelement=document.createelement ("??")
(2) Add necessary marking information to the element
Myelement.href= "http://www.sina.com";
myelement.innertext= "connected to Sina";
Myelement.left= "200px";
myelement.top= "300px";
myelement.position= "Absolut";
Add to Document.body
Document.body.appendChild (myelement);
"4. About DOM nodes
The types of nodes in the DOM include the following attributes and methods:
Attribute/method Type/Return value description
NodeName the name of a String node, as defined by the node type
NodeValue the value of a String node
NodeType the type constant value of the number node
Onerdocument document node belongs to
FirstChild node points to the first node in the ChildNodes list
LastChild node points to the last node in the ChildNodes list
ChildNodes Nodelist List of all nodes
ParentNode parent Node
PreviousSibling node points to the previous sibling
Nextsibing node points to the rear of a sibling
HasChildNodes () Boolean contains one or more child nodes
Attributes Namenodemap contains a Attr object that represents an element attribute and is used only for element nodes
AppendChild (node) node adds nodes to the end of the parent node
RemoveChild (node) node removes node from parent node
ReplaceChild (Newnode,oldnode) node replaces OldNode nodes with NewNode from parent node
InsertBefore (Newnode,oldnode) node adds NewNode nodes in the parent node before OldNode.
These are the methods and properties of the nodes in the DOM, because they are commonly used, remember!
5. In DOM programming, an HTML document is treated as a DOM tree, and the DOM maps all HTML elements into node nodes. So we can use node nodes (objects)
Properties and nodes.
The properties and methods of 6.document
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
2012-04-20 16:07 2546 People read review (0) Favorite Report
Document text Object-JavaScript scripting language description
---------------------------------------------------------------------
Note: The names of the elements on the page, the Name property, and the JavaScript reference must consistently include case
Otherwise you will be prompted with an error message "The referenced element is empty or not an object"
---------------------------------------------------------------------
Object Properties
Document.title//Set document title equivalent to HTML <title> tags
Document.bgcolor//Set page background color
Document.fgcolor//Set foreground (text color)
Document.linkcolor//non-clicked link color
Document.alinkcolor//Activate link (focus on this link) color
Document.vlinkcolor//Clicked link color
Document. URL//Set URL property to open another page in the same window
Document.filecreateddate//File creation date, read-only property
Document.filemodifieddate//File modification date, read-only property
Document.filesize//File size, read-only property
Document.cookie//Set up and read out cookies
Document.charset//Set character sets Simplified Chinese: gb2312
---------------------------------------------------------------------
Object methods
document.write ()//write content to page dynamically
Document.createelement (tag)//Create an HTML tag object
document.getElementById (ID)//Get the object with the specified ID value
Document.getelementsbyname (name)//Gets the object with the specified Name value
---------------------------------------------------------------------
Images collection (images in a page)
A) by collection reference
Document.images// tags on the corresponding page
Document.images.length//number of tags on the corresponding page
Document.images[0]//1th tags
Document.images[i]//i-1 tags
b) direct reference via Nane property
Document.images.oImage//document.images.name Properties
c) The SRC attribute of the reference picture
Document.images.oImage.src//document.images.name property. src
d) Create an image
var oimage
Oimage = new Image ()
Document.images.oimage.src= "/1.jpg"
At the same time, create a tag on the page corresponding to the display
<script language= "JavaScript" >
var oimage
Oimage = new Image ()
Document.images.oimage.src= "/1.jpg"
</script>
----------------------------------------------------------------------
Forms collection (forms in a page)
A) by collection reference
Document.forms//<form> tags on the corresponding page
Document.forms.length//number of <form> tags on the corresponding page
Document.forms[0]//1th <form> tags
Document.forms[i]//i-1 <form> tags
Document.forms[i].length//i-1 number of controls in <form>
DOCUMENT.FORMS[I].ELEMENTS[J]//section i-1 <form> j-1 controls
b) direct reference by Tag Name property
<form name= "Myform" ><input name= "Myctrl" ></form>
Document. Myform.myctrl//document. Table sole name. Control Name
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
"7.body Object
Document.body//Specifies the beginning and end of a document body equivalent to <body></body>
Document.body.bgColor//Sets or gets the background color behind the object
Document.body.link//non-clicked link color
Document.body.alink//Activate link (focus on this link) color
Document.body.vlink//Clicked link color
Document.body.text//Text color
*document.body.innertext//Set text between <body>...</body>
*document.body.innerhtml//settings <body>...</body> HTML code between
Document.body.topMargin//page top margin
Document.body.leftMargin//Page left margin
Document.body.rightMargin//Page right margin
Document.body.bottomMargin//Page Bottom margin
Document.body.background//Background image
Document.body.appendChild (Otag)//dynamically generate an HTML object
Document.body.scroll//Adding a ScrollBar event to a window is actually very simple
Document.body.onselectstart ()//user selected Chinese document trigger
Reference to the use of JavaScript
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
