一、每个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. 两条曲线所围成的面积_人教版数学六年级上册 5.3:圆的面积(一) 微课视频|知识点|课件解析|同步练习...
  2. Android网络连接判断与处理
  3. 利用docker编译Android源码
  4. svn提交时自动设置 needs-lock
  5. Spring源码学习路线
  6. mysqlbinlog unknown variable:default-character-set=gbk
  7. 常见面试算法:Logistic回归、树回归
  8. 什么技术才值得你长期投入? | 凌云时刻
  9. 511遇见易语言大漠模块制作教程找图FindPic
  10. 几大ERP软件实施方法与过程
  11. Java对象逃逸分析
  12. [译转]how browsers work
  13. 用python绘制叠加等边三角形_python叠加等边三角形绘制
  14. CentOS7如何设置屏幕不休眠
  15. 【2023 · CANN训练营第一季】晟腾AI入门课(TensorFlow)第一章 晟腾AI基础知识介绍
  16. 如何使用树莓派连接电脑无线网络热点并查看树莓派ip地址
  17. 前端web之CSS基础(2)
  18. python 导入from osgeo import osr解决方法
  19. python——CSV转Excel
  20. linux中查看进程的启动时间

热门文章

  1. git可视化工具—GitKraken
  2. oracle主键重复异常捕获,Oracle异常处理异常处
  3. python多线程queue_python多线程+队列(提高爬虫时效性)
  4. 2019年安大计算机专业分数线,2019年安徽
  5. 织梦html底部文件,织梦dedecms程序如何给网站底部添加360监控的步骤
  6. php ccontroller,FineCMS controllers\ApiController.php 函数downAction 任意文件下载
  7. WebStorm导入git.exe报错 Empty git --version output:
  8. proteus三输入与非门名字_proteus元件名称对照表
  9. 服务器共享文件监控,服务器共享文件监控
  10. python中flush什么意思,Python的file.flush()到底在做什么?