<body>

	<ul id="ul1">

        <li>11111</li>

        <li>22222</li>

        <li>33333</li>

        <li>44444</li>

    </ul>

</body>

1,firstChild:第一个子节点。

　　标准下：firstChild会包含文本类型的节点

　　非标准下（IE7以下）：fistChild只包含元素节点

　　var oUl = document.getElementById('ul1');

alert( oUl.firstChild ); //标准下显示[object Text]，非标准下是[object HTMLLIElement]
    alert( oUl.firstElementChild )//标准和非标准都是 [object HTMLLIElement]

　　注意兼容性：

　　　var oFirst = oUl.firstElementChild || oUl.firstChild;
    　  oFirst.style.background = 'red';

2，lastChild：最后一个子节点（同上）

　　兼容性：

　　    var oLast = oUl.lastElementChild || oUl.lastChild;
    　　oLast.style.background = 'yellow';

3，nextSibling：下一个兄弟节点

　　    var oNext = oFirst.nextElementSibling || oFirst.nextSibling;
    　　oNext.style.background = 'blue';4，previousSibling：上一个兄弟节点

　　var oPrev = oLast.previousElementSibling || oLast.previousSibling;
    　　oPrev.style.background = 'orange';

JS-firstChild,firstElementChild,lastChild,firstElementChild,nextSibling,nextElementSibling的更多相关文章

  1. js firstChild 、nextSibling、lastChild、previousSibling、parentNode

    nextSibling下一个兄弟节点 previousSibling上一个兄弟 parentNode父亲节点 <select><option value="zs" ...

  2. nodeValue、firstChild和lastChild属性

    nodeValue属性如果想改变一个文本节点的值,那就使用DOM提供的nodeValue属性,他用来得到(和设置)一个节点的值:node.nodeValue但是有个细节必须注意:在用nodeValue ...

  3. 选择器:first-child与:last-child失效的解决方法

    作为还在努力练习的代码小白来说,有时类名或者ID名太多很容易就会搞混,为此,在练习中会想着借用多样的选择器来设置而不是每一个标签都设一个类名(Id名),在此次练习中使用选择器:first-child与 ...

  4. CSS nth-child、first-child、last-child、nth-of-type、first-of-type和last-of-type选择器使用

    以下示例主要讲解nth-child.first-child.last-child.nth-of-type.first-of-type和last-of-type使用. 示例代码: <!DOCTYP ...

  5. js node.children与node.childNodes与node.firstChild,node,lastChild之间的关系

    博客搬迁,给你带来的不便,敬请谅解! http://www.suanliutudousi.com/2017/11/06/js-node-children%e4%b8%8enode-childnodes ...

  6. jQuery中的子（后代）元素过滤选择器（四、六）：nth-child()、first-child、last-child、only-child

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  7. CSS3中first-child、last-child、nth-child、nth-last-child

    1.单独指定第一个子元素.最后一个子元素的样式 <style type="text/css"> li:first-child{ background:yellow; } ...

  8. CSS选取指定位置标签first-child、last-child、nth-child

    1.first-child 选择列表中的第一个标签. 2.last-child 选择列表中的最后一个标签 3.nth-child(n) 选择列表中的第n个标签 4.nth-child(2n) 选择列表 ...

  9. first-child和last-child选择器 nth-child(n）第几个元素 nth-last-child(n)倒数第几个元素

    :first-child 和  :last-child 分别表示父元素中第一个 或者  最后一个 子元素设置样式,如上图

随机推荐

  1. Android Studio tips1

    Android Studio 真机测试出现  device can not found 1.安装与手机版本一样的sdk 2.(重要!!)手机的驱动在电脑上没有正确的安装,安装豌豆荚可以解决!

  2. JOSN 为空数据的处理

    for(var i=0,l=thisuserList.length;i<l;i++){ for(var key in thisuserList[i]){ if(thisuserList[i][k ...

  3. Struts2 有关于无法正常的使用通配符

    今天使用struts 2.3.4版本,做了一个通配符的小测试,结果其他的Action都能正常的使用,但是使用通配符的Action不能正常的使用.网上找了很久,最后发现,貌似strust2.3版本以上的 ...

  4. 循序渐进Python3（十）-- 2 -- SqlAlchemy

    ORM             对象关系映射(英语:Object Relation Mapping,简称ORM,或O/RM,或O/R mapping),是一种程序技术,用于实现面向对象编程语言里不同类 ...

  5. android 设置状态栏与标题背景颜色一致

    必须在Android4.4以上版本才能设置状态栏颜色: 一.在单个Activity里面,设置状态栏的背景: 效果: 1.在Activity的布局根文件中添加属性: android:fitsSystem ...

  6. funny_python 01 import antigravity

    在Python里面import antigravity 会发现另一个小彩蛋 Tada~ 其实就是打开了xkcd的一个python主题漫画 鼠标停留在图片上,还会看到标题: "I wrote ...

  7. HDMI学习

    市面上大多4K显示器都配备了HDMI 1.4接口,仅能实现30Hz的刷新率,不足以带来流畅的显示效果, 酱紫情况,就算是搭配了HDMI 2.0高清线也是无法发挥其作用.只有更先进的HDMI 2.0标准 ...

  8. php 验证码

    $im =imagecreate(500,500); $bak =imagecolorallocate($im,200,100,0); $shk = imagecolorallocate($im,0, ...

  9. Android开发学习---使用Intelij idea 13.1 进行android 开发

    1.为什么放弃eclipse?太卡!! 实在受不了eclipse的卡了,运行WEB项目还好,但android开发实在太慢,太慢!经常卡死,CPU经常被占满! 看网上很多人都说比Intelij idea ...

  10. c语言冒泡排序

    在C语言中,常用的排序算法有:冒泡排序.快速排序.插入排序.选择排序.希尔排序.堆排序以及归并排序等等. 冒泡排序基本概念:  依次比较相邻的两个数,将小数放在前面,大数放在后面. #include ...