JavaScript的DOM编程--02--获取元素节点

时间：2022-12-13 22:16:02

如何来获取元素节点:

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&lpar;2&rpar; 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. python解析RSS（feedparser）

    虽然说当今的博客已经不像前几年那么火了,但是RSS还是一项很有创造性和实用性的东西.RSS 是用于分发 Web 站点上的内容的摘要的一种简单的 XML 格式.它能够用于共享各种各样的信息.关于RSS的 ...

  2. Scrum 项目 6&period;0 sprint演示

    6.0----------------------------------------------------- sprint演示 1.坚持所有的sprint都结束于演示. 团队的成果得到认可,会感觉 ...

  3. &lbrack;转&rsqb;ios 开发file&&num;39&semi;s owner以及outlet与连线的理解

    转载地址:http://www.cocoachina.com/bbs/simple/?t108822.html xib文件本身可以看做是一个xml,app启动的时候会根据xml构造xib对应的界面及其 ...

  4. Frameworks ， cat，kafka

    https://github.com/ServiceStack/ServiceStack https://github.com/ctripcorp/ https://github.com/ctripc ...

  5. 为什么iphone手机比android手机流畅

    作为当下最流行.市场占用份额最大的两大手机操作系统IOS和android,目前两者加起来的市场占用率达到90%.我曾经一直用android手机,没有用过iphone,那时候正直iphone4和ipho ...

  6. phpcms v9 企业黄页系统发布没有表单出现的解决方案

    第一种解决方案: 第一步:把yp_UTF8压缩文件解压得到:api.caches.phpcms.statics四个文件夹. 第二步:把这四个文件夹分别覆盖已安装好的phpcms系统根目录下的文件夹.这 ...

  7. 模板--&gt&semi;Guass消元法&lpar;求解多元一次方程组&rpar;

    如果有相应的OJ题目,欢迎同学们提供相应的链接 相关链接 所有模板的快速链接 简单的测试 None 代码模板 /* * TIME COMPLEXITY:O(n^3) * PARAMS: * a The ...

  8. pythonweb服务器编程（四）

    Web动态服务器-1 #coding=utf-8 import socket import sys from multiprocessing import Process import re clas ...

  9. 学习MeteoInfo二次开发教程（八）

    总体没什么问题. 1.创建Projection菜单,Lambert,Geographic,ShowLatLon子菜单. 2.需要添加: using MeteoInfoC.Projections; 3. ...

  10. 将本地已有项目上传到github

    1.在github上创建一个文件 2.看本地C盘中是否有.ssh文件夹 (C:\Users\用户名\.ssh) 检测有没有.ssh文件夹:执行命令   cd ~/.ssh 如果没有的话执行git命令: ...

相关文章