DOM查询
2024-10-21 07:50:10
<!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>
最新文章
- 网站收集ing....
- [教程] [承風雅傳HSU]用ES4封裝Win7---ES4 Win7封裝教程(未完待續)
- KindleEditor上传文件报404
- Thinkphp 边学边用-验证码无意间犯的错
- Heap:Sunscreen(POJ 3614)
- 【C语言】06-基本数据类型
- UCOS-信号量(学习笔记)
- JavaWeb之 Servlet执行过程 与 生命周期
- Django admin的一些有用定制
- Groovy选型
- sql语句聚合等疑难问题收集
- Typescript 团队合作的利器
- ural 1932 The Secret of Identifier (容斥原理)
- burpsuite截断上传webshell
- deeplearning.ai 人工智能行业大师访谈 Yoshua Bengio 听课笔记
- elastalert
- Hibernate各种基本注解及一对一(多)关系映射采坑笔记
- Java并发编程(五)-- Java内存模型补充
- (3.1)mysql备份与恢复之mysqldump
- [Python] 怎么把HTML的报告转换为图片,利用无头浏览器
热门文章
- HihoCoder#1279 : Rikka with Sequence(dp 枚举子集 二进制 神仙题)
- java应用程序已被安全设置阻止的解决办法(总有一个适合你)
- iDempiere 使用指南 测试 及 开发 虚拟机下载
- Daily paper -Science 2006: Experimental Study of Inequality and Unpredictability in an Artificial Cultural Market (探究群体行为对商品销量的影响)
- Java—集合框架Map
- 把web项目改造为maven项目
- Linux--LAMP平台搭建
- O/S-Error: (OS 23) Data error (cyclic redundancy check)问题处理
- Oracle分区表分批迁移
- May 29th 2017 Week 22nd Monday