[js高手之路] dom常用节点属性兼容性详解与应用
一、每个DOM节点都有一个nodeType属性,表示节点类型, NodeType一共有12种类型,我们可以通过遍历内置的Node构造函数获取
window.onload = function(){var str = "<table>";for( var key in Node ){str += "<tr>";str += "<td>" + key + "</td><td>" + Node[key] + "</td>";str += "</tr>";}str += "</table>";document.body.innerHTML = str;}
ELEMENT_NODE | 1 |
ATTRIBUTE_NODE | 2 |
TEXT_NODE | 3 |
CDATA_SECTION_NODE | 4 |
ENTITY_REFERENCE_NODE | 5 |
ENTITY_NODE | 6 |
PROCESSING_INSTRUCTION_NODE | 7 |
COMMENT_NODE | 8 |
DOCUMENT_NODE | 9 |
DOCUMENT_TYPE_NODE | 10 |
DOCUMENT_FRAGMENT_NODE | 11 |
NOTATION_NODE | 12 |
其中,最常用的是1(元素节点) 和 3( 文本节点 ).可以结合childNodes做一个简单的应用
window.onload = function(){var oUl = document.getElementById("box");var cNodeList = oUl.childNodes;for( var i = 0, len = cNodeList.length; i < len; i++ ){cNodeList[i].nodeType == 1 ? cNodeList[i].style.backgroundColor = 'red' : '';}}<ul id="box"><li>11111</li><li>22222</li><li>33333</li></ul>
上例,给li加背景颜色, childeNodes在chrome和FF下会区分元素节点和文本节点. 所以为了在chrome和FF下加上背景颜色,
需要nodeType = 1判断为元素节点,才能加上背景颜色
二、nodeName和nodeValue属性
如果是元素, nodeName就是标签名称, nodeValue为null, 如果是文本节点,自然就是空
window.onload = function(){var oUl = document.getElementById("box");var cNodeList = oUl.childNodes;for( var i = 0, len = cNodeList.length; i < len; i++ ){console.log( cNodeList[i].nodeName, cNodeList[i].nodeValue );}}
三、每个节点都有一个childNodes属性,保存的是当前节点下面的所有子节点,其中保存着一个nodeList对象,nodeList是一种类数组结构,
有两种方法可以获取需要的子元素
数组索引
item方法
var oUl = document.getElementById("box"); var cNodeList = oUl.childNodes; console.log( cNodeList[0] ); console.log( cNodeList.item(0) );
如果这个nodeList需要使用数组方法,他不能直接调用,需要转成数组方式
console.log( cNodeList.slice( 0, 1 ) ); 这样使用,会报错. 应该先转成数组,可以采用以下两种方式:
1 // var aNode = [].slice.call( cNodeList, 0 ); 2 var aNode = Array.prototype.slice.call( cNodeList, 0 ); 3 console.log( aNode );
在IE8及其更老的版本,不支持这两种方式,只能使用for循环遍历
try {var aNode = [];aNode = Array.prototype.slice.call( cNodeList, 0 );} catch( e ){for( var i = 0, len = cNodeList.length; i < len; i++ ){aNode.push( cNodeList[i] );}}console.log( aNode );
四、兄弟节点、第一个子节点、最后一个子节点、父节点(parentNode),子节点(children)
这里一个有4组属性,IE和Chrome,FF支持的属性分别如下
在IE下是支持firstChild,lastChild,nextSibling,previousSibling
在Chrome和FF下支持: firstElementChild,lastElementChild,nextElementSibling,previousElementSibling
如果需要兼容,我们可以采用短路表达式:
window.onload = function(){var aDiv = document.getElementsByTagName( "div" );(aDiv[2].previousElementSibling || aDiv[2].previousSibling).style.color = 'red';(aDiv[1].nextElementSibling || aDiv[1].nextSibling).style.color = 'green';(document.body.firstElementChild || document.body.firstChild).style.color = 'blue';(document.body.lastElementChild || document.body.lastChild).style.color = 'orange'; } <div>ghostwu1</div> <div>ghostwu2</div> <div>ghostwu3</div> <div>ghostwu4</div>
parentNode的小应用,隐藏当前a元素对应的li元素
window.onload = function(){var aHref = document.getElementsByTagName("a");for( var i = 0, len = aHref.length; i < len; i++ ){aHref[i].onclick = function(){this.parentNode.style.display = 'none';}}}<ul><li><a href="javascript:;">1111</a><a href="javascript:">隐藏</a></li><li><a href="javascript:;">2222</a><a href="javascript:;">隐藏</a></li><li><a href="javascript:;">3333</a><a href="javascript:;">隐藏</a></li></ul>
children的小应用,隔行变色
window.onload = function(){var oDiv = document.querySelector("#box");var aP = oDiv.children;aP = [].slice.call(aP);aP.forEach(function( el, key ) {el.style.backgroundColor = ( key % 2 == 0 ? 'red' : 'green' );}, this);}<div id="box"><p></p><p></p><p></p><p></p><p></p><p></p></div>
转载于:https://blog.51cto.com/ghostwu/1958998
[js高手之路] dom常用节点属性兼容性详解与应用相关推荐
- [js高手之路] dom常用API【appendChild,insertBefore,removeChild,replaceChild,cloneNode】详解与应用
本文主要讲解DOM常用的CURD操作,appendChild(往后追加节点),insertBefore(往前追加节点),removeChild(移除节点),replaceChild(替换节点),clo ...
- [js高手之路] dom常用API【appendChild,insertBefore,removeChild,replaceChild,cloneNode】详解与应用...
本文主要讲解DOM常用的CURD操作,appendChild(往后追加节点),insertBefore(往前追加节点),removeChild(移除节点),replaceChild(替换节点),clo ...
- HTML弧度文本,[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)...
canvas提供两种输出文本的方式: strokeText:描边文本 fillText:填充文本 fillStyle配合fillText使用,strokeStyle配合strokeText使用 str ...
- 前端画圆弧html弧线的像素,[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形)...
arc:画弧度 cxt.arc( x, y, 半径, 开始角度,结束角度,是否逆时针 ); x, y: 为弧度的中心横坐标和纵坐标,如果这是画一个圆.那么x,y就是圆的圆心. 开始角度与结束角度都是以 ...
- 原生js由html创建节点,[js高手之路]HTML标签解释成DOM节点的实现方法
最近在封装一个开源框架,已经写了500行, 已经具备jquery的大多数常用功能,后面还会扩展大量的工具函数和MVVM双向驱动等功能.跟jquery的使用方法完全一样,jquery的选择器,几乎都能支 ...
- [js高手之路]原型对象(prototype)与原型链相关属性与方法详解
一,instanceof: instanceof检测左侧的__proto__原型链上,是否存在右侧的prototype原型. 我在之前的两篇文章 [js高手之路]构造函数的基本特性与优缺点 [js高手 ...
- [js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API
我们接着上文[js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...
- [js高手之路] es6系列教程 - 迭代器与生成器详解
什么是迭代器? 迭代器是一种特殊对象,这种对象具有以下特点: 1,所有对象都有一个next方法 2,每次调用next方法,都会返回一个对象,该对象包含两个属性,一个是value, 表示下一个将要返回的 ...
- [js高手之路]打造通用的匀速运动框架
本文,是接着上文[js高手之路]匀速运动与实例实战(侧边栏,淡入淡出)继续的,在这篇文章的最后,我们做了2个小实例:侧边栏与改变透明度的淡入淡出效果,本文我们把上文的animate函数,继续改造,让他 ...
最新文章
- ios相机黑边_黑边很碍眼很难看 苹果iPhone6黑边有什么用呢?
- 粉丝该从哪里来?搞定这8种吸粉渠道
- springboot 获取配置文件中的值_Spring Boot面试必问(亲测)
- NYOJ 16 矩形嵌套
- UI Configuration类型的determination 逻辑
- python如何表示坐标_python – 如何制作x坐标字母?
- 安装IIS8.0,ASP以及相关配置,网站搭建
- tomcat日志配置——如何查看日志
- 数学分析—集合与映射
- oracle 虚拟机安装mac os,oracle vm virtualbox虚拟机安装mac os x详细图解
- Bootstrap系列之导航条(Navbar)
- 徕卡 sl android app,相机入魔 徕卡SL DPReview测评结论
- 使用Hutool处理RSA等非对称加密
- [cnblogs镜像]脑图工具MindNode附属节点是什么意思 图解
- windows下修改磁盘扇区数据
- toad导入数据_Oracle 使用TOAD实现导入导出Excel数据
- 无https证书调用摄像头以及精伦读卡器IDR210-1调用安装
- 防百度云加速html,国内免费CDN百度云加速服务体验 - 国内外加速、防护、提高搜索体验...
- TDK | EMC是什么?
- CF进制转换专题进阶
热门文章
- 计算机组成原理第一章(跟着王道课程做的笔记)
- 操作数据库出现错误的查找问题方法
- unix到底有啥用_微信新上线的「拍拍」到底有啥用?
- 小米手机拦截返回音设置不了_小米手机用户注意了!这几个超好用的功能你没用过就太可惜了...
- switch -case 理解
- unity3d 自动变化大小_自动做游戏(1),自动生成人物侧面图
- rman一致性备份oracle数据库可以在非归档模式下么,探索ORACLE之RMAN_03一致性备份...
- python垃圾回收离职_详细解说python垃圾回收机制
- 编写计算机取余程序_必须收藏,2020年专升本计算机常考知识点总结,抓分的关键点...
- python美女源代码_单身程序员,每晚用python抓取百万张美女图片,连女友都不想找了...