<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. idea中iml文件的问题

    idea中iml文件的问题 iml文件是idea组织工程的文件, 里面记录了各种记录模块, 文件夹以及依赖的信息, 显示如下: <?xml version="1.0" enc ...

  2. django国际化的简单设置

    设置国际化的具体步骤: 一.国际化 1)效果:针对不同的国家的人可以配置不同的语言(一般是英文和中文,  English  Chinese) 2)目的:增加项目的用户量 3)难度:不难 比较费劲的就是 ...

  3. 2.PAT 1001 害死人不偿命的(3 n + 1 )猜想

    题目: 卡拉兹(Callatz)猜想: 对任何一个正整数 n,如果它是偶数,那么把它砍掉一半:如果它是奇数,那么把 ( 砍掉一半.这样一直反复砍下去,最后一定在某一步得到 n=1.卡拉兹在 1950 ...

  4. 如何创建vue项目

    Vue项目环境搭建 """ node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内 ...

  5. appium自动化 - android

    1. 获取driver appium通过生成driver来识别和操作app的UI元素.生成driver时,需要给出被测设备的相关信息.appium官方上的例子如下: https://github.co ...

  6. CF311B Cats Transport（斜率优化）

    题目描述 Zxr960115 是一个大农场主.他养了m只可爱的猫子,雇佣了p个铲屎官.这里有一条又直又长的道路穿过了农场,有n个山丘坐落在道路周围,编号自左往右从1到n.山丘i与山丘i-1的距离是Di ...

  7. [2019HDU多校第一场][HDU 6578][A. Blank]

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6578 题目大意:长度为\(n\)的数组要求分别填入\(\{0,1,2,3\}\)四个数中的任意一个,有 ...

  8. vscode 远程编辑文件

    操作 安装扩展 remote-vscode 配置ssh 转发: 添加 RemoteForward 52698 127.0.0.1:52698 到 ~/.ssh/config: # Read more ...

  9. Java项目出现的问题02----学习

    1 框架配置无.java 在框架配置中当需要写类名是,注意是没有后面.java的 2 类中找不到main方法请将main方法定义为public static void main. 否则 JavaFX ...

  10. 路由器配置——OSPF协议（2）

    一.实验目的:使用OSPF协议达到全网互通的效果 二.拓扑图 三.具体步骤配置 (1)R1路由器配置 Router>enableRouter#configure terminalEnter co ...