DOM
来源:互联网 发布:php怎么找工作 编辑:程序博客网 时间:2024/06/15 21:18
firstChild : 第一个子节点 (标准浏览器下会把标签的换行作为空白文本节点)
firstElementChild: 标准下第一个子节点 (ie6/7/8不支持)
lastChild / lastElementChild : 最后一个子节点 (兼容同上)
previousSibling / previousElementSibling : 上一个兄弟节点 (兼容同上)
nextSibling / nextElementSibling : 下一个兄弟节点 (兼容同上)
parentNode : 当前节点的上一级节点。 (父节点,无兼容问题)
实例1:
<ul id="ul1">
<script>
var oUl = document.getElementByIdx_x_x_x('ul1');
var first = oUl.firstChild;
alert( first.nodeType ); // ie6/7/8 --> 1; 标准--> 3
var first = oUl.firstElementChild;
alert( first.nodeType ); // ie6/7/8 --> 报错; 标准--> 1
兼容的写法(一):
var first = oUl.firstElementChild || oUl.firstChild;
//firstElementChild必须放左边,否则就没有意义了
var last = oUl.lastElementChild || oUl.lastChild;
var prev = last.previousElementSibling || last.previousSibling;
var next = first.nextElementSibling || first.nextSibling;
(二)函数封装:
function getPrev(obj){
if(!obj.previousSibling)return null;
return obj.previousSibling.nodeType === 1 ? obj.previousSibling : getPrev(obj.previousSibling);
}
function getNext(obj){
if(!obj.nextSibling)return null;
return obj.nextSibling.nodeType === 1 ? obj.nextSibling : getNext(obj.nextSibling);
}
function getFirst(obj){
if(!obj.firstChild)return null;
return obj.firstChild.nodeType === 1 ? obj.firstChild : getNext(obj.firstChild);
}
function getLast(obj){
if(!obj.lastChild)return null;
return obj.lastChild.nodeType === 1 ? obj.lastChild : getPrev(obj.lastChild);
}
以上两种兼容写法的区别:
var oLi = first.previousElementSibling || first.previousSibling;
alert( oLi ); // 标准 object ie6/7/8 null
如果上一个兄弟元素不存在,则不能用此方法。
var oLi = getPrev(first);
alert( oLi ); // 标准 null ie6/7/8 null
阅读全文
0 0
- DOM
- DOM
- dom
- dom
- DOM
- dom
- DOM
- DOM
- DOM
- DOM
- DOM
- dom
- dom
- Dom
- dom
- DOM
- DOM
- DOM
- 【已解决】开发模式下,微信公众号自定义菜单显示不全
- UnicodeDecodeError: ‘ascii’ codec……not in range(128)
- PHP如何查询MySQL数据页面并输出内容到页面,并另存为CSV或EXCEL文件
- https协议和http的区别。
- 【indeed】C
- DOM
- 搜索 F
- 进程学习10--syslog记录调试信息
- 2017年5月31日网站日志调研
- 安装beautifulsoup4 时出现 ImportError: cannot import name 'beautifulsoup'
- bzoj 1477 青蛙的约会 拓展欧几里得(详细解析)
- 用户代理与IP代理爬取糗事百科
- [bzoj4928][SDOI省队集训2017]dierti
- 解决继承SwitchPreference后丢失动画的问题