<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. CSS属性(根据继承性分为两类)

    一.可继承属性 1>所有标签可继承: visibility:行高 cursor: 2>内联标签可继承: line-height:行高 color:文字颜色 font-family:文字字体 ...

  2. VSS记住用户名和密码

    计算机-属性-高级系统设置-环境变量 新建两个环境变量如下:        SSUSER(VSS的用户名)        SSPWD(VSS的密码)

  3. C# 导入EXCEL 报错外部表不是预期的格式错误 .

    错误经过:在读取Excel时,出现外部表不是预期的格式 错误原因1: 由于Excel 97-2003的连接格式与Excel 2010 的 不同造成. 以下是从网上摘抄原文 Excel “Externa ...

  4. Linux内核中断学习

    1.内核中断概述 (1)在OS环境下编写中断处理函数与之前在裸机中编写中断处理函数的方式是不一样的,在Linux内核中提供了一套用来管理硬件中断资源的软件体系架构. (2)在操作系统中,中断号与gpi ...

  5. Head First Html and CSS学习笔记之CSS

    第七章 CSS入门 元素的许多属性都可以设置样式,太多了,记不住,可以参考<CSS Pocket Reference>. 外部样式表,<link type = "text/ ...

  6. php底层

    http://www.phpchina.com/member.php?mod=logging&action=login 我们从未手动开启过PHP的相关进程,它是随着Apache的启动而运行的: ...

  7. android_demo之生成颜色布局

    前面学习了动态生成表格,不单单是要动态生成控件,也同时生成一个事件. 接下来用个小小栗子去了解这个知识点. <LinearLayout xmlns:android="http://sc ...

  8. C#,java,C++ 等变量命名规则

    命名规则: 必须以“字母” .“_”或“@”开头,不要以数字开头. 后面可以跟任意“数字”,“字母”,“下划线”. ---注意:自己起的名字尽量避免与系统中的关键字重复.不推荐重新定义相同的变量名. ...

  9. Mybatis之关联查询

    一.一对一关联 1.1.提出需求 根据班级id查询班级信息(带老师的信息) 1.2.创建表和数据 创建一张教师表和班级表,这里我们假设一个老师只负责教一个班,那么老师和班级之间的关系就是一种一对一的关 ...

  10. xml/map转换器,递归设计思路

    xml/map转换器 图片:http://pan.baidu.com/s/1nuKJD13 应用场景,为什么要把xml转map?我直接用jdom,dom4j操作不行吗? 如果你了解模板引擎(像velo ...