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----子节点和兄弟节点的操作的更多相关文章
-
总结获取原生JS(javascript)的父节点、子节点、兄弟节点
关于原生JS获取节点,一直是个头疼的问题,而且调用方法的名字又贼长了,所以我选择用JQ,好像跑题了-- 话不多说看代码 获取父节点 及 父节点下所有子节点(兄弟节点) <ul> <l ...
-
JS获取子节点、父节点和兄弟节点的方法实例总结
转自:https://www.jb51.net/article/143286.htm 本文实例讲述了JS获取子节点.父节点和兄弟节点的方法.分享给大家供大家参考,具体如下: 一.js获取子节点的方式 ...
-
vue.js 学习笔记3——TypeScript
目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...
-
SQL反模式学习笔记15 分组
目标:查询得到每组的max(或者min等其他聚合函数)值,并且得到这个行的其他字段 反模式:引用非分组列 单值规则:跟在Select之后的选择列表中的每一列,对于每个分组来说都必须返回且仅返回一直值. ...
-
JS学习笔记5_DOM
1.DOM节点的常用属性(所有节点都支持) nodeType:元素1,属性2,文本3 nodeName:元素标签名的大写形式 nodeValue:元素节点为null,文本节点为文本内容,属性节点为属性 ...
-
【转】Backbone.js学习笔记(二)细说MVC
文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Bac ...
-
WebGL three.js学习笔记 6种类型的纹理介绍及应用
WebGL three.js学习笔记 6种类型的纹理介绍及应用 本文所使用到的demo演示: 高光贴图Demo演示 反光效果Demo演示(因为是加载的模型,所以速度会慢) (一)普通纹理 计算机图形学 ...
-
并发编程学习笔记(15)----Executor框架的使用
Executor执行已提交的 Runnable 任务的对象.此接口提供一种将任务提交与每个任务将如何运行的机制(包括线程使用的细节.调度等)分离开来的方法.通常使用 Executor 而不是显式地创建 ...
-
js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
-
Vue.js学习笔记(2)vue-router
vue中vue-router的使用:
随机推荐
-
javascript拾掇
用javascript如何给span赋值呢?一般有两种方法: 1>输出html <body onload="s()"><span id="hell ...
-
下拉列表select显示ng-options
js中如何处理: it-equipment-list-maintenance-create-controller.js 'use strict'; myApp.controller( 'itEquip ...
-
linux device model简述
参考: 1)<LINUX设备驱动程序>第十四章 Linux 设备模型 2)内核源码2.6.38 内核初始化的时候会对设备模型作初始化,见init/main.c: start_kernel- ...
-
类型检测汇总!typeof 和 instanceof 和isArray
, ]; alert(arr instanceof Array);//true 以上老方法判断是否是数组,存在一个问题,就是它只适用于单执行环境(窗口),如果该窗口有其他框架(比如 iframe)则会 ...
-
【Android Developers Training】 41. 向另一台设备发送文件
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
-
ActiveMQ的运用
MQ的消息队列模式有2种,一种是点对点模式,一种是订阅模式. 点对点模式:点对点的模式主要建立在一个队列上面,当连接一个列队的时候,发送端不需要知道接收端是否正在接收,可以直接向ActiveMQ发送消 ...
-
java对文件的基本操作
package cn.edu.fhj.day009.FileDemo; import java.io.File; import java.io.IOException; public class Fi ...
-
target与currentTarget与this的区别
target与currentTarget与this的区别: target在事件流的目标阶段:currentTarget在事件的捕获.目标及冒泡阶段. 只有当事件流处在目标阶段的时候,二者的指向才是一致 ...
-
mac 上安装 openJDK11
紧接上篇,mac现在基本上作为开发者的主力机,当然也要安装jdk的 首先需要卸载原来的jdk8,如下: ls /Library/Java/JavaVirtualMachines/ sudo rm -r ...
-
tomcat jetty
背景 其实这个比较毫无意义.只是当时突然知道了jetty,所以记下来,对于开发人员来说选择哪个一般意义不大. 转载 从架构上来看 Tomcat 在处理少数非常繁忙的连接上更有优势,也就是说连接的生命周 ...