1.元素.firstChild : 只读属性，第一个子节点

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

　　非标准下：只包含元素类型子节点。

元素.firstElementChild : 只读属性，第一个元素子节点，等价于元素.children[0]

　　标准和非标准下都是获取第一个元素子节点。

2.元素.lastChild : 只读属性，最后一个子节点

元素.lastElementChild : 只读属性，最后一个元素子节点

3.元素.nextSibling: 只读属性，下一个兄弟节点

元素.nextElementSibling: 只读属性，下一个兄弟元素节点

4.元素.previousSibling: 只读属性，上一个兄弟节点

元素.previousElementSibling: 只读属性，上一个兄弟元素节点

兼容写法：

<!DOCTYPE html>

<html>

<head>

    <title>元素兼容</title>

</head>

<body>

    <ul id="ul1">

        <li>111111</li>

        <li>222222</li>

        <li>333333</li>

        <li>444444</li>

    </ul>

    <script type="text/javascript">

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

        var oFirst = oUl.firstElementChild || oUl.firstChild;

        var oLast = oUl.lastElementChild  || oUl.lastChild ;

        var oNext = oFirst.nextElementSibling || oFirst.nextSibling;

        var oPrev = oLast.previousElementSibling || oLast.previousSibling;

        oFirst.style.backgroundColor = 'red';

        oLast.style.backgroundColor = 'blue';

        oNext.style.backgroundColor = 'pink';

        oPrev.style.backgroundColor = 'brown';

    </script>

</body>

</html>

js学习笔记15----子节点和兄弟节点的操作的更多相关文章

  1. 总结获取原生JS(javascript)的父节点、子节点、兄弟节点

    关于原生JS获取节点,一直是个头疼的问题,而且调用方法的名字又贼长了,所以我选择用JQ,好像跑题了-- 话不多说看代码 获取父节点 及 父节点下所有子节点(兄弟节点) <ul> <l ...

  2. JS获取子节点、父节点和兄弟节点的方法实例总结

    转自:https://www.jb51.net/article/143286.htm 本文实例讲述了JS获取子节点.父节点和兄弟节点的方法.分享给大家供大家参考,具体如下: 一.js获取子节点的方式 ...

  3. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  4. SQL反模式学习笔记15 分组

    目标:查询得到每组的max(或者min等其他聚合函数)值,并且得到这个行的其他字段 反模式:引用非分组列 单值规则:跟在Select之后的选择列表中的每一列,对于每个分组来说都必须返回且仅返回一直值. ...

  5. JS学习笔记5_DOM

    1.DOM节点的常用属性(所有节点都支持) nodeType:元素1,属性2,文本3 nodeName:元素标签名的大写形式 nodeValue:元素节点为null,文本节点为文本内容,属性节点为属性 ...

  6. 【转】Backbone.js学习笔记（二）细说MVC

    文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Bac ...

  7. WebGL three.js学习笔记 6种类型的纹理介绍及应用

    WebGL three.js学习笔记 6种类型的纹理介绍及应用 本文所使用到的demo演示: 高光贴图Demo演示 反光效果Demo演示(因为是加载的模型,所以速度会慢) (一)普通纹理 计算机图形学 ...

  8. 并发编程学习笔记(15)----Executor框架的使用

    Executor执行已提交的 Runnable 任务的对象.此接口提供一种将任务提交与每个任务将如何运行的机制(包括线程使用的细节.调度等)分离开来的方法.通常使用 Executor 而不是显式地创建 ...

  9. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  10. Vue.js学习笔记（2）vue-router

    vue中vue-router的使用:

随机推荐

  1. mac下安装mysql 1820 重置默认密码

    mac安装mysql时会给出一个临时密码 记录下来 2018-03-17T02:14:10.809431Z 1 [Note] A temporary password is generated for ...

  2. POSIX 共享内存和 系列函数

    在前面介绍了system v 共享内存的相关知识,现在来稍微看看posix 共享内存 和系列函数. 共享内存简单来说就是一块真正的物理内存区域,可以使用一些函数将这块区域映射到进程的地址空间进行读写, ...

  3. Linux调度器 - deadline调度器

    一.概述 实时系统是这样的一种计算系统:当事件发生后,它必须在确定的时间范围内做出响应.在实时系统中,产生正确的结果不仅依赖于系统正确的逻辑动作,而且依赖于逻辑动作的时序.换句话说,当系统收到某个请求 ...

  4. html中如何让table显示的更好

    在html文件编写中,经常使用到table来做一些表格.如何让它显示的更像一张表格?接下来为你讲解. 基本格式 <div> <th>我的一张表格</th> < ...

  5. VS2012/13中即将增加InstallShield升级版

    对于Visual Studio 2012去掉了前作中的安装程序(Installer)项目模板,许多开发者都感到非常失望.这个流行的项目类型为开发者们提供了若干选项:除了InstallShield LE ...

  6. ：c#的remoting里，CallContext.GetData获得的对象老是空的？该怎么处理

    寻求帮助:c#的remoting里,CallContext.GetData获得的对象老是空的?如题,检查了很多次了,也比对了msdn里的例子,没觉得有问题啊..为什么老是得到的null的?不知道哪里出 ...

  7. 【Android】5.6 弹出菜单（PopUp Menus）

    分类:C#.Android.VS2015: 创建日期:2016-02-07 一.简介 功能描述:用户单击按钮弹出菜单.当用户选择一个菜单项,会触发MenuItemClick事件并让弹出的菜单消失:如果 ...

  8. Java高级面试题积累（二）

    简述23种设计 抽象工厂模式(Abstract Factory):提供一个创建一系列相关或相互依赖对象的接口.而无需指定它们详细的类. 适配器模式(Adapter):将一个类的接口转换成客户希望的另外 ...

  9. Chrome浏览器缓存查看工具－ChromeCacheView

    最近想听一下最新的流行热歌,按着某网站的新歌排行榜逐首在巨鲸音乐网搜索下载,但相当一部分的歌曲还是没能下载到,逼不得已只能到百度MP3下载,在搜索结果中已经挑体积比较大的文件来下载了,但下载到的MP3 ...

  10. python鸭子类型(duck type)

    1.什么是鸭子类型顾名思义,就是看起来像鸭子的类型,就可以叫做鸭子类型所以,鸭子类型是一种不严格的类型,弱类型有相同方法的类型,可以归为一类鸭子.2.鸭子类型示例 class dog: def run ...