<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. bootstrap 表单验证 dem

    地址:http://www.jq22.com/yanshi522 一些api详解:http://blog.csdn.net/u013938465/article/details/53507109 ht ...

  2. linux——在windows上搭建linux练习环境

    程序员自己研究——java-linux-php——环境搭建 需要首选准备一个linux环境. 1,可用安装一个虚拟机:VMware虚拟机 2,安装一个VMware大约5分钟左右. 3,截止目前2019 ...

  3. linux基础_关机重启注销

    1.关机重启命令 (1)shutdown shutdown -h now:表示立即关机 shutdown -h 1:表示1分钟后关机 shutdown -r  now:立即重启 (2)halt:就是直 ...

  4. Maven打Dubbo可执行Jar

    POM文件中添加如下配置: <build> <finalName>test-jar</finalName> <resources> <resour ...

  5. Java8-Stream-No.12

    import java.util.ArrayList; import java.util.Arrays; import java.util.List; import java.util.UUID; i ...

  6. luogu 2279 [HNOI2003]消防局的设立 树形dp

    就是细节多一些,思路都非常常规. Code: #include <bits/stdc++.h> #define N 1005 #define inf 1061109567 #define ...

  7. 《30天自制操作系统》学习笔记--Mac下工具的使用

    现在来介绍官网上下的工具怎么用首先是官网地址,书上有个注释上有:hrb.osask.jp 翻译成中文大概是这个样子滴. 上面有两个文件可以下载,一个是工具,一个是工具的源代码,很好的学习资料 下面把工 ...

  8. GC 老年代 新生代

    参考资料: http://blog.csdn.net/flamezyg/article/details/44673951 http://www.blogjava.net/ldwblog/archive ...

  9. Github提交PR(pull request)过程

    PR 想一想, 也可以想执行6.7.8, 再执行4.5. 避免原仓库和fork仓库的冲突 fork到自己的仓库 git clone到本地 git remote add upstream [原项目地址] ...

  10. 修改tomcat控制台的标题

    Tomcat的bin目录下,创建一个名为setenv.bat的文件. setenv.bat  编辑内容 : set TITLE = 想要命名的标题名称  保存修改.重新启动. 第二种. 修改tomca ...