JavaScript-DOM编程
2015-12-05 21:22
429 查看
1. 当整个html文档完全加载成功后触发window.onload事件
2.获取指定的元素节点的方法：
1）document.getElementById("bj");
2）document.getElementsByTagName("li");
3）document.getElementsByName("gender");
4）若HTML元素自身没有定义name属性，则getElementsByName方法对于IE无效，所以该方法使用时需谨慎
3.读写属性节点
4.获取元素节点的子节点
5.获取文本节点
6.点击每个li节点，都弹出其文本值
7.点击每个li节点，若li节点的文本值没有^^开头，加上有，则去除
8.关于节点的属性，nodeType，nodeName，nodeValue
9.总结
10.新创建一个元素节点，并把该节点添加为文档中指定节点的子节点
11.点击submit按钮时，检查是否选择type，若没有选择给出提示：“请选择类型”;
检查文本框中是否有输入（可以去除前后空格），若没有输入，则给出提示：“请输入内容”
12.交换节点
13.删除节点
14.级联选择
cities.xml
15.checkbox全选
16.employeetable的所有的a节点添加Onclick响应函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
/*
* 为#employeetable的所有的a节点添加Onclick响应函数
* 1.弹出confirm：确定要删除xx的信息吗？
* 2.若点击确定，则删除a节点所在的行
* 注意：
* 1.a节点是一个超级链接，可以在其onclick事件中通过返回false来取消默认行为
* 2.tr的直接父节点为tbody，而不是table
* 3.可以把去除前后空格的代码写成一个trim(str)函数
*/
window.onload = function(){
var aNodes = document.getElementById("employeetable")
.getElementByTagName("a");
for(var i = 0;i < aNodes.length;i++){
aNodes[i].onclick = function(){
var trNode = this.parentNode.parentNode;
var textContent = trNode.getElementsByTagName("td")[0].
firstChild.nodeValue;
textContent = trim(textContent);
if(confirm("确定要删除"+this.first+"的信息吗"));
return false;
}
}
function trim(str){
var reg = /^\s*|\s*$/g;
return str.replace(reg, "");
}
}
</script>
</head>
<body>
<center>
</center>
</body>
</html>
17.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//插入节点insertBefore()
window.onload = function(){
//1.#把#rl插入到#bj节点的前面
//该方法除了进行插入外，还有移动节点的功能。
alert("111");
var cityNode = document.getElementById("city");
var bjNode = document.getElementById("bj");
var rlNode = document.getElementById("rl");
//cityNode.insertBefore(rlNode,bjNode);
var refNode = document.getElementById("dj");
insertAfter(rlNode, refNode);
}
//把newNode插入到refNode的后面
function insertAfter(newNode, refNode){
//1.测试refNode是否为其父节点的最有一个子节点
var parentNode = refNode.parentNode;
if(parentNode){
var lastNode = parentNode.lastChild;
if(refNode == lastNode){
//2.若是，直接把newNode插入为refNode父节点最后一个子节点
parentNode.appendChild(newNode);
}else{
//3.若不是，则获取refNode的下一个兄弟节点，插入
var nextNode = refNode.nextSibling;
parentNode.insertBefore(newNode,nextNode);
}
}
}
</script>
</head>
<body>
<p>你喜欢哪个城市</p>
<ul id="city">
<li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li id = "dj">东京</li>
<li id = "se">首尔</li>
</ul>
<br><br>
<p>你喜欢哪款单机游戏？</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br><br>
gender:
<input type="radio" name="gender" value="male"/> Male
<input type="radio" name="gender" value="female"/>Female
<br><br>
name:<input type="text" name="username" value="fanfan"/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//1.当整个html文档完全加载成功后触发window.onload事件。
//事件触发时，执行后面function里面的函数体
window.onload = function(){
//2.获取所有的button节点，并取得第一个元素
var btn = document.getElementsByTagName("button")[0];
//3.为button的Onclick事件赋值：当点击button时，执行函数体
btn.onclick = function(){
//4.弹出helloworld
alert("helloworld");
}
}
</script>
</head>
<body>
<button>ClickMe</button>
</body>
</html>2.获取指定的元素节点的方法：
1）document.getElementById("bj");
2）document.getElementsByTagName("li");
3）document.getElementsByName("gender");
4）若HTML元素自身没有定义name属性，则getElementsByName方法对于IE无效，所以该方法使用时需谨慎
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//获取指定的元素节点
window.onload = function(){
//1.获取id为bj的那个节点
//在编写HTML文档时，需确保id属性值是唯一的
//该方法为document对象的方法
var bjNode = document.getElementById("bj");
alert(bjNode);
//2.获取所有的li节点
//使用标签名获取指定节点的集合
//该方法为Node接口的方法，即任何一个节点都有这个方法
var liNodes = document.getElementsByTagName("li");
alert(liNodes.length);
//获取指点节点的指定子节点
var cityNode = document.getElementById("city");
var cityLiNodes = cityNode.getElementsByTagName("li");
alert(cityLiNodes.length);
//3.根据HTML文档元素的name属性名来获取指定的节点的集合
var genderNodes = document.getElementsByName("gender");
alert(genderNodes.length);
//若HTML元素自身没有定义name属性，则getElementsByName
//方法对于IE无效，所以该方法使用时需谨慎
var objNodes = document.getElementsByName("BeiJing");
alert(objNodes.length);
}
</script>
</head>
<body>
<p>你喜欢哪个城市</p>
<ul id="city">
<li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br><br>
<p>你喜欢哪款单机游戏？</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
gender:
<input type="radio" name="gender" value="male"/>Male
<input type="radio" name="gender" value="female"/>Female
</body>
</html>3.读写属性节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//读写属性节点:通过元素节点.的方式来获取属性值和设置属性值
window.onload = function(){
//属性节点即为某一指定的元素节点的属性。
//1.先获取指定的元素节点
var nameNode = document.getElementById("name");
//2.在读取指定属性的值
alert(nameNode.value);
//3.设置指定的属性的值
nameNode.value = "范范";
}
</script>
</head>
<body>
<p>你喜欢哪个城市</p>
<ul id="city">
<li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br><br>
<p>你喜欢哪款单机游戏？</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
name:<input type="text" name="username" id="name" value="fanfan"/>
</body>
</html>4.获取元素节点的子节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//获取元素节点的子节点
window.onload = function(){
//1.获取#city节点的所有子节点
var cityNode = document.getElementById("city");
//2.利用元素节点的childNodes方法可以获取所有指定元素节点的所有子节点
alert(cityNode.childNodes.length);
//3.获取#city节点的所有li子节点
var cityLiNodes = cityNode.getElementsByTagName("li");
alert("1111:" + cityLiNodes.length);
//4.获取指定节点的第一个子节点和最后一个子节点
alert(cityNode.firstChild);
alert(cityNode.lastChild);
}
</script>
</head>
<body>
<p>你喜欢哪个城市</p>
<ul id="city"><li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br><br>
<p>你喜欢哪款单机游戏？</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
name:<input type="text" name="username" id="name" value="fanfan"/>
</body>
</html>5.获取文本节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//获取文本节点
window.onload = function(){
//文本节点一定是元素节点的子节点
//1.获取文本节点所在的元素节点
var bjNode = document.getElementById("bj");
//2.通过firstChild定位到文本节点
var bjTextNode = bjNode.firstChild;
//3.通过操作文本节点的nodeValue属性来读写文本节点的值
alert(bjTextNode.nodeValue);
bjTextNode.nodeValue = "扬州";
}
</script>
</head>
<body>
<p>你喜欢哪个城市</p>
<ul id="city"><li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br><br>
<p>你喜欢哪款单机游戏？</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
name:<input type="text" name="username" id="name" value="fanfan"/>
</body>
</html>6.点击每个li节点，都弹出其文本值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function(){
//点击每个li节点，都弹出其文本值
//1.获取素有的li节点
var liNodes = document.getElementsByTagName("li");
//2.使用for循环进行遍历，得到每一个li节点
for(var i = 0;i < liNodes.length;i++){
//3.为每一个li节点添加onclick响应函数
liNodes[i].onclick = function(){
//4.在响应函数中获取当前节点的文本节点的文本值
//5.alert打印
//this为正在响应事件的那个节点
alert(this.firstChild.nodeValue);
//此时i已经是8了，liNodes[8]不指向任何节点
//alert(liNodes[i].firstChild.nodeValue);
}
}
}
</script>
</head>
<body>
<p>你喜欢哪个城市</p>
<ul id="city"><li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br><br>
<p>你喜欢哪款单机游戏？</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
name:<input type="text" name="username" id="name" value="fanfan"/>
</body>
</html>7.点击每个li节点，若li节点的文本值没有^^开头，加上有，则去除
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function(){
//点击每个li节点，若li节点的文本值没有^^开头，加上
//有，则去除
var liNodes = document.getElementsByTagName("li");
for(var i = 0;i < liNodes.length;i++){
liNodes[i].onclick = function(){
var val = this.firstChild.nodeValue;
var reg = /^\^{2}/g;
if(reg.test(val)){
val = val.replace(reg, "");
}else{
val = "^^" + val;
}
this.firstChild.nodeValue = val;
}
}
//1.使用正则表达式判断是否以^^开始
//2.调用字符串的replace（reg，str）方法除去指定的字符串
/* var str = "^^abc";
var reg = /^\^{2}/g;//正则表达式
alert(reg.test(str));//true
str = str.replace(reg,"");
alert(str);
var str2 = "abc";
alert(reg.test(str2));//false */
}
</script>
</head>
<body>
<p>你喜欢哪个城市</p>
<ul id="city"><li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br><br>
<p>你喜欢哪款单机游戏？</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
name:<input type="text" name="username" id="name" value="fanfan"/>
</body>
</html>8.关于节点的属性，nodeType，nodeName，nodeValue
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//关于节点的属性，nodeType，nodeName，nodeValue
//在文档中，任何一个节点的都有着3个属性
//而id，name，value是具体节点的属性。
window.onload = function(){
//1.元素节点的这3个属性
var bjNode = document.getElementById("bj");
alert(bjNode.nodeType);//元素节点：1
alert(bjNode.nodeName);//节点名：li
alert(bjNode.nodeValue);//元素节点没有nodeValue属性值：null
//2.属性节点
var nameAttr = document.getElementById("name")
.getAttributeNode("name");
alert(nameAttr.nodeType);//属性节点：2
alert(nameAttr.nodeName);//属性节点的节点名：属性名
alert(nameAttr.nodeValue);//属性节点的节nodeValue属性值：username
//3.文本节点
var textNode = bjNode.firstChild;
alert(textNode.nodeType);//文本节点：3
alert(textNode.nodeName);//节点名：#text
alert(textNode.nodeValue);//文本节点的nodeValue属性值：文本值
//nodeType、nodeName是只读的，
//而nodeValue是可以被改变的
//以上三个属性，只有在文本节点中使用nodeValue读写文本值时使用最多
}
</script>
</head>
<body>
<p>你喜欢哪个城市</p>
<ul id="city"><li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br><br>
<p>你喜欢哪款单机游戏？</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
name:<input type="text" name="username" id="name" value="fanfan"/>
</body>
</html>9.总结
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//1、节点分为三种类型，元素节点、属性节点、 文本节点
//通常情况下，操作属性节点直接通过“元素节点.属性名”的方式来读写属性值
//而不是获取属性节点
//2.写JS代码的位置。在title节点后面，写在window.onload = function(){}中，
//可以获取到当前文档的所有节点
//3.如何获取元素节点
//3.1根据id获取
//3.2根据标签名获取:该方法并非document对象所独有，任何元素节点
//都可以调用该方法，以获取指定的子节点。
//3.3根据name属性获取。若HTML元素没有name属性，我们硬添加了一个name属性，
//使用getElementsByName,对于IE无法使用
//4.获取子节点
//4.1childNodes属性,获取指定元素的所有子节点，不大常用
//4.2firstChild、lastChild属性：获取元素节点的文本节点（如果一个元素节点只有一个文本子节点）
//4.3使用元素节点的getElementsByTagName（“方法名”）；
//5.读写文本节点
//5.1文本节点一定是元素节点的子节点
//5.2步骤：获取文本节点所在的元素节点->利用firstChild获取文本节点
//->利用nodeValue来读写文本的属性值
//6.节点的属性：所有节点都有的属性(元素节点，属性节点，文本节点)
//6.1 nodeType:1,2,3（只读）
//6.2 nodeName:返回对应的节点的名字（只读）
//6.3 nodeValue：null，属性值，文本值（可读写）
//7.属性节点：
//7.1 一般情况下不单独获取属性节点，而是通过元素节点.属性名的方式来读写属性值
window.onload = function(){
var bjNode = document.getElementById("bj");
alert(bjNode);
var liNode = document.getElementsByTagName("li");
alert(liNode.length);
var genderNode = document.getElementsByName("gender");
alert(genderNode.length);
var cityNode = document.getElementById("city");
var cityLiNode = cityNode.getElementsByTagName("li");
alert(cityLiNode.length);
var lichildNode = cityNode.childNodes;
alert(lichildNode.length); //4
var nameNode = document.getElementsByName("username")[0];
alert(nameNode.value);
nameNode.value = "饭饭";
}
</script>
</head>
<body>
<p>你喜欢哪个城市</p>
<ul id="city">
<li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br><br>
<p>你喜欢哪款单机游戏？</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br><br>
gender:
<input type="radio" name="gender" value="male"/> Male
<input type="radio" name="gender" value="female"/>Female
<br><br>
name:<input type="text" name="username" value="fanfan"/>
</body>
</html>10.新创建一个元素节点，并把该节点添加为文档中指定节点的子节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//新创建一个元素节点，并把该节点添加为文档中指定节点的子节点
window.onload = function(){
alert(1);
//1.document.createElement(elementTagName);
//新创建一个元素节点，返回值为指向元素节点的引用
var liNode = document.createElement("li");
//2.创建“厦门”的文本节点
//document.createTextNode("")将创建一个文本节点
//参数为文本值，返回为该文本节点的引用
var xmText = document.createTextNode("厦门");
liNode.appendChild(xmText);
var cityNode = document.getElementById("city");
//elementNode.appendChild(newChild):为elementNode
//新添加newChild子节点，作为最有一个子节点
cityNode.appendChild(liNode);
}
</script>
</head>
<body>
<p>你喜欢哪个城市</p>
<ul id="city">
<li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br><br>
<p>你喜欢哪款单机游戏？</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br><br>
gender:
<input type="radio" name="gender" value="male"/> Male
<input type="radio" name="gender" value="female"/>Female
<br><br>
name:<input type="text" name="username" value="fanfan"/>
</body>
</html>11.点击submit按钮时，检查是否选择type，若没有选择给出提示：“请选择类型”;
检查文本框中是否有输入（可以去除前后空格），若没有输入，则给出提示：“请输入内容”
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//需求：点击submit按钮时，检查是否选择type，若没有选择给出提示：“请选择类型”;
// 检查文本框中是否有输入（可以去除前后空格），若没有输入，则给出提示：“请输入内容”
//若检查都通过，则在相应的ul节点中添加对应的li节点
//需求2：使包括新增的li都能响应onclick事件：弹出li的文本值
window.onload = function(){
function showContent(liNode){
alert("~~~~" + liNode.firstChild.nodeValue);
}
var liNodes = document.getElementsByTagName("li");
for(var i = 0;i < liNodes.length;i++){
liNodes[i].onclick = function(){
showContent(this);
}
}
//1.获取#submit对应的按钮submitBtn
var submit = document.getElementById("submit");
//2.为submitBtn添加onclick相应函数
submit.onclick = function(){
//4.检查类型是否被选中，若没有选择给出提示：“请选择类型”
//4.1选择所有的name="type"的节点
var types = document.getElementsByName("type");
//4.2遍历types，检查其是否有一个type的checked属性存在，就可以说明
//有一个type被选中了:通过if(元素节点.属性名)来判断某一个元素节点是否有该属性
var typeVal = null;
for(var i = 0;i < types.length;i++){
if(types[i].checked){
typeVal = types[i].value;
break;
}
}
//4.3若没有任何一个type被选中，则弹出“请选择类型”。响应方法结束：return false
if(typeVal == null){
alert("请选择类型!");
return false;
}
//5.获取name=“name”文本值：通过value属性。
var nameEle = document.getElementsByName("name")[0];
var nameVal = nameEle.value;
//6.去除namevalue的前后空格
var reg = /^\s*|\s*$/g;
nameVal = nameVal.replace(reg,"");
alert("--" + nameVal + "--");
nameEle.value = nameVal;
//6.把nameVal和""进行比较，若是""说明只输入了空格，弹出"请输入内容"
//方法结束：return false
if(nameVal == ""){
alert("请输入内容");
return false;
}
//7.创建li节点
var liNode = document.createElement("li");
//8.利用nameVal创建文本节点
var content = document.createTextNode(nameVal);
//9.把8加为7的子节点
liNode.appendChild(content);
//11.为新创建的li添加onclick响应函数
liNode.onclick = function(){
showContent(this);
}
//10.把7加为选择的type对应的节点处
document.getElementById(typeVal)
.appendChild(liNode);
//3.在onclick相应函数的结尾处添加return false，就可以取消提交按钮的默认行为
return false;
}
}
</script>
</head>
<body>
<p>你喜欢哪个城市</p>
<ul id="city">
<li id="bj" >北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br><br>
<p>你喜欢哪款单机游戏？</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br><br>
<form action = "dom-7.html" name="myform">
<input type="radio" name="type" value="city"/>城市
<input type="radio" name="type" value="game"/>游戏
name:<input type="text" name="name"/>
<input type="submit" value="Submit" id="submit"/>
</form>
</body>
</html>12.交换节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function(){
//
var liNodes = document.getElementsByTagName("li");
for(var i = 0;i < liNodes.length;i++){
//手动为每个li节点添加一个index属性
liNodes[i].index = i;
liNodes[i].onclick = function(){
//
alert("onclick");
var targetIndex = 0;
if(this.index < 4){
targetIndex = 4 + this.index;
}else{
targetIndex = this.index - 4;
}
//
var tempIndex = this.index;
this.index = liNodes[targetIndex].index;
liNodes[targetIndex].index = tempIndex;
//alert(liNodes[targetIndex].firstChild.nodeValue);
replaceEach(this, liNodes[targetIndex]);
}
}
//自定义互换两个节点的函数
function replaceEach(aNode, bNode){
//1.获取aNode，bNode的父节点，使用parentNode属性
var aParent = aNode.parentNode;
var bParent = bNode.parentNode;
//2.克隆aNode或bNode
if(aParent && bParent){
var aNode2 = aNode.cloneNode(true);
//克隆aNode的同时，把onclick事件也复制
aNode2.onclick = aNode.onclick;
//index属性
aNode2.index = aNode.index;
}
//3.分别调用aNode的父节点和bNode的父节点的replaceNode
//实现互换
bParent.replaceChild(aNode2,bNode);
//alert(00);
aParent.replaceChild(bNode,aNode)
}
}
</script>
</head>
<body>
<p>你喜欢哪个城市</p>
<ul id="city">
<li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br><br>
<p>你喜欢哪款单机游戏？</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br><br>
gender:
<input type="radio" name="gender" value="male"/> Male
<input type="radio" name="gender" value="female"/>Female
<br><br>
name:<input type="text" name="username" value="fanfan"/>
</body>
</html>13.删除节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//删除节点
window.onload = function(){
/* alert("1");
var bjNode = document.getElementById("bj");
bjNode.parentNode.removeChild(bjNode); */
//为每一个li节点添加一个confirm,若确定，则删除
var liNodes = document.getElementsByTagName("li");
for(var i = 0;i < liNodes.length;i++){
liNodes[i].onclick = function(){
var flag = confirm("确定要删除"+this.firstChild.nodeValue+"么？");
if(flag){
this.parentNode.removeChild(this);
}
}
}
}
</script>
</head>
<body>
<p>你喜欢哪个城市</p>
<ul id="city">
<li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br><br>
<p>你喜欢哪款单机游戏？</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br><br>
gender:
<input type="radio" name="gender" value="male"/> Male
<input type="radio" name="gender" value="female"/>Female
<br><br>
name:<input type="text" name="username" value="fanfan"/>
</body>
</html>14.级联选择
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function(){
//1.为#province添加onchange相应函数
document.getElementById("province").onchange = function(){
//1.1把#city节点除第一个子节点外都移除
var cityNode = document.getElementById("city");
var cityNodeOptions = cityNode.getElementsByTagName("option");
var len = cityNodeOptions.length;
for(var i = 1;i < len;i++){
cityNode.removeChild(cityNodeOptions[1]);
}
var provinceVal = this.value;
if(provinceVal == ""){
return;
}
//2.cities加载xml文件,得到代表该文档的document对象
var xmlDoc = parseXml("cities.xml");
//3.在cities.xml文档中查找和选择的省匹配的province
//var provinces = xmlDoc.getElementsByTagName("province");
//alert(provinces.length);
var provinceEle = xmlDoc.selectNodes("//province[@name='"+provinceVal+"']");
//alert(provinceVal);
//4.再得到province节点的所有的city子节点
var cityNodes = provinceEle[0].getElementsByTagName("city");
//alert(cityNodes.length);
//5.遍历cities子节点，得到每一个city子节点的文本值
for(var i = 0;i < cityNodes.length;i++){
//6.利用得到的文本值创建option节点
//<option>cityName</option>
var cityText = cityNodes[i].firstChild.nodeValue;
var cityTextNode = document.createTextNode(cityText);
var optionNode = document.createElement("option");
optionNode.appendChild(cityTextNode);
//7.并把6创建的option子节点添加为#city的子节点
cityNode.appendChild(optionNode);
}
}
}
//js解析xml文档的函数，只支持ie
function parseXml(fileName){
//IE内核的浏览器
if(window.ActiveXObject){
//创建DOM解析器
var doc = new ActiveXObject("Microsoft.XMLDOM");
doc.async = "false";
//加载XML文档，获取XML文档对象
doc.load(fileName);
return doc;
}
}
</script>
</head>
<body>
<select id="province">
<option value="">-请选择-</option>
<option value="河北省">河北省</option>
<option value="辽宁省">辽宁省</option>
<option value="山东省">山东省</option>
</select>
<select id="city"><option value="...">-请选择-</option></select>
</body>
</html>cities.xml
<?xml version="1.0" encoding="UTF-8"?> <china> <province name="河北省"> <city>石家庄</city> <city>邯郸</city> <city>唐山</city> <city>张家口</city> <city>廊坊</city> <city>保定</city> <city>承德</city> </province> <province name="辽宁省"> <city>沈阳</city> <city>大连</city> <city>鞍山</city> <city>抚顺</city> <city>铁岭</city> </province> <province name="山东省"> <city>济南</city> <city>青岛</city> <city>威海</city> <city>烟台</city> <city>廊坊</city> </province> </china>
15.checkbox全选
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
<script type="text/javascript">
//需求：若checkedALL_2被选中，则name=items的checkbox都被选中
//若没有，则name=items的checkbox都取消选中
//若name=items的checkbox都选中，则checkedALL_2选中
//若name=items的checkbox有任何一个没有被选中，则checkedALL_2不选中
//提示：事件加给checkedALL_2，判断是否被选中，
//若被选中，获取name=items的checkbox,都选中
//若没有选中，获取name=items的checkbox,取消选中
//根据是否存在checked属性来判断是否选中，可以使其checked属性=true被选中
//checked属性=false取消选中
//还需要给每个name=items的checkbox添加相应函数
//判断name=items的checkbox是否都被选中
//选中的个数若等于总个数，则都被选择，那么使checkedALL_2被选中
window.onload = function(){
document.getElementById("checkedALL_2").onclick = function(){
var flag = this.checked;
var items = document.getElementsByName("items");
for(var i = 0;i < items.length;i++){
items[i].checked = flag;
}
}
var items = document.getElementsByName("items");
for(var i = 0;i < items.length;i++){
items[i].onclick = function(){
//记录被选中的items个数
var number = 0;
for(var j = 0;j < items.length;j++){
if(items[j].checked){
number++;
}
}
document.getElementById("checkedALL_2").checked=
(items.length == number);
}
}
document.getElementById("CheckedAll").onclick=function(){
for(var j = 0;j < items.length;j++){
items[j].checked = true;
}
}
document.getElementById("CheckedNo").onclick=function(){
for(var j = 0;j < items.length;j++){
items[j].checked = false;
}
}
document.getElementById("CheckedRev").onclick=function(){
for(var j = 0;j < items.length;j++){
items[j].checked = !items[j].checked;
}
}
document.getElementById("Send").onclick=function(){
for(var j = 0;j < items.length;j++){
//var str = null;
if(items[j].checked){
alert(items[j].value);
}
}
}
}
</script>
</head>
<body>
<form method="post" action="">
你爱好的运动是？
<input type="checkbox" id="checkedALL_2"/>全选/全不选
<br/>
<input type="checkbox" name="items" value="足球">足球
<input type="checkbox" name="items" value="篮球">篮球
<input type="checkbox" name="items" value="羽毛球">羽毛球
<input type="checkbox" name="items" value="乒乓球">乒乓球
<br/>
<input type="button" id="CheckedAll" value="全选"/>
<input type="button" id="CheckedNo" value="全不选"/>
<input type="button" id="CheckedRev" value="反选"/>
<input type="button" id="Send" value="提交"/>
</form>
</body>
</html>16.employeetable的所有的a节点添加Onclick响应函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
/*
* 为#employeetable的所有的a节点添加Onclick响应函数
* 1.弹出confirm：确定要删除xx的信息吗？
* 2.若点击确定，则删除a节点所在的行
* 注意：
* 1.a节点是一个超级链接，可以在其onclick事件中通过返回false来取消默认行为
* 2.tr的直接父节点为tbody，而不是table
* 3.可以把去除前后空格的代码写成一个trim(str)函数
*/
window.onload = function(){
var aNodes = document.getElementById("employeetable")
.getElementByTagName("a");
for(var i = 0;i < aNodes.length;i++){
aNodes[i].onclick = function(){
var trNode = this.parentNode.parentNode;
var textContent = trNode.getElementsByTagName("td")[0].
firstChild.nodeValue;
textContent = trim(textContent);
if(confirm("确定要删除"+this.first+"的信息吗"));
return false;
}
}
function trim(str){
var reg = /^\s*|\s*$/g;
return str.replace(reg, "");
}
}
</script>
</head>
<body>
<center>
</center>
</body>
</html>
17.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//插入节点insertBefore()
window.onload = function(){
//1.#把#rl插入到#bj节点的前面
//该方法除了进行插入外，还有移动节点的功能。
alert("111");
var cityNode = document.getElementById("city");
var bjNode = document.getElementById("bj");
var rlNode = document.getElementById("rl");
//cityNode.insertBefore(rlNode,bjNode);
var refNode = document.getElementById("dj");
insertAfter(rlNode, refNode);
}
//把newNode插入到refNode的后面
function insertAfter(newNode, refNode){
//1.测试refNode是否为其父节点的最有一个子节点
var parentNode = refNode.parentNode;
if(parentNode){
var lastNode = parentNode.lastChild;
if(refNode == lastNode){
//2.若是，直接把newNode插入为refNode父节点最后一个子节点
parentNode.appendChild(newNode);
}else{
//3.若不是，则获取refNode的下一个兄弟节点，插入
var nextNode = refNode.nextSibling;
parentNode.insertBefore(newNode,nextNode);
}
}
}
</script>
</head>
<body>
<p>你喜欢哪个城市</p>
<ul id="city">
<li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li id = "dj">东京</li>
<li id = "se">首尔</li>
</ul>
<br><br>
<p>你喜欢哪款单机游戏？</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br><br>
gender:
<input type="radio" name="gender" value="male"/> Male
<input type="radio" name="gender" value="female"/>Female
<br><br>
name:<input type="text" name="username" value="fanfan"/>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js对象的引用
- JS面向对象的学习
- extjs里的viewport 和window的理解，
- JavaScript事件
- jsp基础
- JS性能优化的那点事
- jsp页面跳转方式
- MyEclipse中修改jsp和servlet模板代码的方法
- js简单登录弹窗
- js实践
- JavaScript 计时
- BZOJ-1012[JSOI2008]最大数maxnumber 线段树区间最值
- BZOJ-1012[JSOI2008]最大数maxnumber 线段树区间最值
- xUtils解析json数据
- Day 26: TogetherJS —— 让我们一起来编程！
- Day 23：使用 TimelineJS 构建精美的时间轴
- js小时分钟控件--
- JavaScript动态加载CSS和JS文件
- JavaScript--DOM编程
- JavaScript 面向对象与原型、继承