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. 标头“Vary:Accept-Encoding”指定方法[转]

    现在的新浏览器都支持压缩了,因此如果网站启用了GZip,可以无需再指定“Vary: Accept-Encoding”标头,不过指定“Vary: Accept-Encoding”标头会有更高的保险,而它 ...

  2. PO_员工主管审批模式详解（设定）

    2014-06-03 Created By BaoXinjian

  3. jquery的animate()方法也可设置非css属性

    如题,举例: $('body').animate({scrollTop:0}, 1500); $("body").animate({scrollTop:"-=" ...

  4. [sh]sed 4个功能

    [root@lanny test]# cat test.txt test liyao lanny 经典博文: http://oldboy.blog.51cto.com/2561410/949365 h ...

  5. nginx location URI匹配规则

    当nginx收到一个请求后,会截取请求的url部份,去搜索所有location指令中定义的URI匹配模式.在server模块中可以定义多个location指令来匹配不同的url请求,多个不同的loca ...

  6. thread-local-allocation-buffers

    https://www.azul.com/files/Whats-inside-a-JVM-webinar-presentation.pdf https://www.zhihu.com/questio ...

  7. Azure Nosql

    patterns & practices https://msdn.microsoft.com/en-us/library/ff921345.aspx Solution Development ...

  8. 【HBase】Rowkey设计【转】

    本章将深入介绍由HBase的存储架构在设计上带来的影响.如何设计表.row key.column等等,尽可能地使用到HBase存储上的优势. Key设计 HBase有两个基础的主键结构:row key ...

  9. 你应该知道的Virtual Studio

    最近,在网上看到一篇关于VS2008的一些提示,可以提高开发效率,我把它翻译过来,当然里面也有很多自己的想法,分享一下,大家可以择有用的提示而用之. 参考:每个开发者都应该知道的提示和诀窍 提示一:拷 ...

  10. 给class添加id封装

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...