<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
list-style: none;
}
#main{
border: 1px solid black;
width: 270px;
height: 300px;
float: left;
text-align: center;
}
button{
display: block;
text-align: center;
margin-left:20px ;
margin-top: 10px;
}
p{
display: block;
}
li{
display: block;
background-color: lawngreen;
width: 80px;
margin: 5px ;
float: left;
}
</style>
</head>
<body>
<div id="main">
<p>你想去哪个城市？</p>
<div id="city">
<li id="bj">北京</li>
<li>武汉</ Li>
<Li> Hangzhou </ li>
</ div>
/> <br
<the p-> Which game do you like? </ P>
<div ID = "Game">
<Li ID = "rl is an"> Red Alert </ Li>
<Li> live </ Li>
<Li> Warcraft </ Li>
</ div>
<br />
<p> what phone you use? </ P>
<div ID = "Phone">
<Li> iOS </ Li>
<Li ID = "Android"> Android </ Li>
<Li> Windows </ Li>
</ div>
<div>
<INPUT type = "radio" name = " gander" id = "gander"
<br />
name:
<INPUT type = "text" name = "name" ID = "username" value = "Wang" />
</ div>
</ div>
<div ID = "main">
<Button ID = "btn1"> Find #bj node </ Button>
<Button ID = "btn2"> Find all nodes li </ Button>
<Button ID = "btn3"> name = Find all the nodes gander </ Button>
<Button id = "btn4"> #city Find all nodes li </ Button>
<Button ID = "btn5"> return all the child nodes #city </ Button>
<Button ID = "btn6"> first return #phone child node </ button>
<button id = "btn7"> return #bj parent </ button>
<Button ID = "btn8"> return #android previous sibling node </ button>btn7 "> return #bj parent </ button>
<Button ID =" btn9 "> return value is the value #username </ button>
<Button ID =" btn10 "> set value of the value #username </ button>
<Button ID = "btn11"> return a text value </ button> #bj the
</ div>
</ body>
<Script type = "text / JavaScript "> / *
* find each write access and each button click event much more than,
* define a function, specifically to bind the specified element click function
* mass participation:
* idStr: click to bind response Object id attribute value of the function
* fun: the time of the callback function, click the trigger event * / function MyClick (idStr, Fun) {
var btn = document.getElementById (idStr);
btn.onclick = Fun;
// Seventh invoked beginning }
/ *
* Get the element node
● invoked through the document object
1. getElementById (
- Gets the id attribute - the node object element
2. getElementsByTagName ()
a tag name by obtaining a set of elements node object
3. getElementsByName ()
a group of Elements node object by name attribute
* /
// 1. Find the node #bj
// Get the id element btn1
var btn1 = document.getElementById ( "btn1" );
// event processing
btn1.onclick = function () {
// Get an id of bj
var bj = document.getElementById ( "bj" );
Alert (bj.innerHTML);
}
// 2. Find all nodes li
var= document.getElementById btn2 ( "btn2" );
btn2.onclick = function () {
// the getElementsByTagName () method returns an array of class Object,
var LIS = document.getElementsByTagName ( "Li" );
// Alert (lis.innerHTML );
// Alert (lis.length); //. 6
// iterate li element internal code
for (I = 0; I <lis.length; I ++ ) {
Alert (LIS [I] .innerHTML);
}
}
// 3. Find all nodes gander the name =
var btn3 = document.getElementById ( "btn3" );
btn3.onclick = function() {
Var Inputs = document.getElementsByName ( "Gander" );
// Alert (inputs.length); // 2
for (I = 0; I <inputs.length; I ++ ) {
// Alert (Inputs [I] .innerHTML); // undefiend
/ * the innerHTML no sense of self-end labels,
to read attribute, the element attribute names.
Note: clas exception, have className
* /
Alert (the Inputs [i] .name);
}
}
/ * Get node's child element
● concrete elements by calling node
1. the getElementsByTagName ()
- method returns the specified tag name descendants of the current node
2. the childNodes
- attribute of all child nodes of the current node
3. the firstChild
- attribute of the first child of the current node
4. lastChild
- attribute indicating the last child of the current node
* /
// 4. Find all #city li nodes
var btn4 = Document. the getElementById ( "btn4" );
btn4.onclick = function () {
var City = document.getElementById ( "City" );
var LIS = city.getElementsByTagName ( "Li" );
// Alert (lis.length); // . 3
for (I = 0; I <lis.length; I ++ ) {
Alert (LIS [I] .innerHTML);
}
}
// 5. Return #city all the child nodes
var btn5 = document.getElementById ( "btn5" );
btn5.onclick = function () {
var City = document.getElementById ( "City" );
var CNS = city.childNodes ;
// Alert (cns.length);. 7 //
// the childNodes gets all the nodes, including nodes including text,
// blank labels between DOM text node will as
var CNS1 = city.children; // . 3 with children property acquisition sub logical element with
the console.log (cns1.length);
for (I = 0; I <cns.length; I ++ ) {
Alert (CNS [I] .innerHTML);
}
}
//6. Return the first child node #phone
var btn6 = document.getElementById ( "btn6" );
btn6.onclick = function () {
var Phone = document.getElementById ( "Phone" );
var LIS city.getElementsByTagName = ( "Li" );
var FIR = phone.firstChild; // Get the first child node, including blank
// var FIR = phone.lastChild; // Get the last child node
Alert (FIR);
var FIR1 = phone.firstElementChild; // Get first child
Alert (FIR1);
}
/ * Get parent and sibling nodes
● call through specific node
1. the parentNode
- attribute of the parent of the current node
2. previousSibling
- attribute indicating previous sibling of the current node
3. nextSibling
a attribute of the current node is a sibling node
* /
// 7. return the parent node of #bj
// argument btn7 click function is passed
MyClick ( "btn7", function () {
var BJ = document.getElementById ( " BJ " );
var the pn = bj.parentNode; // get the parent node, it will only be elements, regardless of blank text,
// the only parent node is not an array of classes
Alert (pn.innerHTML); // entire contents of printing include the following tag of
the console.log (pn.innerText); // printed text, the label automatically remove
});
// 8 returns the previous sibling #android
MyClick ( "btn8", function ( ) {
var and = document.getElementById ( "Android" );
var PS = and.previousSibling; // get previous sibling node, obtains blank text
// var PS = and.nextSibling; // Get a sibling node after the
alert (PS);
var PS1 = and.previousElementSibling; // get previous sibling element
Alert (ps1.innerHTML);
});
// 9. the return value is the value #username
MyClick ( "btn9", function () {
var UM = document.getElementById ( "username" );
// read the attribute values, elements attribute.
Alert (um.value);
});
// 10. The set of #username value value
MyClick ( "btn10", function () {
var UM = document.getElementById ( "username" );
// change the attribute values, elements attribute =.
um.value = "Wind" ;
});
// 11. The return #bj text value
MyClick ( "btn11", function () {
var= document.getElementById BJ ( "BJ" );
// Alert (bj.innerText);
Alert (bj.firstChild.nodeValue);
Alert (bj.firstChild.nodeName);
});
/ * attribute node
nodeName nodeType nodeValue
document #document 9 null node
element node 1 null tag name
attribute node attribute name attribute value 2
text node #text 3 ★ text
* /
</ Script>
</ HTML>