Javascript dom programming (3): common objects 2, javascriptdom

Javascript dom programming (3): common objects 2, javascriptdom

I. document Object

<! Doctype html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> untitled document </title>
</Head>
<Script type = "text/javascript">
// The three most important methods of document
// GetElementById [html php jsp] (if there are multiple identical IDs on the page, the first object reference is returned)
// GetElementsByName: the object set returned by the html Control name is used for multiple selections.
// GetElementsByTagName returns an object set using the html Tag Name
// 1. Get the object by id
Function test (){
Var a1 = document. getElementById ("a1 ");
Window. alert (a1.id + "" + a1.href + "" + a1.innerText );
}
// 2. Get the object by name
Function test2 (){
Var hobies = document. getElementsByName ("holobby ");
// Traverse this set
For (var I = 0; I If (hobies [I]. checked ){
Window. alert ("your hobby is:" + hobies [I]. value );
}
}
}
// 3. Get the object by Tag Name
Function test3 (){
Var input = document. getElementsByTagName ("input ");
Window. alert (input. length );
}
</Script>
<Body>
<A id = "a1" href = "http://www.sina.com"> connect to sina </a> <br/>
<A id = "a1" href = "http://www.sohu.com"> connect to sohu </a> <br/>
<A id = "a3" href = "http://www.baidu.com"> connect to baidu </a> <br/>
<Input type = "button" value = "test" onclick = "test ()"/> <br/>
Select your hobbies:
<Input type = "checkbox" name = "holobby" value = "Tourism"> Tourism
<Input type = "checkbox" name = "holobby" value = "Music"> music
<Input type = "checkbox" name = "holobby" value = "Sports"> sports
<Input type = "checkbox" name = "holobby" value = "movie"> movie
<Input type = "button" value = "Look at your hobbies" onclick = "test2 ()"/> <br/>
<Input type = "button" value = "Get the element" onclick = "test3 ()"/> <br/>
</Body>
<Hr>
</Body>
</Html>

Ii. Comprehensive cases and operation nodes

<! Doctype html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> untitled document </title>
</Head>
<Script type = "text/javascript">
// Comprehensive case
/*
CreateElement () method to create a new element node:
The appendChild () method adds a subnode to an existing node.
The removeChild () method deletes a specified node.
The parentNode attribute returns the parent node of a node.
*/
Function test4 (){
Var myhref = document. createElement ("");
Myhref. innerText = "connect to sina ";
Myhref. href = "http://www.baidu.com ";
Myhref. id = "myhref ";
Div1.appendChild (myhref );
}
Function test5 (){
Var node = document. getElementById ('myhref ');
Node. parentNode. removeChild (node );
}
</Script>
<Body>
<Input type = "button" value = "Create a tag" onclick = "test4 ()"/> <br/>
<Input type = "button" value = "delete a tag" onclick = "test5 ()"/> <br/>
<Div id = "div1" style = "width: 200px; height: 200px; background-color: green"> div1 </div>
</Body>
<Hr>
</Body>
</Html>

Iii. query the keyboard encoding

<! Doctype html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> untitled document </title>
</Head>
<Script type = "text/javascript">
Function test (){
Window. alert ("encoding of the key you pressed:" + window. event. keyCode );
}
</Script>
<Body>
<Input type = "button" onkeydown = "test ()" value = "tesing"/>
</Body>
<Hr>
</Body>
</Html>

Copyright statement: original post of the blogger. For details, refer to the source. Http://blog.csdn.net/dzy21