如何来获取元素节点:

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. video视频铺满

    1. 因项目需求,要在公司官网加一段视频,达到的效果是视频平铺整个网页,大小随网页变化:网上找了许久才找了了这么一个生僻的属性,只需给video加这么个样式就可以了:object-fit: fill; ...

  2. 小白的Python之路 day1

    Python之路,Day1 - Python基础1 本节内容 Python介绍 发展史 Python 2 or 3? 一. Python介绍 python的创始人为吉多·范罗苏姆(Guido van ...

  3. MySQL用户管理及SQL语句详解

    1.1 MySQL用户管理 1.1.1 用户的定义 用户名+主机域 mysql> select user,host,password from mysql.user; +--------+--- ...

  4. Reminders在电商推荐中的价值

    原论文在UMAP'16.文章并没有太高深的模型,比较接地气:但其观点与结论很独到,并且在工业界具有很强的实际操作价值. 针对推荐系统的研究大多关注在挖掘用户并不知道但是却与其兴趣相关的物品.不过每个推 ...

  5. NGUI_Input

    九.输入框Input 1.凡是用户可以输入文本的地方,几乎都用输入框,有登录账号和密码.输入角色名称.输入聊天内容 2.手动拼接输入框,拖动预制体的就不再说了 (1).创建一个Sprite作为输入框的 ...

  6. Mysql的管理及使用

    第1章 Mysql的管理 1.1 连接管理mysql mysql[options] #Linux或UNIX shell提示符(终端窗口) mysql --help #查看帮助信息 mysql --ve ...

  7. ExtJs 带参数的MVC

    题记:研究使用ext两个星期了,从痛苦中逐渐走向明朗. 展示列表的子列表的数据时需要将当前的数据传给下一个mvc. 比如用户列表,点击一个用户查看该用户的日志列表. 首先是controller,放一个 ...

  8. archsummit2017见闻和思考

    前几天参加了archsummit的北京站.2天的日程安排的十分紧凑,大多数时间同时有多场专题分享,选择想要听的专题就成了首要的事情,按照感兴趣的,可能用到的,启发思考的原则选择了几场适合自己的专题,这 ...

  9. stanford-parser for C#

    在项目里用到C#对英文句子进行词性标注.比較成熟的英文词性标注软件是stanford-parser.它个C#版本号,也是借助于IKVM完毕JAVA-C#的转换.详细配置过程例如以下: 1.下载stan ...

  10. SpringMVC+ZTree实现树形菜单权限配置

    计划在开源项目里加入权限配置的功能,打算加入zTree实现树形结构. Team的Github开源项目链接:https://github.com/u014427391/jeeplatform 欢迎sta ...