如何来获取元素节点:

1) .document.getElementById: 根据 id 属性获取对应的单个节点

2) .document.getElementsByTagName:
根据标签名获取指定节点名字的数组, 数组对象 length 属性可以获取数组的长度

3) .document.getElementsByName:
根据节点的 name 属性获取符合条件的节点数组,
但 ie 的实现方式和 W3C 标准有差别:
在 html 文档中若某节点(li)没有 name 属性,　
则 ie 使用 getElementsByName 不能获取到节点数组, 但火狐可以.

4). 其它的两个方法,　ie 根本就不支持, 所以不建议使用

 <html>

     <head>

         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

         <title>Untitled Document</title>

         <script type="text/javascript">

             //获取指定的元素节点.

             window.onload = function(){

                 //1. 获取 id 为 bj 的那个节点.

                 //在编写 HTML 文档时, 需确保 id 属性值是唯一的.

                 //该方法为 document 对象的方法

                 var bjNode = document.getElementById("bj");

                 alert(bjNode);

                 //2. 获取所有的 li 节点.

                 //使用标签名获取指定节点的集合.

                 //该方法为 Node 接口的方法, 即任何一个节点都有这个方法.

                 var liNodes = document.getElementsByTagName("li");

                 alert(liNodes.length);

                 //获取指定节点的li

                 var cityNode = document.getElementById("city");

                 var cityLiNodes = cityNode.getElementsByTagName("li");

                 alert(cityLiNodes.length);

                 //3. 根据 HTML 文档元素的 name 属性名来获取指定的节点的集合.

                 var genderNodes = document.getElementsByName("gender");

                 alert(genderNodes.length);

                 //若 HTML 元素自身没有定义 name 属性, 则 getElementsByName()

                 //方法对于 IE 无效. 所以使用该方法时需谨慎.

                 var bjNode2 = document.getElementsByName("BeiJing");

                 alert(bjNode2.length);

             }

         </script>

     </head>

     <body>

         <p>你喜欢哪个城市?</p>

         <ul id="city">

             <li id="bj" name="BeiJing">北京</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>

         gender:

             <input type="radio" name="gender" value="male"/>Male

             <input type="radio" name="gender" value="female"/>Female

     </body>

 </html>

JavaScript的DOM编程--02--获取元素节点的更多相关文章

  1. JavaScript的DOM编程--04--获取元素节点的子节点

    获取元素节点的子节点(**只有元素节点才有子节点!!) 1). childNodes 属性获取全部的子节点, 但该方法不实用. 因为如果要获取指定的节点 的指定子节点的集合, 可以直接调用元素节点的 ...

  2. JavaScript的DOM编程--03--读写属性节点

    读写属性节点: 1)可以直接通过 cityNode.id 这样的方式来获取和设置属性节点的值 2)通过元素节点的 getAttributeNode 方法来获取属性节点, 然后在通过 nodeValue ...

  3. javascript之DOM编程通过html元素的标签属性找节点

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. JavaScript之怎样获取元素节点

    JavaScript获取元素节点一共有三种方法,分别是通过元素ID.通过标签名字和通过类名字来获取: 1.通过元素ID属性的ID值来获得元素对象-getElementById() DOM提供了一个名为 ...

  5. JavaScript的DOM编程--05--获取文本节点

    获取文本节点: 1). 步骤: 元素节点 --> 获取元素节点的子节点 2). 若元素节点只有文本节点一个子节点, 例如 <li id="bj" name=" ...

  6. HTML、css、javascript、DOM编程

    HTML.css.javascript.DOM编程 一.Html 1.1html概述 Html就是超文本标记语言的简写,是最基础的网页语言,其代码都是由标签所组成,是通过标签来定义的语言,代码不需要区 ...

  7. 初探JavaScript（一）——也谈元素节点、属性节点、文本节点

    Javascript大行其道的时候,怎么能少了我来凑凑热闹^_^ 基本上自己对于js的知识储备很少,先前有用过JQuery实现一些简单功能,要论起JS的前世今生,来龙去脉,我就一小白.抱起一本< ...

  8. 高性能Javascript(2) DOM编程

    第三部分 DOM编程 文档对象模型(DOM)是一个独立于语言的,使用XML和HTML文档操作的应用程序接口(API).在浏览器中,主要与HTML文档打交道,在网页应用中检索XML文档也很常见.DOM ...

  9. JavaScript的DOM编程--08--复习

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

随机推荐

  1. 这一次带你彻底了解Cookie

    前言 网络早期最大的问题之一是如何管理状态.简而言之,服务器无法知道两个请求是否来自同一个浏览器.当时最简单的方法是在请求时,在页面中插入一些参数,并在下一个请求中传回参数.这需要使用包含参数的隐藏的 ...

  2. POJ 1511 Invitation Cards 链式前向星+spfa+反向建边

    Invitation Cards Time Limit: 8000MS   Memory Limit: 262144K Total Submissions: 27200   Accepted: 902 ...

  3. javascript设计模式——策略模式

    前面的话 在程序设计中,常常遇到类似的情况,要实现某一个功能有多种方案可以选择.比如一个压缩文件的程序,既可以选择zip算法,也可以选择gzip算法.这些算法灵活多样,而且可以随意互相替换.这种解决方 ...

  4. EasyUI实现异步载入tree(整合Struts2)

    首先jsp页面有一ul用于展现Tree <ul id="mytree"></ul> 载入Tree <script type="text/ja ...

  5. 揭秘传智播客班级毕业薪资超7k的内幕系列 之三 ----国企慕名而来，将未毕业学员“抢走”，传智播客又一次定义“被就业”

    前面文章提及Java六期学员张同学提前就业某国企,入职薪资6.3k,各种福利齐全.作为班级首位就业同学,他的就业也成为了班级其它同学就业的风向标.但事实上张同学的就业属于"被就业" ...

  6. 牛腩新闻公布系统--学习Web的小技巧汇总

    2014年11月10日,是个难忘的日子.这一天.小编的BS学习開始了.BS的开头,从牛腩新闻公布系统開始.之前学习的内容都是CS方面的知识,软考过后.開始学习BS,接触BS有几天的时间了,跟着牛腩老师 ...

  7. 联通假4G欺骗消费者！

    之前预约了联通4G升级,官网说从4月18日開始到5月1月生效.4月18日到5月1日之间10010会联系预约用户更改套餐.24号收到联通业务员打来电话,明白告知:联通4G仅仅是套餐是4G的.网络还是3G ...

  8. 【SqlServer】【问题收集】阻止保存要求重新创建表的更改

    1   概述 阻止保存要求重新创建表的更改,场景是这样的:假设数据库中有一张员工表EmployeeInfo,如下所示: 其中有个字段EmployeeBirthday,在设计表时,其类型误设为VARCH ...

  9. intellij idea 在什么地方打开终端Terminal

    File→Plugins→Terminal 勾选它,点击Apply,点击Restart即可如果是要启动terminal则必须先做完上面动作,才可以点击Tools→Open Terminal... 来达 ...

  10. OpenCASCADE构造一般曲面

    OpenCASCADE构造一般曲面 eryar@163.com Abstract. 本文主要介绍常见的曲面如一般柱面(拉伸曲面).旋转面在OpenCASCADE中的构造方法,由此思考一般放样算法的实现 ...