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( 属 ...
随机推荐
- 归并排序C程序详解
#include <iostream> #include <cstring> #include <cstdlib> using namespace std; //归 ...
- PAT Basic 1064 朋友数 (20 分)
如果两个整数各位数字的和是一样的,则被称为是“朋友数”,而那个公共的和就是它们的“朋友证号”.例如 123 和 51 就是朋友数,因为 1+2+3 = 5+1 = 6,而 6 就是它们的朋友证号.给定 ...
- java -为什么重写equals()，还需要重写hashCode()?
1.先post这两个方法的基本定义: equals()的定义: 浅谈Java中的equals和==(转) hashCode()的定义: java中hashCode()方法的作用 Java中hashCo ...
- 选择排序Selection_Sort
基本思想:和冒泡排序.直接插入排序并称为三大简单排序算法.显然,说明它们都很简单
- 強悍的Linq
在使用Linq轉化XML,ActiveDirectory,Datatable,Array,List,Dictionary后意識到Linq的強大.VS居然還提供專門的LINQ Explorer,不覺明厲 ...
- [Luogu] 聪明的质监员
https://www.luogu.org/problemnew/show/P1314 满足单调性 所以,二分W,进行检验 #include <iostream> #include < ...
- Centos7安装Redis5.0.3
1.切换目录 cd tmp 2.下载 wget http://download.redis.io/releases/redis-5.0.3.tar.gz 3.解压,删除压缩包 tar xzf redi ...
- 发布jar项目到maven仓库
在要发布的项目pom文件中添加配置: <distributionManagement> <repository> <id>releases</id> & ...
- ORACLE表名与列名小写转成大写
批量将表名变为大写 begin for c in (select table_name tn from user_tables where table_name <> upper(tabl ...
- java实现二维码的生成与解析
简单介绍下二维码:二维码其实就是一种编码技术,只是这种编码技术是用在图片上了,将给定的一些文字,数字转换为一张经过特定编码的图片,而解析二维码则相反,就是将一张经过编码的图片解析为数字或者文字. 当然 ...