`

javascript DOM(三)

 
阅读更多

三个练习:

 

1.

 

 

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		
		<script type="text/javascript">
			
			//点击任何一个 li 节点, 弹出其文本值
			
			//1. 代码需要编写在 window.onload 函数体中
			window.onload = function(){
				//2. 获取所有的 li 节点, 一个数组
				var liNodes = document.getElementsByTagName("li");		
				
				//3. 遍历 2 得到的数组
				for(var i = 0; i < liNodes.length; i++){
					//var liNode = liNodes[i];
					//4. 为每一个遍历的 li 节点的 onclick 属性赋值
					//5. 在赋值的函数体中, 弹出当前 li 节点的文本值
					liNode.onclick = function(){
						alert(this.firstChild.nodeValue);			
						//alert(liNodes[i].firstChild.nodeValue);		
						//因为在遍历的过程中, i 始终是一个变量, 最后取值为 8
						//alert(j);
						//因为 i 最终的取值是 8, 而 liNodes[8] 对应的节点根本就不存在, 所以以下代码无法工作
						//alert(liNodes[i].firstChild.nodeValue);												
					}
				}
				
			};
			
			
			var liNodes = document.getElementsByTagName("li");		
			
			for(var i = 0; i < liNodes.length; i++){
				alert(i);
				liNodes[i].onclick = function(){
					alert(i);												
				}
			}

		</script>
		
	</head>
	<body>
		<p>你喜欢哪个城市?</p>
		<ul id="city">
			<li id="bj" title="Beijing">北京</li>
			<li>上海</li>
			<li>东京</li>
			<li>首尔</li>
		</ul>
		
		<br><br>
		<p>你喜欢哪款单机游戏?</p>
		<ul id="game"><li id="ra">红警</li>
			<li>实况</li>
			<li>极品飞车</li>
			<li id="war3">魔兽</li></ul>  
		
		<br><br>
		gender: 
			<input type="radio" name="gender" value="male"/>Male
			<input type="radio" name="gender" value="female"/>Female
	</body>
</html>

 

 2.

 

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		
		<script type="text/javascript">
			
			window.onload = function(){
				
				//需求: 点击任何一个 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}/;
						
						if(reg.test(val)){
							val = val.replace(reg, "");
						}else{
							val = "^^" + val;
						}
						
						this.firstChild.nodeValue = val;
					};
				}
				
			};
			
		</script>
		
	</head>
	<body>
		<p>你喜欢哪个城市?</p>
		<ul id="city">
			<li id="bj" title="Beijing">北京</li>
			<li>上海</li>
			<li>东京</li>
			<li>首尔</li>
		</ul>
		
		<br><br>
		<p>你喜欢哪款单机游戏?</p>
		<ul id="game"><li id="ra">红警</li>
			<li>实况</li>
			<li>极品飞车</li>
			<li id="war3">魔兽</li></ul>  
		
		<br><br>
		gender: 
			<input type="radio" name="gender" value="male"/>Male
			<input type="radio" name="gender" value="female"/>Female
	</body>
</html>

 

 3.

 

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<script type="text/javascript">		
			window.onload = function(){	
				//****知识: 在 js 中 null, undefined, 0, false 都可以作为 false 使用, 除此以外可以作为 true 使用
			
				//需求: 点击 submit 按钮时, 检查是否选择 type, 若没有选择给出提示: "请选择类型"; 
				//                        检查文本框中是否有输入(可以去除前后空格), 若没有输入, 则给出提示: "请输入内容"; 
				//若检查都通过, 则在相应的 ul 节点中添加对应的 li 节点 
				
				//1. 选取 #submit 按钮, 并为其添加 onclick 响应函数
				document.getElementById("submit").onclick = function(){
					//3. 获取所有 name="type" 的节点(radio): types
					var types = document.getElementsByName("type");
					
					//4. 遍历 types 节点, 检测是否又被选中的
					var typeValue = null;
					for(var i = 0; i < types.length; i++){
						if(types[i].checked){
							typeValue = types[i].value;
							break;
						}
					}

					//5. 若没有一个 type 被选中, 则打印 "请选择类型", 响应函数结束
					if(!typeValue){
						alert("请选择类型");
						return false;
					}
										
					//6. 选取 name="name" 节点: name
					var nameNode = document.getElementsByName("name")[0];
					
					//7. 检查 name 对应的文本框中即对应节点的 value 属性值是否有输入(可以去除前后空格)
					var val = nameNode.value;
					
					//7.1 去除前后空格, 需要使用正则表达式
					var reg = /^(\s+)|(\s+)$/g;
					val = val.replace(reg, "");
					nameNode.value = val;
					
					//8. 若没有输入, 则给出提示: "请输入内容", 响应函数结束
					if(val == ""){
						alert("请输入内容");
						return false;
					}
					
					//9. 创建一个对应的 li 节点 <li>name-value</li>: liNode
					var liNode = document.createElement("li");
					var liText = document.createTextNode(val);
					liNode.appendChild(liText);
					
					//10. 把 liNode 添加为 #type-value 的最后一个子节点
					document.getElementById(typeValue).appendChild(liNode);
					
					//2. 取消 #submit 按钮的默认行为
					return 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>
		
		<br><br>
		<form action="dom-5.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>
 

 

 

0
1
分享到:
评论

相关推荐

    JavaScript DOM编程艺术.pdf

    《JavaScript DOM编程艺术》是Jeremy Keith所著的一本关于JavaScript和DOM(文档对象模型)编程的经典图书,它不仅阐述了JavaScript和DOM的基本知识,还着重讲解了DOM编程技术背后的思路和原则。本书被赞誉为Web设计...

    JavaScript dom操作 dom元素查询 示例代码

    JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码...

    JavaScript DOM编程艺术(第2版pdf)+源代码

    JavaScript DOM编程艺术(第2版)是一本深受程序员喜爱的JavaScript技术书籍,专注于讲解如何使用JavaScript与Document Object Model(DOM)进行交互。DOM是Web页面的结构化表示,它允许我们通过编程方式操纵HTML和XML...

    JavaScript DOM编程艺术【第2版&高清】.pdf

    但是,根据标题《JavaScript DOM编程艺术【第2版&高清】.pdf》和描述“JavaScript DOM编程艺术,高清资源,无比经典,值得拥有”,我们可以推断这本书主要讲述了JavaScript中DOM(文档对象模型)的相关编程技术。...

    JavaScriptDOM编程艺术(第2版)PDF版本下载.txt

    ### 三、JavaScript与DOM的结合 #### 3.1 事件处理 JavaScript通过绑定事件监听器来响应用户的交互行为,例如点击、滑动等。通过DOM可以获取到页面上的元素,然后为其绑定事件处理函数,实现各种动态效果。 #### ...

    随书光盘+PDF JavaScript DOM编程艺术(第2版)-源代码2.5MB PDF114MB .zip

    JavaScript DOM编程艺术(第2版)是一本深受开发者欢迎的书籍,主要涵盖了JavaScript语言在Web前端开发中的应用,特别是关于DOM(Document Object Model)的深入理解和实践。这本书的随书光盘包含了源代码和PDF电子版...

    经典之作javascript dom编程艺术源码

    JavaScript DOM编程艺术是一本深入解析DOM操作的经典书籍,它的源码提供了丰富的实例,帮助开发者深入理解如何使用原生JavaScript高效地操纵网页元素。DOM(Document Object Model)是HTML和XML文档的标准表示,它将...

    JavaScript dom操作 删除元素 示例代码

    JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 ...

    JavaScript dom操作 访问和修改元素 示例代码

    JavaScript dom操作 访问和修改元素 示例代码JavaScript dom操作 访问和修改元素 示例代码JavaScript dom操作 访问和修改元素 示例代码JavaScript dom操作 访问和修改元素 示例代码JavaScript dom操作 访问和修改...

    JavaScript dom操作 添加和替换元素 示例代码

    JavaScript dom操作 添加和替换元素 示例代码JavaScript dom操作 添加和替换元素 示例代码JavaScript dom操作 添加和替换元素 示例代码JavaScript dom操作 添加和替换元素 示例代码JavaScript dom操作 添加和替换...

    javascript dom2 源码及pdf

    三、HTML DOM HTML DOM专门针对HTML文档,提供了更方便的操作接口。比如,你可以用`document.getElementById()`查找指定ID的元素,`document.getElementsByTagName()`获取指定标签的所有元素,`element.style`对象则...

    JavascriptDOM基本操作

    JavascriptDOM基本操作 dom 精品操作

    JavaScript DOM编程艺术(中文第2版).pdf

    javascript入门必备,本书讲述了JavaScript和DOM的基础知识,但重点放在DOM编程技术背后的思路和原则:预留退路、循序渐进和以用户为中心等,这些概念对于任何前端Web开发工作都非常重要。本书将这些概念贯穿在书中...

    javascript Dom 编程艺术

    本 书在简洁明快地讲述JavaScript和DOM的基本知识之后,通过几个实例演示了专业水准的网页开发技术,透彻阐述了平稳退化等一批至关重要的 JavaScript编程原则和最佳实践,并全面探讨了HTML5以及jQuery等JavaScript库...

    javascriptDom编程艺术+源码

    《JavaScript DOM编程艺术》是一本深受开发者欢迎的JavaScript学习书籍,专注于DOM(Document Object Model)这一核心概念。DOM是Web页面的结构模型,通过JavaScript与DOM的交互,开发者可以实现对网页内容的动态...

    JavascriptDOM编程视频教程(17讲)

    教程名称:Javascript DOM编程视频教程(17讲) 课程目录:【】1.JavascriptDOM编程_在什么位置编写JS代码【】10.JavascriptDOM编程_删除节点【】11.JavascriptDOM编程_添加删除节点的实验...

    JavaScriptDOM编程艺术

    《JavaScript DOM编程艺术》是一本深入探讨JavaScript与DOM(Document Object Model)交互的权威书籍。DOM是HTML和XML文档的结构化表示,JavaScript通过DOM API能够对网页内容进行动态操作,实现丰富的交互效果。...

    JavaScript.DOM编程艺术(第2版)附录及源码.rar

    《JavaScript.DOM编程艺术(第2版)》是一本深入探讨JavaScript与DOM(Document Object Model)交互的权威书籍。DOM是Web开发中的核心组件,它允许程序员通过JavaScript来操作HTML和XML文档的结构、内容和样式。这本书...

    JavaScriptDOM编程艺术第二版

    JavaScript DOM编程艺术第二版是一本深入探讨JavaScript与DOM(Document Object Model)交互的权威书籍,主要面向希望提升JavaScript技能并掌握网页动态效果开发的Web开发者。DOM是HTML和XML文档的编程接口,它允许...

Global site tag (gtag.js) - Google Analytics