首页 > 编程语言 >JavaScript dom查询

JavaScript dom查询

时间:2023-03-04 19:45:52浏览次数:44  
标签:返回 dom JavaScript bj 查询 查找 var li 节点

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<link rel="stylesheet" type="text/css" href="style/css.css" />
		<script type="text/javascript">
		
			window.onload = function(){
				
				//为id为btn01的按钮绑定一个单击响应函数
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					//查找#bj节点
					var bj = document.getElementById("bj");
					//打印bj
					//innerHTML 通过这个属性可以获取到元素内部的html代码
					alert(bj.innerHTML);
				};
				
				
				//为id为btn02的按钮绑定一个单击响应函数
				var btn02 = document.getElementById("btn02");
				btn02.onclick = function(){
					//查找所有li节点
					//getElementsByTagName()可以根据标签名来获取一组元素节点对象
					//这个方法会给我们返回一个类数组对象,所有查询到的元素都会封装到对象中
					//即使查询到的元素只有一个,也会封装到数组中返回
					var lis = document.getElementsByTagName("li");
					
					//打印lis
					//alert(lis.length);
					
					//变量lis
					for(var i=0 ; i<lis.length ; i++){
						alert(lis[i].innerHTML);
					}
				};
				
				
				//为id为btn03的按钮绑定一个单击响应函数
				var btn03 = document.getElementById("btn03");
				btn03.onclick = function(){
					//查找name=gender的所有节点
					var inputs = document.getElementsByName("gender");
					
					//alert(inputs.length);
					
					for(var i=0 ; i<inputs.length ; i++){
						/*
						 * innerHTML用于获取元素内部的HTML代码的
						 * 	对于自结束标签,这个属性没有意义
						 */
						//alert(inputs[i].innerHTML);
						/*
						 * 如果需要读取元素节点属性,
						 * 	直接使用 元素.属性名
						 * 		例子:元素.id 元素.name 元素.value
						 * 		注意:class属性不能采用这种方式,
						 * 			读取class属性时需要使用 元素.className
						 */
						alert(inputs[i].className);
					}
				};
				
				
				
				//查找#city下所有li节点
				//返回#city的所有子节点
				//返回#phone的第一个子节点
				//返回#bj的父节点
				//返回#android的前一个兄弟节点
				//读取#username的value属性值
				//设置#username的value属性值
				//返回#bj的文本值
				
			};
			
		
		</script>
	</head>
	<body>
		<div id="total">
			<div class="inner">
				<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 />

				<p>
					你手机的操作系统是?
				</p>

				<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
			</div>

			<div class="inner">
				gender:
				<input class="hello" type="radio" name="gender" value="male"/>
				Male
				<input class="hello" type="radio" name="gender" value="female"/>
				Female
				<br>
				<br>
				name:
				<input type="text" name="name" id="username" value="abcde"/>
			</div>
		</div>
		<div id="btnList">
			<div><button id="btn01">查找#bj节点</button></div>
			<div><button id="btn02">查找所有li节点</button></div>
			<div><button id="btn03">查找name=gender的所有节点</button></div>
			<div><button id="btn04">查找#city下所有li节点</button></div>
			<div><button id="btn05">返回#city的所有子节点</button></div>
			<div><button id="btn06">返回#phone的第一个子节点</button></div>
			<div><button id="btn07">返回#bj的父节点</button></div>
			<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
			<div><button id="btn09">返回#username的value属性值</button></div>
			<div><button id="btn10">设置#username的value属性值</button></div>
			<div><button id="btn11">返回#bj的文本值</button></div>
		</div>
	</body>
</html>

标签:返回,dom,JavaScript,bj,查询,查找,var,li,节点
From: https://www.cnblogs.com/chuixulvcao/p/17178923.html

相关文章

  • JavaScript 前后切换图片
    <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <styletype="text/css"> *{ margin:0; padding:0; } #outer......
  • JavaScript 邮件的正则
    <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <scripttype="text/javascript"> /* *电子邮件 * hello.nihao......
  • JavaScript Dom
    <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> </head> <body> <buttonid="btn">我是一个按钮</button> <scripttype="text/javasc......
  • JavaScript 正则表达式2
    <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <scripttype="text/javascript"> /* *创建一个正则表达式检查一个字符串中......
  • 2.JavaScript如何实现异步编程,可以详细描述EventLoop机制
    单线程和异步js的任务分为同步和异步两种,它们的处理方式也不同,同步任务是直接在主线程上排队执行,异步任务则会被放在任务队列中,若有多个任务(异步任务)则要在任务队列中排......
  • 浅谈下javascript的proxy和reflect
    近日喜欢上了uniapp和vue,但看到相关程序代码中频繁出现了proxy和reflect的使用,于是进行了一番学习,现总结如下。Proxy和Reflect是ES6(ECMAScript2015)引入的两个新的特性,它......
  • 关于 Javascript 的几种继承
    原型链的概念:原型链通俗易懂的理解就是可以把它想象成一个链条,互相连接构成一整串链子而原型链中就是实例对象和原型对象之间的链接每个函数都有一个prototype属性,这个p......
  • pymysql实现web多条件组合查询
       代码:importpymysqlfromrest_framework.viewsimportAPIViewfromrest_framework.responseimportResponse#Createyourviewshere.'''利用pymysql实现多......
  • JavaScript Modal Image
    <!DOCTYPEhtml><html><head><title>JavaScriptModalImage</title></head><styletype="text/css"> .modal{ position:fixed; z-index:1......
  • (数据库系统概论|王珊)第九章关系查询处理和关系优化-第二节:查询优化
    pdf下载:密码7281专栏目录首页:【专栏必读】(考研复试)数据库系统概论第五版(王珊)专栏学习笔记目录导航及课后习题答案详解目录一:查询优化概述(1)查询优化的地位和重要性(2)执......