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. python中杂乱问题

    1 字符串格式化中的格式指定 format_spec ::= [[fill]align][sign][#][][width][,][.precision][type] fill ::= <any ...

  2. InnoDB Master Thread I/O Rate详解

    一.innodb 在刷盘时要面对的问题: 1.对于innodb 的master thread 这个线程来说,它会在后台执行许多的任务,这些任务大多数都是与IO操作相关的, 比如“刷新脏页到磁盘”.“合 ...

  3. Testbench

    作者:桂. 时间:2017-08-15  07:11:50 链接:http://www.cnblogs.com/xingshansi/p/7363048.html 前言 Testbench主要用于mo ...

  4. unity, 最简单的additive shader

    Shader "Custom/myAdditive" {    Properties {                _MainTex ("Albedo (RGB)&q ...

  5. cocos2dx 3.3 场景切出时RenderTexture crash

    在cocos2dx 3.3中下面myScene在切出时会存在概率性崩溃(代码作了最大程度简化,仅为说明问题): class CmyLayer:public Layer{ public: CmyLaye ...

  6. zookeeper集群的部署

    因为这里zookeeper的集群部署都会2n+1台 Dubbo建议使用Zookeeper作为服务的注册中心. Zookeeper集群中只要有过半的节点是正常的情况下,那么整个集群对外就是可用的.正是基 ...

  7. 怎么把本地的文件放到esxi主机上

    我们登录到esxi主机后 然后我们点击摘要-->存储器--->右键,浏览数据存储 创建文件夹,然后选择上传到此文件存储

  8. [hihoCoder] #1093 : 最短路径·三：SPFA算法

    时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 万圣节的晚上,小Hi和小Ho在吃过晚饭之后,来到了一个巨大的鬼屋! 鬼屋中一共有N个地点,分别编号为1..N,这N个地点之 ...

  9. python3.3使用tkinter实现猜数字游戏代码

    发布时间:2014-06-18   编辑:www.jbxue.com 原文地址:http://www.jbxue.com/article/python/22152.html python3.3使用tk ...

  10. Base64转码和解码的帮助类

    /** * 将字符串进行Base64编码 * * @param s 被编码的字符串 * @return 编码后的字符串 */ public static String encoderBASE64(St ...