节点小结

childNodes  包括文本节点

节点分成三类:标签  属性和文本

节点的类型   nodeType

1、元素的节点

2、属性节点

3、文本节点

节点的名字   nodeName

元素节点:标签名称

属性节点:属性名称

文本节点:#text

节点值   nodeValue

元素节点的nodevalue始终是null

属性的nodeValue的属性值

如果是文本返回的文本的内容

兄弟(姐妹)节点

下一个兄弟(姐妹)节点:

nextSibling:下一个紧邻节点,谷歌、火狐都支持,只不过有可能会获得文本节点,IE8及之前的浏览器会忽略空白文本节点,如果文本有内容,也会获得到。

nextElementSibling:谷歌和火狐都可以获得下一个紧邻的元素节点,而IE8及之前的版本不支持。

previousSibling

previousElementSibing

节点的层次

父节点:parentNode

子节点:

childNodes   标准的DOM属性,获取子标签以外,还会获取文本节点,但是IE8中会忽略空白

childen      不是标准的DOM属性,但是所有的浏览器都支持,只会返回元素节点

兄弟节点

nextSibling  下一个兄弟节点,可能是费元素节点,IE8是元素节点

previousSibling

previousElementSibling  上一个兄弟节点 IE8及之前不支持

nextElementSibling      下一个兄弟节点

第一个和最后一个子节点

firdtChild

laseChild

firstElementChild

lastElementChild

以下是对节点的小结 (这个小结是从朋友那直接拿过来的,望朋友勿怪哦!)

nextSibling 与 nextElementSibling    下一个兄弟节点

previousSibling 与 previousElementSibling    上一个兄弟节点

firstChild 与 firstElementChild  第一个子节点

lastChild 与 lastElementChild  最后一个子节点

element.nextSibling                                element.previousSibling

element.firstChild                                   element.lastChild

//FF  获得的是文本节点  //IE  获得的是元素节点

Boolean(element.nextSibling)                   Boolean(element.previousSibling)

Boolean(element.firstChild)                      Boolean(element.lastChild)

//FF  true    //IE  true

element.nextElementSibling                     element.previousElementSibling

element.firstElementChild                        element.lastElementChild

//FF  获得的是元素节点   //IE  获得的是undefined

Boolean(element.nextElementSibling)         Boolean(element.previousElementSibling)

Boolean(element.firstElementChild)            Boolean(element.lastElementChild)

//FF true   //IE  false

时间: 2024-12-24 22:20:24

节点小结的相关文章

js操作节点小结

节点对象代表文档树中的一个单独的节点. 下面节点的API可以当词典使用哦!! 属性:(绝大部分都是只读的) 1 Attributes 存储节点的属性列表(只读) 2 childNodes 存储节点的子节点列表(只读) 3 dataType 返回此节点的数据类型 4 Definition 以DTD或XML模式给出的节点的定义(只读) 5 Doctype 指定文档类型节点(只读) 6 documentElement 返回文档的根元素(可读写) 7 firstChild 返回当前节点的第一个子节点(只

JavaScript插入节点小结

JS原生API插入节点的方式大致有innerHTML.outerHTML.appendChild.insertBefore.insertAdjacentHTML.applyElement这6种. 这里总结一下各自的用法,并封装包含before.prepend.append.after.applyElement的一系列函数. 一.六种方式的用法 innerHTML:获取标签内部的HTML内容. outerHTML:获取包括目标标签在内,以及内部HTML的内容. appendChild:向目标标签末

哈希表的原理与实现

[转自]:http://my.oschina.net/chape/blog/132533 目录[-] 哈希表的原理与实现 一致性 hash 算法 基本场景 hash 算法和单调性 consistent hashing 算法的原理 虚拟节点 小结 分布式哈希算法 哈希函数 哈希表 分布式哈希表 哈希表的工作原理与常用操作 基础操作 应用举例 哈希表的原理与实现 一列键值对数据,存储在一个table中,如何通过数据的关键字快速查找相应值呢?不要告诉我一个个拿出来比较key啊,呵呵. 大家都知道,在所

深入.net平台和c#编程 学习笔记

深入.net平台和c#编程 一:理解.nteFramwork与c# 1.1,:Microsoft.net框架概述 1.2:.net框架结构 1.3.:c#语言概述 1.4:体验框架类库的强大功能 二:用对象思考:属性和方法 2.1:类和对象 2.2::编写一个自己的类 2..3:综合实践 三:用对象思考:值类型和应用类型 3.1:在类中使用几种新的数据类型 3.2::理解c#中的值类型和引用类型 3.3:在类中使用索引器 3.4:使用类图描述类和类成员 四:用集合组织相关数据 4.1::集合概述

Android进阶——Preference详解之Preference系的基本应用和管理(二)

引言 前面一篇文章Android进阶--Preference详解之初识Preference及Preference系(一)简单描述下了Preference的家族构成和基本知识,相信对于Preference早已不会陌生,肯定也跃跃欲试了吧,这篇文章就给大家总结下Preference.PreferenceActivity.PreferenceGroup.RingtonePreference的普通应用和管理,还有通过一些测试来验证一些机制和原理. 一.PreferenceActivity 1.Prefe

TreeSet和TreeMap

TreeSet ???TreeSet底层就是一个TreeMap(是一个简化版的TreeMap),当我们使用 TreeSet 的构造方法创建 TreeSet 对象,同时会创建一个TreeMap 对象,当你调用 add 方法向 TreeSet 添加元素,会在 add() 方法中调用 TreeMap 的 put(k,v) 方法. ????添加的元素不允许为null. TreeSet的输出去重.默认升序排序. import java.util.Set; import java.util.TreeSet;

06. 父子节点(树)遍历写法小结

原文:06. 父子节点(树)遍历写法小结 对于树/图的遍历,通常有2种算法来实现:迭代(Iteration)和递归(Recursion),迭代是利用循环反复取值/赋值的过程:递归则是反复自己调用自己来获得最终结果.SQL Server里的递归有32层嵌套限制,目的在于防止代码进入死循环,除非使用提示OPTION (MAXRECURSION 0). 测试数据: if OBJECT_ID('city') is not null drop table city GO create table city

JS——DOM小结(二)操作节点

在DOM总结(一)中已经说明节点有三类:元素节点.属性节点.文本节点这三个节点拥有相同的三个属性,而且可以通过元素节点可以获得当前节点的父节点和子节点.同时可以通过DOM对节点进行增.删.改.查.首先来总体的整理一些思路然后一个一个的进行理解. 图中节点的三个属性nodeName.nodeType.nodeValue可以获得节点的名称.类型.值,三种类型的节点中元素节点具有其特殊性,即可以通过当前的元素节点获得该节点的同级节点.子节点.父节点.同级节点. 通过实例看看效果 在HTML中 <bod

JS学习之DOM节点的关系属性封装、克隆节点、Dom中Style常用的一些属性等小结

JS DOM节点: 在JS DOM中节点的关系被定义为节点的属性: 通常有以下几种节点之间的关系: (这里的关系是所有浏览器都支持的) parentNode    父节点 childNodes    子节点 firstChild    父节点里的第一个子节点 lastChild     父节点里的最后一个子节点 nextSibling    与子节点并列的下一个兄弟节点 previousSibling   与子节点并列的上一个兄弟节点 火狐与谷歌支持而ie8不支持的节点关系有: previous