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. Java反射机制--笔记

    1.认识Class类 任何一个类都是Class类的实例对象,这个实例对象有三种表示方式. /*java 反射机制*/ // 获取类的方法 UserDao userDao = new UserDao() ...

  2. libXext.so.6 libXp.so.6 libXt.so.6 is needed by openmotif21-2.1.30-11.el7.i686

    # rpm -ivh openmotif21--.el7.i686.rpm error: Failed dependencies: libXext.so. -.el7.i686 libXp.so. - ...

  3. OGG_GoldenGate日常维护（案例）

    2014-03-12 Created By BaoXinjian

  4. opencv源代码分析：icvGetTrainingDataCallback简单介绍

    /* *函数icvGetTrainingDataCallback介绍 *功能:对全部样本计算特征编号从first開始的num个特征,并保存到mat里. *输入: *CvMat* mat矩阵样本总数个行 ...

  5. [转]HSpice仿真

    一.HSPICE基础知识Avant! Start-Hspice(现在属于Synopsys公司)是IC设计中最常使用的电路仿真工具,是目前业界使用最为广泛的IC设计工具,甚至可以说是事实上的标准.目前, ...

  6. CSS选择器的优化

    前面花了几个篇幅着重介绍了CSS的选择器的使用,我将其分成三个部分:CSS基本选择器.CSS属性选择器以及CSS伪类选择器.那么今天我主要想和大家一起来学习——CSS选择器方面的性能优化.因为对性能这 ...

  7. MySQL索引经验

    在数据库表中,使用索引可以大大提高查询速度. 假如我们创建了一个testIndex表:create TABLE testIndex(i_testID INT NOT NULL,vc_Name VARC ...

  8. HDU 1260 Tickets (动规)

    Tickets Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Su ...

  9. Yii2.0 权威指南

    Yii 是一个高性能,基于组件的 PHP 框架,用于快速开发 Web 应用程序. 一.安装1.Composer 安装Composer是一个基于项目的依赖管理器,负责将PHP项目所依赖的包或库安装到项目 ...

  10. Linux命令(24) ：sort

    转载地址:点击 linux 命令详解 sort是在Linux里非常常用的一个命令,管排序的,集中精力,五分钟搞定sort,现在开始! 1 sort的工作原理 sort将文件的每一行作为一个单位,相互比 ...