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. oc 代码块的使用

    #import <UIKit/UIKit.h> #import "AppDelegate.h" int (^max)(int,int);//定义代码块,类似c的函数指针 ...

  2. go 学习 ---数据类型

    25个关键字 程序声明:import, package 程序实体声明和定义:chan, const, func, interface, map, struct, type, var 程序流程控制:go ...

  3. 实例讲解Nginx下的rewrite规则（转）

    一．正则表达式匹配,其中:* ~ 为区分大小写匹配* ~* 为不区分大小写匹配* !~和!~*分别为区分大小写不匹配及不区分大小写不匹配二．文件及目录匹配,其中:* -f和!-f用来判断是否存在文件* ...

  4. Mac 下的矢量图设计工具

    Mac 下的矢量图设计工具 一图胜千言.一张清晰的示意图无论对于系统设计,流程梳理,还是其他的方方面面,都非常重要. 曾经亲见一位老同事把 FreeHand 这个矢量绘图工具用得出神入化,并且非常成功 ...

  5. 关于DDR3非常棒的文章

    xilinx平台DDR3设计教程之仿真篇   http://wenku.baidu.com/view/c452d9a5524de518964b7dca.html?pn=50

  6. 【Android】7.8 MyDemos项目的结构和主界面相关代码

    分类:C#.Android.VS2015: 创建日期:2016-02-17 一.简介 上一讲已经说过,系统升级为Win10后,重新创建了一个新的项目:MyDemos,并把前7章合并到了这个项目中,这次 ...

  7. leetcode第一刷_Jump Game II

    要求最小的步数,是不是非常easy想到用dp啊? 我一開始的做法是,当找到了一个可以从它延伸到更远的位置,就把这个位置和最远位置的步数都更新一下,结果超时了. 事实上这样不仅是超时的,并且是错误的.由 ...

  8. 经纬度、时分秒转换的C#类

    一:新建一个包含经纬度.时间转换的类optaDataConvert public class optaDataConvert { /// <summary> /// 时间转换 /// &l ...

  9. nyoj116 士兵杀敌（二）树状数组 插点问线

    士兵杀敌(二) 时间限制:1000 ms  |  内存限制:65535 KB 难度:5 描述 南将军手下有N个士兵,分别编号1到N,这些士兵的杀敌数都是已知的. 小工是南将军手下的军师,南将军经常想知 ...

  10. Spring Boot干货系列：（八）数据存储篇-SQL关系型数据库之JdbcTemplate的使用

    Spring Boot干货系列:(八)数据存储篇-SQL关系型数据库之JdbcTemplate的使用 原创 2017-04-13 嘟嘟MD 嘟爷java超神学堂 前言 前面几章介绍了一些基础,但都是静 ...