DOM查询
<!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查询的更多相关文章
- 缓存dom查询
为了提高性能缓存dom查询; 页面效果:
- JavaScript之DOM查询
DOM查询 - 通过具体的元素节点来查询 - 元素.getElementsByTagName() - 通过标签名查询当前元素的指定后代元素,返回数组 - 元素.childNodes - 获取当前元素的 ...
- JavaScript中DOM查询封装函数
在JavaScript中可以通过BOM查询html文档中的元素,也就是所谓的在html中获取对象然后对它添加一个函数. 常用的方法有以下几种: ①document.getElementById() 通 ...
- 一个简单的dom查询函数
var regid = /^#([\w-]*)$/, regClass = /^\.([\w-]*)$/, regName = /^(div|a|p|ul|li|input|select|docume ...
- DOM查询的其他方法
document.body 保存的是body的引用 documen.documentElement 保存的是html根标签 document.all 代表页面中所有的元素 getElementsByC ...
- JavaScript DOM查询，原生js实现元素子节点的获取
在网页网页开发中,经常会需要获取某个网页元素的子元素,然后对其进行事件绑定.或样式修改等行为.这些操作对于jquery来说很容易,但是对于原生js会稍微麻烦一些,这里将介绍四种方法获取元素的子元素(本 ...
- JS实例-DOM查询
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" ...
- [转]ExtJs基础--Html DOM、Ext Element及Component三者之间的区别
要学习及应用好Ext框架,必须需要理解Html DOM.Ext Element及Component三者之间的区别. 每一个HTML页面都有一个层次分明的DOM树模型,浏览器中的所有内容都有相应的DOM ...
- ExtJs基础知识总结：Dom、IFrame和TreePanel、TabPanel（三）
概述 ExtJs是另外一种操作封装JavaScript的类库与Jquery同类.所以对Dom的操作也是支持的,比如修改Div内Html内容等操作.有几个问题需要思考下: 1.ExtJs也支持IFram ...
随机推荐
- 从零开始的全栈工程师——html篇1.2
起名方式与CSS 一.起名方式(起名方式也叫选择器) 起名的目的是为了给标签添加属性 常见的3种选择器有 标签选择器 id选择器(使用的时候加#) class选择器(使用的时候加.) 样式的 ...
- Mac安装Gradle eclipse安装buildship插件
一直用的eclipse+mvn,现在需要导入别人的gradle项目,所以下载了gradle和在eclipse中安装了buildship插件. 一,mac下安装gradle 1,点击网页https:// ...
- html的标签（1）
首先补充上一次没有讲到的,html文件后缀名有2种,一种是.htm,一种是.html..html是老的教科书里面的文件后缀名,.html是新的教科书的文件后缀名..htm文件是不完整的支持html5的 ...
- .NET开源工作流RoadFlow-表单设计-下拉列表
下拉列表即<select></select>标签,相关选项与单选按钮组相同: 是否添加空项:即在下拉列表的开头是否添加一个空的选项<option value=" ...
- ORACLE中一个字符占多少字节？
问题描述 或许你会说一个中文字符占2个字节,这是一定的?如何计算一个字符串的字节数? 解决方案 在oracle中一个字符特别是中文占几个字节是不同的. 比如我创立一个表create table tes ...
- Angular项目新建
Angular新建项目步骤记录 标签(空格分隔): Angular 1. ng new my-app 2. 启动dev环境 cd my-app ng serve --open 3. 修改styles. ...
- 路由 vue-router
vue-router官方文档 1.router跳转页面 编程式的导航 this.$router.push('/index'); 2.mode Router构造配置 const router = new ...
- 基于CAS的SSO单点登录-实现ajax跨域访问的自动登录（也相当于超时重连）
先补课,以下网址可以把CAS环境搭起来. [JA-SIG CAS服务环境搭建]http://linliangyi2007.iteye.com/blog/165307 [JA-SIG CAS业务架构介绍 ...
- 初识Scrum
团队作业起步 一.团队 队名:想吃蛋炒饭 成员: 许俊杰 肖豪雄 王重和 罗艺璇 曾舒妮 也许是我们队长的人的博客:许俊杰的博客 二.Scrum学习心得 Scrum是迭代式增量软件开发过程,通常用于敏 ...
- 如何用ABAP代码读取CDS view association的数据
我有如下一个CDS view, 这个view的数据来自CRMD_ORDERADM_H, 定义了一个名称为_statushelp的association, 指向了另一个CDS view Z_C_Stat ...