<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. Linux系统yum命令安装软件时保留(下载)rpm包 -- 转载

    昨天在部署zabbix监控的时候,遇到一个问题:监控服务器处于无外网状态,在线安装不可用.而某些依赖包度娘或谷姐搜索起来也挺呛人的!于是想到一个办法,利用有外网的服务器的yum命令来安装这些软件,并自 ...

  2. varchar(n),nvarchar(n) 长度、性能、及所占空间的说明

    varchar(n),nvarchar(n) 中的n怎么解释: nvarchar(n)最多能存n个字符,不区分中英文. varchar(n)最多能存n个字节,一个中文是两个字节. 所占空间: nvar ...

  3. Beat版本分工

    柯晓鸿031302613:负责服务器的搭建,struts2框架的配置,后台与页面的连整合,部分后台接口,数据库连接查询接口,以及页面js的书写 比例:40% 洪腾飞031302608:负责主要界面的书 ...

  4. robot framework 安装配置

    robot framework 是一款专门用作自动化测试的框架,提供了丰富的内置库,与第三方库,也支持用户自己编写的库,robot framework +library 可以 用来做ui的自动化测试, ...

  5. 九宝老师微信小程序开发的过程

  6. 修改Arduino串口缓冲区大小（转）

    本帖节选自<Arduino程序设计基础>第二版5.1.6串口缓冲区       在之前的示例程序中,我们都是采用人工输入测试数据的方式检验程序效果,Arduino每接收到一次数据,就会将数 ...

  7. 使用Maven自动部署Java Web应用到Tomcat服务器

    学习如何使用Maven,我推荐一本工具书,<maven the definitive guide>.在这本工具书手中,详细介绍了maven的使用思想,并且提供了从基本到复杂的具体项目应用. ...

  8. HTML页面弹出自定义对话框带遮蔽罩（使用JavaScript）

    转载:http://blog.sina.com.cn/s/blog_610f47c50100ohe4.html 原理其实很简单:首先绘制弹出的自定义对话框,将其使用display:none隐藏,因为设 ...

  9. java多线程详解(4)-多线程同步技术与lock

    前言:本篇文章是对Synchronized和java.util.concurrent.locks.Lock的区别进行了详细的分析介绍 上一篇文章末最后介绍了synchronized的一些缺陷,本文主要 ...

  10. SVN 集中式版本控制软件

    简介: 目前流行的版本控制软件中,SVN ( 集中式版本控制 ) 算是使用范围更广.且使用时间更早的一款了,现在 git ( 分布式版本控制 ) 更火爆一点. 一.安装svn [root@localh ...