一、每个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常用节点属性兼容性详解与应用相关推荐

  1. [js高手之路] dom常用API【appendChild,insertBefore,removeChild,replaceChild,cloneNode】详解与应用

    本文主要讲解DOM常用的CURD操作,appendChild(往后追加节点),insertBefore(往前追加节点),removeChild(移除节点),replaceChild(替换节点),clo ...

  2. [js高手之路] dom常用API【appendChild,insertBefore,removeChild,replaceChild,cloneNode】详解与应用...

    本文主要讲解DOM常用的CURD操作,appendChild(往后追加节点),insertBefore(往前追加节点),removeChild(移除节点),replaceChild(替换节点),clo ...

  3. HTML弧度文本,[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)...

    canvas提供两种输出文本的方式: strokeText:描边文本 fillText:填充文本 fillStyle配合fillText使用,strokeStyle配合strokeText使用 str ...

  4. 前端画圆弧html弧线的像素,[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形)...

    arc:画弧度 cxt.arc( x, y, 半径, 开始角度,结束角度,是否逆时针 ); x, y: 为弧度的中心横坐标和纵坐标,如果这是画一个圆.那么x,y就是圆的圆心. 开始角度与结束角度都是以 ...

  5. 原生js由html创建节点,[js高手之路]HTML标签解释成DOM节点的实现方法

    最近在封装一个开源框架,已经写了500行, 已经具备jquery的大多数常用功能,后面还会扩展大量的工具函数和MVVM双向驱动等功能.跟jquery的使用方法完全一样,jquery的选择器,几乎都能支 ...

  6. [js高手之路]原型对象(prototype)与原型链相关属性与方法详解

    一,instanceof: instanceof检测左侧的__proto__原型链上,是否存在右侧的prototype原型. 我在之前的两篇文章 [js高手之路]构造函数的基本特性与优缺点 [js高手 ...

  7. [js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API

    我们接着上文[js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...

  8. [js高手之路] es6系列教程 - 迭代器与生成器详解

    什么是迭代器? 迭代器是一种特殊对象,这种对象具有以下特点: 1,所有对象都有一个next方法 2,每次调用next方法,都会返回一个对象,该对象包含两个属性,一个是value, 表示下一个将要返回的 ...

  9. [js高手之路]打造通用的匀速运动框架

    本文,是接着上文[js高手之路]匀速运动与实例实战(侧边栏,淡入淡出)继续的,在这篇文章的最后,我们做了2个小实例:侧边栏与改变透明度的淡入淡出效果,本文我们把上文的animate函数,继续改造,让他 ...

最新文章

  1. ios相机黑边_黑边很碍眼很难看 苹果iPhone6黑边有什么用呢?
  2. 粉丝该从哪里来?搞定这8种吸粉渠道
  3. springboot 获取配置文件中的值_Spring Boot面试必问(亲测)
  4. NYOJ 16 矩形嵌套
  5. UI Configuration类型的determination 逻辑
  6. python如何表示坐标_python – 如何制作x坐标字母?
  7. 安装IIS8.0,ASP以及相关配置,网站搭建
  8. tomcat日志配置——如何查看日志
  9. 数学分析—集合与映射
  10. oracle 虚拟机安装mac os,oracle vm virtualbox虚拟机安装mac os x详细图解
  11. Bootstrap系列之导航条(Navbar)
  12. 徕卡 sl android app,相机入魔 徕卡SL DPReview测评结论
  13. 使用Hutool处理RSA等非对称加密
  14. [cnblogs镜像]脑图工具MindNode附属节点是什么意思 图解
  15. windows下修改磁盘扇区数据
  16. toad导入数据_Oracle 使用TOAD实现导入导出Excel数据
  17. 无https证书调用摄像头以及精伦读卡器IDR210-1调用安装
  18. 防百度云加速html,国内免费CDN百度云加速服务体验 - 国内外加速、防护、提高搜索体验...
  19. TDK | EMC是什么?
  20. CF进制转换专题进阶

热门文章

  1. 计算机组成原理第一章(跟着王道课程做的笔记)
  2. 操作数据库出现错误的查找问题方法
  3. unix到底有啥用_微信新上线的「拍拍」到底有啥用?
  4. 小米手机拦截返回音设置不了_小米手机用户注意了!这几个超好用的功能你没用过就太可惜了...
  5. switch -case 理解
  6. unity3d 自动变化大小_自动做游戏(1),自动生成人物侧面图
  7. rman一致性备份oracle数据库可以在非归档模式下么,探索ORACLE之RMAN_03一致性备份...
  8. python垃圾回收离职_详细解说python垃圾回收机制
  9. 编写计算机取余程序_必须收藏,2020年专升本计算机常考知识点总结,抓分的关键点...
  10. python美女源代码_单身程序员,每晚用python抓取百万张美女图片,连女友都不想找了...