<html>

  <head>

   <title>HTML示例</title>

   <style type="text/css">

   </style>

  </head>

  <body>

     <ul id="ulid">

         <li id="li1">qqqqq</li>

         <li id="li2">wwww</li>

         <li id="li3">yyyyyy</li>

         <li id="li4">test1111</li>

     </ul>

     <script type="text/javascript">

         //获取ul的第一个子节点 id=li1

         //得到ul

         var ul1 = document.getElementById("ulid");

         //第一个子节点

         var li1 = ul1.firstChild;

         alert(li1.id);

         //得到最后一个子节点

         var li4 = ul1.lastChild;

         alert(li4.id);

         //获取li的id是li3的上一个和下一个兄弟节点

         var li3 = document.getElementById("li3");

         alert(li3.nextSibling.id);

         alert(li3.previousSibling.id);

     </script>

  </body>

 </html>

以上案例在Google Chrome和IE是undefined,并且打印一下lastChildNode 显示是Object Text,是因为在高级浏览器里面,通过前述API拿到的第一和最后一个子标签是文本标签(文本节点),跟childNodes属性类似,因此,我们在碰到这些状况的时候,还是不建议使用,建议透过getElementsByTagName()的方法获取子元素.

解决办法：

不使用HTML DOM firstChild 属性、HTML DOM lastChild 属性、HTML DOM nextSibling 属性、HTML DOM previousSibling 属性

改为使用HTML DOM getElementsByTagName() 方法

 <html>

  <head>

   <title>HTML示例</title>

   <style type="text/css">

   </style>

  </head>

  <body>

     <ul id="ulid">

         <li id="li1">qqqqq</li>

         <li id="li2">wwww</li>

         <li id="li3">yyyyyy</li>

         <li id="li4">test1111</li>

     </ul>

     <script type="text/javascript">

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

         for (var i=0;i<li.length;i++) {

             alert(li[i].id);

         }

     </script>

  </body>

 </html>

HTML DOM firstChild lastChild nextSibling previousSibling 属性_获取属性值的undefined问题的更多相关文章

  1. 兼容的firstChild,lastChild,nextSibling,previousSibling写法

    在IE下是支持firstChild,lastChild,nextSibling,previousSibling 但是在FF下,由于它会把标签之间的空格当成文本节点,所以为了准确地找到相应的元素,会用 ...

  2. firstChild,lastChild,nextSibling,previousSibling & 兼容性写法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. java 反射机制--根据属性名获取属性值

    1.考虑安全访问范围内的属性,没有权限访问到的属性不读取 /** * 根据属性名获取属性值 * * @param fieldName * @param object * @return */ priv ...

  4. activity属性_ _activity 属性说明

    activity是android中使用非常平凡的一种组件,我们除了需要掌握activity中的生命周期以外,还需要掌握activity中的其 他设置. 1.activity 中主题的设置   andr ...

  5. Vue.js自定义标签属性并获取属性，及绑定img的src属性的坑

    一.定义属性: 一般定义属性都是为了动态的去获取属性的值,或者动态的设置属性的值,如果想仅仅是设置一个普通的属性,直接在便签上设置属性即可,就像使用html的title.name等属性一样,如< ...

  6. JQuery中操作元素的属性_对象属性

    我们主要是通过attr去获取元素的属性: 看body内容: <body> <p> 账号:<input type="text" id="una ...

  7. 第18课 类型萃取（2）_获取返回值类型的traits

    1. 获取可调用对象返回类型 (1)decltype:获取变量或表达式的类型(见第2课) (2)declval及原型 ①原型:template<class T> T&& d ...

  8. js对象通过属性路径获取属性值 - getPropByPath

    function getPropByPath(obj, path) { let tempObj = obj; path = path.replace(/\[(\w+)\]/g, '.$1'); pat ...

  9. jquery 获取属性的值

    jquery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写,在jQuery DOM操作中会经常用到attr(),attr()有4个表达式. 1.  attr( 属 ...

随机推荐

  1. 深入理解Java虚拟机——读书笔记

    首先 强烈推荐周志明老师的这本书,真的可以说是(起码中文出版界)新手了解Java虚拟机必须人手一本的教科书!!!   第二部分自动内存管理机制 由于Java虚拟机的多线程是通过线程轮流切换并分配处理器 ...

  2. ClassLoader源码分析与实例剖析

    在之前已经对类加载器做了不少实验了,这次主要是来分析一下ClassLoader的源码,当然主要是先从理解官方给它的注释开始,为之后自定义类加载器打好坚石的基础,下面开始: 而从类的层次结构来看也能感受 ...

  3. centos 最小化安装pycharm

    首先找到安装地址 https://www.jetbrains.com/pycharm/download/#section=linux 选择linux. 打开浏览器的network监视,我用的chrom ...

  4. 数据统计，包括mysql和MongoDB

    select ct.dt, COUNT(DISTINCT c.id) from tms_service_customer c, tms_dispatch_details d, (select DIST ...

  5. lite-monitor 一款基于shell命令的监控系统

    介绍 lite-monitor 一款基于shell命令的监控系统,可以根据项目中输出的日志定时输出或者统计输出,并发送钉钉机器人报警消息. lite-monitor能做什么: 定时监控某个服务进程是否 ...

  6. .configurable：可配执行 .enumerble：枚举性 .writable:可读写性 .value:数据值

    configurable:控制属性能否被删除,只有当属性的configurable特性的值为true时,该属性才能够被删除. 默认值为false,即不可删除) var person = {}; Obj ...

  7. Navicat Premium 12 安装 与 激活

    官方简体中文下载网址:https://www.navicat.com.cn/download/navicat-premium 安装的过程....(都是中文)所以略过. 开始破解....( ...... ...

  8. ACM-ICPC 2018 青岛赛区网络预赛 J. Press the Button（数学）

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=4056 题意:有一个按钮,时间倒计器和计数器,在时间[0,t]内, ...

  9. 题解 [BZOJ1295][SCOI2009] 最长距离

    题面 解析 \(n\)只有\(30\)可以直接枚举每个矩形, 判断他们的左上角到右下角或右上角到左上角的最短路是否小于\(T\). 最短路可以用\(dijkstra\). 一开始想用\(DP\)写最短 ...

  10. 内置对象：Math

    JavaScript内置函数Math.random()自定义封装函数:1,Math.floor(Math.random()*(b-a+1)+a)  随机生成a到b之间的整数. 也可以写成:Math.f ...