JavaScript的学习之DOM的查询(一)

一、获得元素

通过document对象调用:

  1. getElementById():通过id属性获取一个元素节点对象
  2. getElementsByTagName():通过标签名获取一组元素节点对象
  3. getElementsByName():通过name属性来获取一组元素节点对象

核心学习代码

html 复制代码
		<script>
			//完成下面的按钮的功能
			window.onload = function() {
				var btn01 = document.getElementById('btn01');
				// 为id为btn01的按钮绑定一个单击响应函数
				btn01.onclick = function() {
					// 查找#bj节点
					var bj = document.getElementById('bj');
					alert(bj.innerHTML);
				};
				// 查找所有li节点
				var btn02 = document.getElementById('btn02');
				btn02.onclick = function(){
					var lis = document.getElementsByTagName('li');
					// getElementsByTagName获得的是一组元素节点对象
					for(var i = 0;i<lis.length;i++){
						alert(lis[i].innerHTML);
					}
				};
				// 查找name=gender的所有节点
				var btn03 = document.getElementById('btn03');
				btn03.onclick = function(){
					var inputs = document.getElementsByName('gender');
					for (var i=0;i<inputs.length;i++){
						// 对于自结标签可以直接通过标签名来获取
						// 对于class属性不能直接.class,只能通过className方式
						alert(inputs[i].value);
					}
				}
				// 查找#city下所有li节点
				// 返回#city所有子节点
				// 返回#phone的第一个子节点
				// 返回#bj的父节点
				// 返回#android的前一个兄弟节点
				// 返回#username的value属性值
				// 设置#username的value属性值
				// 返回#bj的文本值
			}
		</script>

代码示例

html 复制代码
<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//完成下面的按钮的功能
			window.onload = function() {
				var btn01 = document.getElementById('btn01');
				// 为id为btn01的按钮绑定一个单击响应函数
				btn01.onclick = function() {
					// 查找#bj节点
					var bj = document.getElementById('bj');
					alert(bj.innerHTML);
				};
				// 查找所有li节点
				var btn02 = document.getElementById('btn02');
				btn02.onclick = function(){
					var lis = document.getElementsByTagName('li');
					// getElementsByTagName获得的是一组元素节点对象
					for(var i = 0;i<lis.length;i++){
						alert(lis[i].innerHTML);
					}
				};
				// 查找name=gender的所有节点
				var btn03 = document.getElementById('btn03');
				btn03.onclick = function(){
					var inputs = document.getElementsByName('gender');
					for (var i=0;i<inputs.length;i++){
						// 对于自结标签可以直接通过标签名来获取
						// 对于class属性不能直接.class,只能通过className方式
						alert(inputs[i].value);
					}
				}
				// 查找#city下所有li节点
				// 返回#city所有子节点
				// 返回#phone的第一个子节点
				// 返回#bj的父节点
				// 返回#android的前一个兄弟节点
				// 返回#username的value属性值
				// 设置#username的value属性值
				// 返回#bj的文本值
			}
		</script>
	</head>
	<body>
		<div class="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 id="phone">IOS</li>
					<li id="android">Android</li>
					<li>Windows Phone</li>
				</ul>
			</div>
			<div class="inner">
				genner:
				<input type="radio" name="gender" value="male" />
				Male:
				<input type="radio" name="gender" value="female" />
				Female:
				<br />
				<br />
				name:
				<input type="text" name="name" value="abcd" />
			</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的学习之文档的加载

相关推荐
mCell3 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip3 小时前
Node.js 子进程:child_process
前端·javascript
excel6 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel7 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼9 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping9 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙9 小时前
[译] Composition in CSS
前端·css
白水清风10 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix10 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780010 小时前
new、原型和原型链浅析
前端·javascript