【nextSibling和previousSibling】的更多相关文章

javascript 中的nextSibling和previousSibling使用注意事项

JavaScript中的nextSibling和previousSibling和作用类似于jquery的next()和prev(),都是获取下一个/上一个同胞元素,如果下一个同级节点不存在,则此属性返回值是null.但是具体的使用中还是有差异的,如果注意.就会引起错误 html结构中的各种空格,换行符都可能会把文本节点当做同胞元素处理.这就会导致错误. 例如下面代码 <!DOCTYPE html> <html lang="en"> <head> &l…

nextSibling，previousSibling，childNodes常见错误

在使用nextSibling与previousSibling时,常出现选不到预计对象的情况 eg: <div class="a">1</div> <div class="b" onclick= "aa(this)">2</div> function aa(obj){ console.log(obj.previousSibling); } 输出的居然是文本对象,若更改dom,去除空格 <div…

nextSibling和previousSibling

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>nextSibling</title> </head> <body> <ul id="u1"> <li id="a&…

js nextSibling属性和previousSibling属性概述及使用注意

1:nextSibling属性 该属性表示当前节点的下一个节点(其后的节点与当前节点同属一个级别):如果其后没有与其同级的节点,则返回null. 需要特别注意的是:该属性在不同的浏览器中的执行结果并不都相同,见下面例示: 先来看一个例子: 该对象的结构表面上看,div的nextSibling只有2项——两个input节点.但实际上有5项——/n,input,/n,input,/n.这是因为input作为创建各种表单输入控件的标签,无论是生成button.checkbox.radio...等或其他…

nextSibling和lastSibling

在FireFox中包含众多空格作为文本节点,因此在我们使用nextSibling和previousSibling时就会出现问题.因为FireFox会把文本节点误当做元素节点的兄弟节点来处理.我们可以添加nodeType来判断.当上一节点或者是下一节点为文本节点时,就继续寻找,直到找到下一个元素节点.以下代码仅供参考,在fireFox中测试通过: //下一个兄弟节点 function nextSibling(node) { var tempLast = node.parentNode.lastCh…

读书笔记：JavaScript DOM 编程艺术（第二版）

读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Netscape公司与Sun公司合作开发,在JavaScript之前,web浏览器只是显示文本文档的软件,JavaScript之后,网页内容不再局限于枯燥的文本,交互性显著改善.在JavaScript的第一个版本,即JavaScript 1.0版本,出现在1995年推出的Netscape Navigator…

（第六天）DOM

概念 文档对象模型(DOM)是表示和操作HTML和XML文档内容的基础API. 选取文档元素 (1)通过ID选取元素 var id = document.getElementById("section1"); <input type="text" id="section1" value=""> [注]在低于IE8版本的浏览器中,getElementById()对于匹配元素的ID不区分大小写,而且也返回匹配name属…

DOM document object model learn

DOM对W3C DOM而言,HTML文档中任何一样东西都是一个节点,而且节点之间是有层次的.如<p>I am a JavaScript hacker.</p>有两个节点,一个是P标签的元素节点,一个是文字节点,P节点包含文本节点.按照这样的节点层次,所有节点构成了一棵文档树.节点类型文档节点 nodeType :9元素节点 nodeType :1文本节点 nodeType :3属性节点 nodeType :2注释节点 nodetype :8 寻找元素:长途搜索:document.g…

JavaScript的理解记录（5）

---接上篇: 三.DOM解析: 1.Document Object Model(DOM):是表示和操作HTML和XML文档内容的基础API;其中几个重要的类有:Document和Element,Text,这三个也是Node的其中几个子类: 2.文档元素的选取:返回值是Element或Element组成的数组NodeList; 通过ID :  document.getElementById('id');   通过name:      document.getElementsByName('nam…

BOM和DOM

Day 01 正课: 1.什么是DOM: 2.DOM Tree 3.遍历DOM树: 1.什么是DOM: 原生js=ECMAScript(核心语法)+ DOM(专门操作网页内容的API)+ 3天 BOM(专门操作浏览器窗口的API)+ 2天 DOM: Document Object Model 专门操作网页内容的API DOM标准: W3C 规定了操作一切结构化文档的API. 核心DOM: 操作一切结构化文档(包括HTML和XML)的通用API 万能,但繁琐 HTML DOM: 专门操作HTML文…