JavaScript中Element与Node的区别,children与childNodes的区别
关于Element跟Node的区别,cilldren跟childNodes的区别很多朋友弄不清楚,本文试图让大家明白这几个概念之间的区别。
Node(节点)是DOM层次结构中的任何类型的对象的通用名称,Node有很多类型,如元素节点,属性节点,文本节点,注释节点等,通过NodeType区分,常见的有:
节点类型 | NodeType |
---|---|
元素element | 1 |
属性attr | 2 |
文本text | 3 |
注释comments | 8 |
文档document | 9 |
Element继承了Node类,也就是说Element是Node多种类型中的一种,即当NodeType为1时Node即为ElementNode,另外Element扩展了Node,Element拥有id、class、children等属性。
以上就是Element跟Node的区别。
那么用document.getElementById("xxx")取到的是Node还是Element呢?我们来测试一下:
Element继承了Node类,也就是说Element是Node多种类型中的一种,即当NodeType为1时Node即为ElementNode,另外Element扩展了Node,Element拥有id、class、children等属性。
以上就是Element跟Node的区别。
那么用document.getElementById("xxx")取到的是Node还是Element呢?我们来测试一下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<div id="test">
<p>One</p>
<P>Two</p>
</div>
<script>
var oDiv=document.getElementById("test");
console.log(oDiv instanceof Node); //true
console.log(oDiv instanceof Element); //true
</script>
</body>
</html>
我们可以看到用document.getElementById("xxx")取到的既是Element也是Node。
children是Element的属性,childNodes是Node的属性,我们再来测试一下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<div id="test">
<p>One</p>
<P>Two</p>
</div>
<script>
var oDiv=document.getElementById("test");
console.log(oDiv.children[0] instanceof Node); //true
console.log(oDiv.children[0] instanceof Element); //true console.log(oDiv.childNodes[0] instanceof Node); //true
console.log(oDiv.childNodes[0] instanceof Element); //false console.log(typeof oDiv.childNodes[0].children); //undefined
console.log(typeof oDiv.childNodes[0].childNodes); //object
</script>
</body>
</html>
通过上面的代码我们可以看到,Element的children[0]仍为Element,是Node和Element的实例,Node的childNdoes[0]为Node,只是Node的实例,不是Element的实例。
同时,Node的children属性为为undefined。
最新文章
- ";高大上"; 名词整理
- iOS 单例模式范例
- SharePoint 2013 Error - File names can&#39;t contain the following characters: &; "; ? <; >; # {} % ~ / \.
- Install marvel and head plugin for ealsticsearch
- Shell脚本中执行mysql的几种方式(转)
- 阅读《构建之法》P384~391
- 理解Session的几种模式
- Replication in Kafka
- 0环境设置 - AUTOTRACE设置
- python学习笔记四--元组
- CMD删除Mysql 服务
- JMQ
- 关于IT公司技术委员会职责
- Lucene配置步骤详解
- django2.0无法加载外部css和js的问题
- C++ opencv调用resize修改插值方式遇到的坑
- 白话skynet第一篇
- windows环境安装MySQL
- JS3D效果
- 【杂谈】对RMI(Remote Method Invoke)的认识
热门文章
- 详解 $_SERVER 函数中QUERY_STRING和REQUEST_URI区别
- linux下文件编码的查看与修改
- http://blog.csdn.net/luxiaoyu_sdc/article/details/7333024
- Sold out
- online judge 提交代码应该注意的事项
- C++多继承的观察和7点体会(都是实用派的观点) good
- VS2010/MFC编程入门之五(MFC消息映射机制概述)
- 278. First Bad Version
- Android 时间格式的正则表达式
- C#AutoResetEvent和ManualResetEvent的区别