如何来获取元素节点:

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. 算法训练 K好数

      算法训练 K好数   时间限制:1.0s   内存限制:256.0MB 问题描述 如果一个自然数N的K进制表示中任意的相邻的两位都不是相邻的数字,那么我们就说这个数是K好数.求L位K进制数中K好数 ...

  2. CentOS7操作系统参数优化

    生产环境配置需要标准化,将常用操作写成脚本用于操作系统的初始化. #!/bin/bash #Date:2017 #This Script is for centos7.3 init #01.配置yum ...

  3. 代码管理 ，git 命令整理

    //先要理解这四个概念,这是一个提交代码的流动轨迹:1.工作区(编辑器)-经过add到2- 2.暂存区 (缓存)- 经过commit3-3.本地仓库 (本地项目)-经过 push4-4.远程仓库 (线 ...

  4. Python的列表

    1. Python的列表简介 1. 1 列表的定义 列表是Python中最基本的数据结构,列表是最常用的Python数据类型,列表的数据项不需要具有相同的类型.列表中的每个元素都分配一个数字 ,即它的 ...

  5. python3.6 +tkinter GUI编程 实现界面化的文本处理工具

    更新: 2017.07.17 补充滚动条.win批处理拉起py 2017.08.13 新增自定义图标 --------原创      blogs:    http://www.cnblogs.com/ ...

  6. 》》jquery-weui 初

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta na ...

  7. [Maven实战]（7）坐标

    1. 简单介绍 maven的世界中拥有数量很巨大的构件,也就是平时用的一些jar,war等文件. 在maven为这些构件引入坐标概念之前,我们无法使用不论什么一种方式来唯一标识全部这些构件. 因此,当 ...

  8. RedHat Linux AS4 DNS 配置

     RedHat Linux AS4 DNS配置   检查当前系统中安装 DNS功能组件bind情况 [root@svr01 /]# rpm -qa|grep bind* ypbind-1.17.2 ...

  9. shell脚本小案例

    1.获取远程ftp数据到本地目录 #!/bin/bash ftp -n<<! open 135.0.24.19 user exchange exchange binary cd /idep ...

  10. mybatis防止sql注入

         SQL注入是一种代码注入技术,用于攻击数据驱动的应用,恶意的SQL语句被插入到执行的实体字段中(例如,为了转储数据库内容给攻击者).[摘自] SQL injection - Wikipedi ...