JS-firstChild,firstElementChild,lastChild,firstElementChild,nextSibling,nextElementSibling
<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的更多相关文章
- js firstChild 、nextSibling、lastChild、previousSibling、parentNode
nextSibling下一个兄弟节点 previousSibling上一个兄弟 parentNode父亲节点 <select><option value="zs" ...
- nodeValue、firstChild和lastChild属性
nodeValue属性如果想改变一个文本节点的值,那就使用DOM提供的nodeValue属性,他用来得到(和设置)一个节点的值:node.nodeValue但是有个细节必须注意:在用nodeValue ...
- 选择器:first-child与:last-child失效的解决方法
作为还在努力练习的代码小白来说,有时类名或者ID名太多很容易就会搞混,为此,在练习中会想着借用多样的选择器来设置而不是每一个标签都设一个类名(Id名),在此次练习中使用选择器:first-child与 ...
- 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 ...
- js node.children与node.childNodes与node.firstChild,node,lastChild之间的关系
博客搬迁,给你带来的不便,敬请谅解! http://www.suanliutudousi.com/2017/11/06/js-node-children%e4%b8%8enode-childnodes ...
- jQuery中的子（后代）元素过滤选择器（四、六）：nth-child()、first-child、last-child、only-child
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- CSS3中first-child、last-child、nth-child、nth-last-child
1.单独指定第一个子元素.最后一个子元素的样式 <style type="text/css"> li:first-child{ background:yellow; } ...
- CSS选取指定位置标签first-child、last-child、nth-child
1.first-child 选择列表中的第一个标签. 2.last-child 选择列表中的最后一个标签 3.nth-child(n) 选择列表中的第n个标签 4.nth-child(2n) 选择列表 ...
- first-child和last-child选择器 nth-child(n）第几个元素 nth-last-child(n)倒数第几个元素
:first-child 和 :last-child 分别表示父元素中第一个 或者 最后一个 子元素设置样式,如上图
随机推荐
- Sharepoint 2010 splist url query for date range
after many attemps,i'v found that Filter feature support the greater than and less than. ie:http://s ...
- poj1985 Cow Marathon （求树的直径）
Cow Marathon Time Limit: 2000MS Memory Limit: 30000K Total Submissions: 3195 Accepted: 1596 Case ...
- iOS有用的三方库
DKNightVersion https://github.com/Draveness/DKNightVersion#podfile 用来为APP添加夜间模式和换肤功能
- matlab计算差分函数diff
A = 3 2 5 6 5 2 1 8 4 2 7 9 >> diff(A,1,1) ans = 2 0 -4 2 -1 0 6 1 >> diff(A,1,2) ans = ...
- asp.net LINQ实现数据分页
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...
- 文件类型工具类：FileTypeUtil
个人学习,仅供参考! package com.example.administrator.filemanager.utils;import java.io.File;/** * 文件类型工具类 * * ...
- SECD machine简介
secd machine是一种比较基础的虚拟机设计.一般是作为函数式语言的底层虚拟机. secd machine的"secd"四个字母分别指的是这种虚拟机的核心Stack, Env ...
- AWT事件处理
AWT事件处理基本概念 AWT事件处理过程中,主要涉及3类对象: ① Event(事件):用户对组件的一个操作,称之为一个事件,以类的形式出现,例如,键盘操作对应的事件类是KeyEvent.其实例 ...
- otter双主同步安装与配置
otter是阿里的开源数据同步项目,资源地址就不用说了哈,网上找,阿里云论坛关于单方向同步的配置已经很清楚了,理论上说,双主同步也不复杂,但是毕竟 是数据库,比较重要,配置双主的时候,总觉得心里没底, ...
- jQuery easyui combobox获取值|easyui-combobox获取多个值
Query easyui combobox事例: name="language" data-options=" ...