<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. 为什么Microsoft Office 2016安装时不能自选安装组件和安装路径？

    使用特别版本的安装镜像文件 SW_DVD5_Office_Professional_Plus_2016_64Bit_ChnSimp_MLF_X20-42426.iso,请自行搜索和下载 文件: SW_ ...

  2. JAVA-如何打包成jar包

    主线:编译 - 打包 - 运行 准备工作: 1. 手动打可直接执行的jar包 1) 先使用javac编译java文件,得到class文件 2) 新建文件,名字任起,比如可以叫manifest,内容如下 ...

  3. Java NIO 学习笔记一

    缓冲区操作 进程执行I/O操作,归结起来就是向操作系统发出请求,它要么把缓存区例的数据排干(写),要么用数据把数据区填满(读).进程使用这一机制处理所有数据进出操作. 进程使用read()系统调用,要 ...

  4. percona-toolkit主从同步整理（MySQL）

    前言:MYSQL主从同步架构是目前使用最多的数据库架构之一,尤其是负载比较大的网站,因此对于主从同步的管理也就显得非常重要.而数据作为软件的核心部分,对于其有效的管理显得更为重要.随着时间的推移,软件 ...

  5. BZOJ 3772: 精神污染 (dfs序+树状数组)

    跟 BZOJ 4009: [HNOI2015]接水果一样- CODE #include <set> #include <queue> #include <cctype&g ...

  6. python中模块、包、库的区别和使用

    模块:就是.py文件,里面定义了一些函数和变量,需要的时候就可以导入这些模块. 包:在模块之上的概念,为了方便管理而将文件进行打包.包目录下第一个文件便是 __init__.py,然后是一些模块文件和 ...

  7. Enable file editing in Visual Studio's debug mode

    Visual Studio 使用及调试必知必会 http://www.cnblogs.com/luminji/p/3287728.html How do I enable file editing i ...

  8. luogu 4234 最小差值生成树 LCT

    感觉码力严重下降~ #include <bits/stdc++.h> #define N 400006 #define inf 1000000000 #define setIO(s) fr ...

  9. dup2函数

    将当前系统中的进程信息打印到文件中 命令行:ps aux > out 将ps得到的信息重定向到out文件中 使用dup2文件在程序中完成. int dup2(int oldfd,int newf ...

  10. 泛目录程序(莲花泛目录程序/黑帽SEO/寄生虫/莲花泛目录解析/泛目录软件)

    莲花泛目录程序强大之处: 1.内容分类详细2.自动推送URL链接3.内置超强原创内容功能系统,页面深受百度搜索引擎喜爱.4.蜘蛛触发繁殖:蜘蛛触发程序任何页面,程序自动生成独立页面并引导繁殖.5.操作 ...