HTML DOM firstChild lastChild nextSibling previousSibling 属性_获取属性值的undefined问题
<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问题的更多相关文章
- 兼容的firstChild,lastChild,nextSibling,previousSibling写法
在IE下是支持firstChild,lastChild,nextSibling,previousSibling 但是在FF下,由于它会把标签之间的空格当成文本节点,所以为了准确地找到相应的元素,会用 ...
- firstChild,lastChild,nextSibling,previousSibling & 兼容性写法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- java 反射机制--根据属性名获取属性值
1.考虑安全访问范围内的属性,没有权限访问到的属性不读取 /** * 根据属性名获取属性值 * * @param fieldName * @param object * @return */ priv ...
- activity属性_ _activity 属性说明
activity是android中使用非常平凡的一种组件,我们除了需要掌握activity中的生命周期以外,还需要掌握activity中的其 他设置. 1.activity 中主题的设置 andr ...
- Vue.js自定义标签属性并获取属性，及绑定img的src属性的坑
一.定义属性: 一般定义属性都是为了动态的去获取属性的值,或者动态的设置属性的值,如果想仅仅是设置一个普通的属性,直接在便签上设置属性即可,就像使用html的title.name等属性一样,如< ...
- JQuery中操作元素的属性_对象属性
我们主要是通过attr去获取元素的属性: 看body内容: <body> <p> 账号:<input type="text" id="una ...
- 第18课 类型萃取（2）_获取返回值类型的traits
1. 获取可调用对象返回类型 (1)decltype:获取变量或表达式的类型(见第2课) (2)declval及原型 ①原型:template<class T> T&& d ...
- js对象通过属性路径获取属性值 - getPropByPath
function getPropByPath(obj, path) { let tempObj = obj; path = path.replace(/\[(\w+)\]/g, '.$1'); pat ...
- jquery 获取属性的值
jquery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写,在jQuery DOM操作中会经常用到attr(),attr()有4个表达式. 1. attr( 属 ...
随机推荐
- Caffe---Pycaffe进行网络结构(xxx.prototxt)可视化
Pycaffe---进行网络结构(xxx.prototxt)可视化 解决网络结构(xxx.prototxt)可视化,还可以借助python接口,编写一个类似如下的pycaffe_draw_net.py ...
- 牛客练习赛53 D 德育分博弈政治课 （思维建图，最大流）
牛客练习赛53 D德育分博弈政治课 链接:https://ac.nowcoder.com/acm/contest/1114/D来源:牛客网 题目描述 德育分学长最近玩起了骰子.他玩的骰子不同,他的骰子 ...
- Java&Selenium&JS&AWT之那些难以点击到的按钮
一.摘要 本篇博文的重点并不是简单的click()方法,而是要讲的是那些click()方法失效的时候的处理方式,其实做自动化久了我们都能发现研发的代码并不是都那么美丽,selenium支持的8种定位方 ...
- mysql乐观锁总结和实践（转载）
原文地址:http://chenzhou123520.iteye.com/blog/1863407 乐观锁介绍: 乐观锁( Optimistic Locking ) 相对悲观锁而言,乐观锁假设认为数据 ...
- Codeforces Round #509 (Div. 2) E. Tree Reconstruction（构造）
题目链接:http://codeforces.com/contest/1041/problem/E 题意:给出n - 1对pair,构造一颗树,使得断开其中一条边,树两边的最大值为 a 和 b . 题 ...
- JDK、JRE、JVM的区别与关系
JDK JDK是Java开发工具包,是Sun Microsystems针对Java开发员的产品. JDK中包含JRE,在JDK的安装目录下有一个名为jre的目录,里面有两个文件夹bin和lib,在这里 ...
- 【Android-布局复用】 多个界面复用一个布局文件（二）
多个界面复用一个布局界面 ,如何找到复用布局文件中的控件的id? 举个栗子: 1. layout_common.xml 复用的布局文件,如何找到button 的id? <?xml versio ...
- nginx常用命令和配置
1.常用命令 查看版本号: ./nginx -v 启动nginx:在/usr/local/nginx/sbin 目录下执行 ./nginx 关闭nginx:在/usr/local/nginx ...
- Appium环境搭建(win/mac)
课程使用Windows+Android虚拟机, 建议使用Windows系统学习课程, 如使用Mac系统, 请另外准备一台Andorid手机 Windows系统Appium环境搭建 安装JDK并配置环境 ...
- 修改tomcat控制台的标题
Tomcat的bin目录下,创建一个名为setenv.bat的文件. setenv.bat 编辑内容 : set TITLE = 想要命名的标题名称 保存修改.重新启动. 第二种. 修改tomca ...