[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函数,继续改造,让他 ...
最新文章
- 两条曲线所围成的面积_人教版数学六年级上册 5.3:圆的面积(一) 微课视频|知识点|课件解析|同步练习...
- Android网络连接判断与处理
- 利用docker编译Android源码
- svn提交时自动设置 needs-lock
- Spring源码学习路线
- mysqlbinlog unknown variable:default-character-set=gbk
- 常见面试算法:Logistic回归、树回归
- 什么技术才值得你长期投入? | 凌云时刻
- 511遇见易语言大漠模块制作教程找图FindPic
- 几大ERP软件实施方法与过程
- Java对象逃逸分析
- [译转]how browsers work
- 用python绘制叠加等边三角形_python叠加等边三角形绘制
- CentOS7如何设置屏幕不休眠
- 【2023 · CANN训练营第一季】晟腾AI入门课(TensorFlow)第一章 晟腾AI基础知识介绍
- 如何使用树莓派连接电脑无线网络热点并查看树莓派ip地址
- 前端web之CSS基础(2)
- python 导入from osgeo import osr解决方法
- python——CSV转Excel
- linux中查看进程的启动时间
热门文章
- git可视化工具—GitKraken
- oracle主键重复异常捕获,Oracle异常处理异常处
- python多线程queue_python多线程+队列(提高爬虫时效性)
- 2019年安大计算机专业分数线,2019年安徽
- 织梦html底部文件,织梦dedecms程序如何给网站底部添加360监控的步骤
- php ccontroller,FineCMS controllers\ApiController.php 函数downAction 任意文件下载
- WebStorm导入git.exe报错 Empty git --version output:
- proteus三输入与非门名字_proteus元件名称对照表
- 服务器共享文件监控,服务器共享文件监控
- python中flush什么意思,Python的file.flush()到底在做什么?