<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. 通过轻量级终端工具Tera Term远程向linux操作系统上传war文件

    通过轻量级终端工具Tera Term远程向linux操作系统上传war文件 1.打开Tera Term终端工具,并输入正确的远程机器的IP地址以及端口号: 2.输入正确的用户名和密码进入到linux操 ...

  2. 编译teamtalk遇到的问题

    一.编译log4cxx遇到的问题 1.error: narrowing conversion 这是在gcc-6下面一个官方的错误 解决方法 https://issues.apache.org/jira ...

  3. Python GUI--Tkinter简单实现个性签名设计

    一.Tkinter的介绍和简单教程Tkinter 是 Python 的标准 GUI 库.Python 使用 Tkinter 可以快速的创建 GUI 应用程序.由于 Tkinter 是内置到 pytho ...

  4. MNPR--造福人类的人值得被感激

    https://artineering.io/research/MNPR/ https://mnpr.artineering.io https://pdfs.semanticscholar.org/0 ...

  5. 以组件的方式，添加redis_cache

    settings.py中文件内设置如下: CACHES = { 'default':{ 'BACKEND':'django_redis.cache.RedisCache', 'LOCATION':'r ...

  6. 给你自己的博客加个 Markdown

    今天给大家推荐一个简单易用的开源 Markdown 组件, Markdown 组件仓库地址是: https://github.com/pandao/editor.md Markdown 是什么 Mar ...

  7. nginx反向代理tomcat 时，出现https redirect后变成http的问题解决方法

    需要修改两个配置 1.nginx配置 location / { proxy_pass http://test-server; proxy_set_header Host $host; proxy_se ...

  8. bbs项目---表关系

    表关系 用户表个人博客表点赞表文章表文章描述表文章和标签多对多关系表评论表分类表标签表 表关系设计示例收集: 1 https://bbs.csdn.net/topics/390260474 2 上图博 ...

  9. windows内核情景分析之中断处理(毛德操)[转]

    中断处理 每个cpu有一张中断表,简称IDT. IDT的整体布局:[异常->空白->5系->硬](推荐采用7字口诀的方式重点记忆) 异常:前20个表项存放着各个异常的描述符(IDT表 ...

  10. 洛谷——P2058 海港

    题目传送 由于于题目保证输入的ti是递增的,所以发现当我们统计完一艘船的答案后,这个答案多少会对下一艘船的答案有贡献.同时还发现如果对每个艘船都记录他的乘客在整个数据出现的所有国籍中相应出现的次数,在 ...