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( 属 ...
随机推荐
- 实验楼Python项目
整理几个实验楼小项目,有免费的也有会员的,会员的可以参考他们的实验报告. 直接去实验楼这个网站,粘贴上就能搜到. 免费专区: Kmeans聚类算法评估足球比赛 Python实现3D建模工具 K-近邻算 ...
- SSE
最近尝试了一下服务器端的推送,之前的做法都是客户端轮询,定时向服务器发送请求.但这造成了我的一些困扰: 1:轮询是由客户端发起的,那么在服务端就不能判别我要推送的内容是否已经过期,因为我很难判断某个信 ...
- Quartz框架介绍
一.Quartz概述: Quartz是一个完全由Java编写的开源任务调度的框架,通过触发器设置作业定时运行规则,控制作业的运行时间.其中quartz集群通过故障切换和负载平衡的功能,能给调度器带来高 ...
- Java实现从服务器下载文件到本地的工具类
话不多说,直接上代码...... import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServlet ...
- python--ctypes模块:调用C函数
Python 的 ctypes 要使用 C 函数,需要先将 C 编译成动态链接库的形式,即 Windows 下的 .dll 文件,或者 Linux 下的 .so 文件 Windows 系统下的 C 标 ...
- 题解 [BZOJ1832][AHOI2008] 聚会
题面 解析 首先对于其中的两个点\(x,y\)最近的点显然就是他们的\(lca\)(我们把它设为\(p1\)), 然后考虑第三个点\(z\)与\(p1\)的\(lca,p2\). 有以下几种情况: \ ...
- python中模块、包、库的区别和使用
模块:就是.py文件,里面定义了一些函数和变量,需要的时候就可以导入这些模块. 包:在模块之上的概念,为了方便管理而将文件进行打包.包目录下第一个文件便是 __init__.py,然后是一些模块文件和 ...
- jQuery系列（七）：导航栏实例
上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- 初次接触python，怎么样系统的自学呢？
关注专栏 写文章登录 给伸手党的福利:Python 新手入门引导 Crossin 2 个月前 这是一篇 Python 入门指南,针对那些没有任何编程经验,从零开始学习 Python 的同学.不管你 ...
- python_glob模块的使用
glob是Python自己带的一个文件操作相关模块,用它可以查找符合自己目的的文件,就类似于Windows下的文件搜索,支持通配符操作,*,?,[]这三个通配符,*代表0个或多个字符,?代表一个字符, ...