<!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查询的更多相关文章

  1. 缓存dom查询

    为了提高性能缓存dom查询; 页面效果:

  2. JavaScript之DOM查询

    DOM查询 - 通过具体的元素节点来查询 - 元素.getElementsByTagName() - 通过标签名查询当前元素的指定后代元素,返回数组 - 元素.childNodes - 获取当前元素的 ...

  3. JavaScript中DOM查询封装函数

    在JavaScript中可以通过BOM查询html文档中的元素,也就是所谓的在html中获取对象然后对它添加一个函数. 常用的方法有以下几种: ①document.getElementById() 通 ...

  4. 一个简单的dom查询函数

    var regid = /^#([\w-]*)$/, regClass = /^\.([\w-]*)$/, regName = /^(div|a|p|ul|li|input|select|docume ...

  5. DOM查询的其他方法

    document.body 保存的是body的引用 documen.documentElement 保存的是html根标签 document.all 代表页面中所有的元素 getElementsByC ...

  6. JavaScript DOM查询，原生js实现元素子节点的获取

    在网页网页开发中,经常会需要获取某个网页元素的子元素,然后对其进行事件绑定.或样式修改等行为.这些操作对于jquery来说很容易,但是对于原生js会稍微麻烦一些,这里将介绍四种方法获取元素的子元素(本 ...

  7. JS实例-DOM查询

    <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" ...

  8. [转]ExtJs基础--Html DOM、Ext Element及Component三者之间的区别

    要学习及应用好Ext框架,必须需要理解Html DOM.Ext Element及Component三者之间的区别. 每一个HTML页面都有一个层次分明的DOM树模型,浏览器中的所有内容都有相应的DOM ...

  9. ExtJs基础知识总结：Dom、IFrame和TreePanel、TabPanel（三）

    概述 ExtJs是另外一种操作封装JavaScript的类库与Jquery同类.所以对Dom的操作也是支持的,比如修改Div内Html内容等操作.有几个问题需要思考下: 1.ExtJs也支持IFram ...

随机推荐

  1. Csharp and Vbscript: Encryption/Decryption Functional

      1 /// <summary>   2     /// 塗聚文   3     /// 20130621   4     /// 自定义字符串加密解密   5     /// < ...

  2. html的标签（1）

    首先补充上一次没有讲到的,html文件后缀名有2种,一种是.htm,一种是.html..html是老的教科书里面的文件后缀名,.html是新的教科书的文件后缀名..htm文件是不完整的支持html5的 ...

  3. Objective C 中的BOOL, bool, Boolean理解

    一. 1.类型不同 BOOL为int型 bool为布尔型 2.长度不同 bool只有一个字节 BOOL长度视实际环境来定,一般可认为是4个字节 3.取值不同 bool取值false和true,是0和1 ...

  4. 设备信息工具pv-jd快速上手

    pv-jd 这是一个判断设备信息的小工具,可以判断出移动端还是PC端,提供了多种API 快速开始 安装npm install pv-jd -S 示例 import {judgeDevice, judg ...

  5. phpmyadmin-错误：配置文件权限错误，不应任何用户都能修改！这里有答案

    今天在linux下使用phpMyadmin的时候突然出现这个红色警告.差点把我吓晕在电脑前.不过冷静想一下这个报错,肯定就是linux权限那几个 ‘7’ 惹的祸. 于是 通过命令  ‘ll’ (这是英 ...

  6. FCKEditor编辑器添加中文字体的方法

    默认情况下,FCKEditor在进行文本编辑时,无法使用中文字体.让其添加中文字体的方法: 1.打开 fckconfig.js 文件,找到第154行(大概),会发现: 程序代码: FCKConfig. ...

  7. spring----spring中的注解@service等的作用

    service  是有用的相当于 xml配置中得bean  id = service  也可以不指定 不指定相当于 bean id =  com. service.service 就是这个类的全限定名 ...

  8. GridView——标题行自适应单元格列宽与选中单元格变色

    首先看效果图: 主要实现—— 1.前台GridView代码: <asp:GridView Height="100%" Width="98%" ID=&qu ...

  9. SQL Server 数据库修改后不允许保存

    打开 工具 - > 选项 -> 设计器,确认[阻止保存要求重新创建表的更改]项是否选中,如果选中,取消即可.

  10. (原创)攻击方式学习之(3) - 缓冲区溢出(Buffer Overflow)

    堆栈溢出 堆栈溢出通常是所有的缓冲区溢出中最容易进行利用的.了解堆栈溢出之前,先了解以下几个概念: 缓冲区 简单说来是一块连续的计算机内存区域,可以保存相同数据类型的多个实例. 堆栈     堆 栈是 ...