获取元素节点的子节点(**只有元素节点才有子节点!!)

1). childNodes 属性获取全部的子节点, 但该方法不实用. 因为如果要获取指定的节点
的指定子节点的集合, 可以直接调用元素节点的 getElementsByTagName() 方法来获取.
2). firstChild 属性获取第一个子节点
3). lastChild 属性获取最后一个子节点

  1.  <html>
  2.      <head>
  3.          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4.          <title>Untitled Document</title>
  5.  
  6.          <script type="text/javascript">
  7.  
  8.              //获取元素节点的子节点
  9.              window.onload = function(){
  10.  
  11.                  //1. 获取 #city 节点的所有子节点.
  12.                  var cityNode = document.getElementById("city");
  13.  
  14.                  //2. 利用元素节点的 childNodes 方法可以获取指定元素节点的所有子节点.
  15.                  //但该方法不实用.
  16.                  alert(cityNode.childNodes.length);
  17.  
  18.                  //3. 获取 #city 节点的所有 li 子节点.
  19.                  var cityLiNodes = cityNode.getElementsByTagName("li");
  20.                  alert(cityLiNodes.length);
  21.  
  22.                  //4. 获取指定节点的第一个子节点和最后一个子节点.
  23.                  alert(cityNode.firstChild);
  24.                  alert(cityNode.lastChild);
  25.              }
  26.  
  27.          </script>
  28.  
  29.      </head>
  30.      <body>
  31.          <p>你喜欢哪个城市?</p>
  32.          <ul id="city"><li id="bj" name="BeiJing">北京</li>
  33.              <li>上海</li>
  34.              <li>东京</li>
  35.              <li>首尔</li>
  36.          </ul>
  37.  
  38.          <br><br>
  39.          <p>你喜欢哪款单机游戏?</p>
  40.          <ul id="game">
  41.              <li id="rl">红警</li>
  42.              <li>实况</li>
  43.              <li>极品飞车</li>
  44.              <li>魔兽</li>
  45.          </ul>
  46.  
  47.          <br><br>
  48.          name: <input type="text" name="username"
  49.              id="name" value="atguigu"/>
  50.      </body>
  51.  </html>

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

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

    如何来获取元素节点: 1) .document.getElementById: 根据 id 属性获取对应的单个节点 2) .document.getElementsByTagName: 根据标签名获取 ...

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

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

  3. JavaScript的DOM编程--10--删除节点

    1). removeChild(): 从一个给定元素里删除一个子节点 var reference = element.removeChild(node); 返回值是一个指向已被删除的子节点的引用指针. ...

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

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

  5. HTML、css、javascript、DOM编程

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

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

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

  7. 总结获取原生JS(javascript)的父节点、子节点、兄弟节点

    关于原生JS获取节点,一直是个头疼的问题,而且调用方法的名字又贼长了,所以我选择用JQ,好像跑题了-- 话不多说看代码 获取父节点 及 父节点下所有子节点(兄弟节点) <ul> <l ...

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

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

  9. JavaScript之DOM对象的获取

    之前我们讲过JavaScript之DOM对象获取的两篇文章,本文是该系列文章之三,点击回顾上两篇文章能更好地理解本文.<JavaScript之DOM对象的获取(一)>: <JavaS ...

随机推荐

  1. MySql基础入门-mysql的结构层次

    了解MySql必须牢牢记住其体系结构图,Mysql是由SQL接口,解析器,优化器,缓存,存储引擎组成的. 1.Connectors指的是不同语言中与SQL的交互 2.Management Servei ...

  2. php结合redis实现高并发下的抢购、秒杀功能 (转载)

    抢购.秒杀是如今很常见的一个应用场景,主要需要解决的问题有两个: 1 高并发对数据库产生的压力 2 竞争状态下如何解决库存的正确减少("超卖"问题) 对于第一个问题,已经很容易想到 ...

  3. Code Kata:螺旋矩阵 javascript实现

    1 2 3 4  5 16 17 18 19 6 15 24 25 20 7 14 23 22 21 8 13 12 11 10 9  如图所示,就是一个5*5的螺旋矩阵 我的思路如下: 第一步:拆分 ...

  4. SpringBoot 整合Ehcache3

    SpringBootLean 是对springboot学习与研究项目,是依据实际项目的形式对进行配置与处理,欢迎star与fork. [oschina 地址] http://git.oschina.n ...

  5. BNUOJ34977夜空中最亮的星（数学，向量的应用）

    夜空中最亮的星 Time Limit: 2000ms Memory Limit: 65536KB 64-bit integer IO format: %lld      Java class name ...

  6. vim配置分享(持续更新中)

    作者:zhanhailiang 日期:2014-10-24 set nocompatible set nu   "" 自己主动缩进 syntax on set autoindent ...

  7. Lucene41PostingWriter源代码分析

    原来看lucene4.0的posting格式(http://blog.csdn.net/jollyjumper/article/details/30017581),发现这还是比較简单的VInt格式,据 ...

  8. 关于chrome浏览器的帐号密码和背景色的填充问题

    不知道大家平时做项目的时候有木有关注这个问题,其实之前做项目遇到过类似的问题,但是因为是单独的chrome浏览器的填充,而且是样式问题稍微严重点,也就没在意.然而在近期的项目中有遇到了这个问题,最为一 ...

  9. CI学习 CCNET Config 第一天

    CCNet的整体结构就是一个Xml文档,根元素就是cruisecontrol,具体的代码块如下所示: <cruisecontrol xmlns:cb="urn:ccnet.config ...

  10. Asp.net mvc 知多少（五）

    本系列主要翻译自<ASP.NET MVC Interview Questions and Answers >- By Shailendra Chauhan,想看英文原版的可访问http:/ ...