nextSibling和nextElementSibling

2024-08-02

nextSibling 和nextElementSibling

在使用DOM过程中发现一个问题: 使用nextSibling 属性返回指定节点之后紧跟的节点,在相同的树层级中.被返回的节点以 Node 对象返回. this.arrow = this.screen.nextSibling; this.left = this.arrow.children[0]; // undefined this.right = this.arrow.children[1]; // undefined // 使用nextElementSibling this.arrow = t

nextSibling VS nextElementSibling

2. nextSibling vs nextElementSibling { //FF { 在Firefox中,link2的nextSibling并不是link3,因为两者之间有一个换行符. 这被认为是一个空格, 所以link2的nextSibling就是这个空格,即一个text node,IE不存在这个问题. <a href="link2" id="link2"></a> <a href="link3" id=&q

【踩坑】nextSibling 和nextElementSibling的区别

DOM 使用nextSibling属性返回指定节点之后的下一个兄弟节点,(即:相同节点树层中的下一个节点). nextSibling属性与nextElementSibling属性的差别: nextSibling属性返回元素节点之后的兄弟节点(包括文本节点.注释节点即回车.换行.空格.文本等等): nextElementSibling属性只返回元素节点之后的兄弟元素节点(不包括文本节点.注释节点): 注意: 空格.回车也会看作文本,以文本节点对待. 下例中,如果两个li元素之间有空格.回车,将返回

兼容的firstChild,lastChild,nextSibling,previousSibling写法

在IE下是支持firstChild,lastChild,nextSibling,previousSibling 但是在FF下,由于它会把标签之间的空格当成文本节点,所以为了准确地找到相应的元素,会用 firstElementChild, lastElementChild, nextElementSibling, previousElementSibling 兼容的写法是这样的 var oFirst = oParent.firstElementChild||oParent.firstChild

05.DOM

DOM基础什么是DOM 标签元素节点浏览器支持情况火狐支持最好谷歌其次 ie最差尤其是ie6-8DOM节点节点分为:元素节点和文本节点测试节点的类型用nodeTypenodeType 为3时是文本节点nodeType 为1时是元素节点childNodes 节点不兼容要做判断一般用children children子节点只算第一层 parentNode父节点 <!DOCTYPE HTML> <html> <head> <meta charset=&q

DOM相关属性，方法，兼容性问题处理小析

DOM:Document Object Model文档对象模型,用于让程序(js)取操作页面中的元素.DOM节点类型有12种. (一)属性一.子节点操作1.所有子节点(1)元素.childNodes ==>只读,元素子节点列表集合(只包含一级子节点,不包含后辈孙级以下节点)标准浏览器:包含了文本和元素类型节点,也会包含非法嵌套的子节点.非标准浏览器:只包含元素类型节点,IE7以下不包含非法嵌套的子节点.兼容处理:由于文本节点无背景等样式,故在设置样式前用.nodeType判断节点类型.元素.n

JavaScript 基础第八天（DOM第二天）

一.引言初步认识DOM有可能会被各种不熟悉的因为因素影响自己的学习心态,你需要的是多去记忆一些单词然后加强自己的代码量. 二.导入在昨天初步认识DOM以后我们见天将接着介绍有关于DOM的内容. 三.重点内容 ① 获得或设置页面的内容(innerText与innerHTML): 区别: a. 在获取页面文本的时候,innerText只获取标签之间的文本信息,不包括其中的的标签.而innerHTML是获取标签之间的所有内容包括标签,而且浏览器会会将获取的内容原样输出.innerHTML是所有浏览

js DOM Element属性和方法整理

节点操作,属性 1. childNodes.children 这两个属性获取到的子节点会根据浏览器的不同而不同的,所以一定要判断下nodeType是否为1. childNodes获取到的是NodeList children获取到的是HTMLCollection NodeList and HTMLCollection 他们都提供了name(Number index)方法用来索引元素,可以直接用[index]来引用: 他们的区别在于NodeList没有提供namedItem(String name)

javascript基础07

javascript基础07 1.节点元素.childNodes : 属性只读属性子节点列表集合元素.childNodes 只包含子节点,不包含孙节点 DOM节点的类型有很多种,w3c标准有12种标准下:包含了文本节点和元素节点,也会包含非法嵌套的子节点非标准下:包含元素节点,ie7以下不会包含非法包含的嵌套的子节点非标准就是IE7以下常用文本节点.元素节点空节点也是文本节点判断节点的类型:元素.nodeType : 只读属性当前元素节点的类型返回值为1.2.3.4.5

Dom初

DOM基础 •什么是DOM •浏览器支持情况 lDOM节点 •childNodes nodeType –获取子节点 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

DOM兼容

-firstChild firstElementChild var oFirst = oUl.firstChild || oUl.firstElementChild; -lastChild lastElementChild var oLast = oUl.lastChild || oUl.lastElementChild; -nextSibling nextElementSibling; var oNext = oUl.nextSibling || oUl.nextElementSibl

Javascript DOM基础（二） childNodes、children

childNodes知识点: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script> window.onload = function() { var oUl = document.ge

DOM节点关系,节点关系

DOM节点关系定义节点中的各种关系可以用传统的家族关系来描述,相当于把文档树比喻成家谱. 属性 [nodeType.nodeName.nodeValue] 每个节点都有这三个属性,且节点类型不同,这三个属性的值不同.对于元素节点来说,nodeType的值为1,nodeName保存的始终都是元素的全大写标签名,而nodeValue的值则始终是null <div class="box" id="box"></div> <script&g

DOM的定义及DOM相关

DOM : Document Object Model 文档对象模型文档:html页面文档对象:页面中元素文档对象模型:定义为了能够让程序(js)去操作页面中的元素 DOM会把文档看作是一棵树,同时定义了很多方法来操作这棵数中的每一个元素(节点) DOM节点 getElementByIdgetElementByTagNamedocumentdocument.body 元素.childNodes : 只读属性子节点列表集合:标准下:包含了文本和元素类型的节点,也会包含非法嵌套的子节点:非标准

javascript DOM小结

一:定义 dom:文档对象模型. dom是针对HTML和XML文档的一个API.dom描绘了一个层次化的节点树,允许开发人员添加.移除.修改页面的某一部分. 1:childNodes(返回当前节点的子节点列表) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>dom1</title> <style&

DOM基础之“寻找”子节点

今天学习了JS中的DOM的内容,虽然小菜的理解不深,但希望能够记录下来,慢慢一点一点的进步,有更深的理解了,再回来补充. 首先,关于DOM的概念: 1.概念:DOM = document(文档)Object(对象)Model(模型) 文档:就是我们所说的html的页面对象:指的是html页面中的元素,也成为标签文档对象模型:则是规定的一系列能够为了让我们用JS更好操作页面元素的标准 2.在DOM下把文档当作树状结构,同时定义了很多方法来操作树中的每一个分支元素(节点) 3.如何寻找子节点要

js笔记-DOM基础

DoM 浏览器支持: IE: 10% FF: 99% Chrome: 60% childNotes不兼容在Chrome和IE9中会将文本节点也算作childNotes,而在IE6-8中childNotes只算元素节点,而不算文本节点. <ul> <li></li> <li></li> <li></li> <li></li> </ul> 在IE9和Chro

Javascript DOM 01 基础篇

DOM基础 DOM是什么答:文件对象模型(Document Object Model,简称DOM),DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构!来自网络本节了解了下面知识点: DOM节点 childNodes nodeType 获取子节点 children parentNode 例子:点击链接,隐藏整个li offsetParent 例子:获取元素在页面上的实际位置 DOM节点(2) 首尾子节点有兼容性问题 firstChild.f

JS获取DOM元素

1.childNodes:获取节点,不同浏览器表现不同: IE:只获取元素节点: 非IE:获取元素节点与文本节点: 解决方案:if(childNode.nodeName=="#text") continue 或者 if(childNode.nodeType != '3') continue 2.children:获取元素节点,浏览器表现相同.因此建议使用children. childNodes返回的是节点的子节点集合,包括元素节点.文本节点还有属性节点.children返回的只是节点的

js中一些注意点 ps不断更新中....

nextSibling 和 nextElementSibling 的区别 (previousSibling 和 previousElementSibling ) nextSibling 在IE8及以下,指下一个元素节点,在IE9+以后指下一个节点(包括空文档和换行节点). nextElementSibling 在火狐谷歌IE9+都指下一个元素节点. firstChild 和 firstElementChild 的区别(lastChild 和 lastElementChild) firstChil

nextSibling和nextElementSibling

热门专题