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的学习之文档的加载

相关推荐
quweiie15 分钟前
tp8.0\jwt接口安全验证
前端·安全·jwt·thinkphp
xiaoyan201531 分钟前
最新Flutter3.32+Dart3仿微信App聊天实例
前端·flutter·dart
汪敏wangmin1 小时前
Fiddler-抓包后直接生成Loadrunner脚本或者Jmeter脚本
前端·jmeter·fiddler
彤银浦2 小时前
Web学习笔记3
前端·笔记·学习·html5
之歆2 小时前
Python-魔术方法-创建、初始化与销毁-hash-bool-可视化-运算符重载-容器和大小-可调用对象-上下文管理-反射-描述器-二分-学习笔记
笔记·python·学习
江城开朗的豌豆2 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
优乐美香芋味好喝2 小时前
2025年7月11日学习笔记&一周归纳——模式识别与机器学习
笔记·学习·机器学习
江城开朗的豌豆2 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆2 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js
我在北京coding2 小时前
el-tree 懒加载 loadNode
前端·vue.js·elementui