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( 属 ...
随机推荐
- Vasya and Beautiful Arrays CodeForces - 354C (数论，枚举)
Vasya and Beautiful Arrays CodeForces - 354C Vasya's got a birthday coming up and his mom decided to ...
- 【HDU5952】Counting Cliques
题目大意:给定一个\(N\)个点,\(M\)条边的无向图,求图中有多少个大小为\(S\)的团.\(N \le 100,deg(i)\le 20,i\in [1,n]\). 题解: 考虑搜索. 需要确定 ...
- C# 字符串和正则表达式(8) 持续更新
创建字符串 如果多次修改一个字符串或创建一个很长的字符串,用String类会效率低下.这种情况,可以用 System.Text.StringBuilder ,它专门为这种情况设计的. 格式化表达式 格 ...
- Linux系统管理常用命令
Linux系统管理常用命令 分类: Linux2011-01-10 18:26 1538人阅读 评论(0) 收藏 举报 linuxcommandservicenginxuserunix 目录(?)[+ ...
- 计算机网络|C语言Socket编程，实现两个程序间的通信
C语言Socket编程,实现两个程序间的通信 server和client通信流程图 在mooc上找到的,使用Socket客户端client和服务端server通信的流程图
- bzoj1497: [NOI2006]最大获利（最小割）
传送门 第一眼看去:好难 第二眼:不就是个裸的最大权闭合子图么…… 我们从源点向所有用户连边,容量为收益,用户向自己的中转站连边,容量为INF,中转站向汇点连边,容量为费用 那么总收益-最小割就是答案 ...
- Java日期工具类DateUtils详解（转）
jar包 appache下的 common-lang3 一. 对指定的日期新增年.月.周.日.小时.分钟.秒.毫秒 public static Date addDays(Date date, int ...
- .net core 自动注入。。。。懵逼。。
using Microsoft.AspNetCore.Http; using System.Globalization; using System.Threading.Tasks; namespace ...
- offsetParent() 返回第一个匹配元素用于定位的父节点。
offsetParent() V1.2.6概述 返回第一个匹配元素用于定位的父节点. 这返回父元素中第一个其position设为relative或者absolute的元素.此方法仅对可见元素有效.大理 ...
- Dean and Schedule （URAL 2026）
Problem A new academic year approaches, and the dean must make a schedule of classes for first-year ...