JavaScript中Element与Node的区别,children与childNodes的区别

关于Element跟Node的区别,cilldren跟childNodes的区别很多朋友弄不清楚,本文试图让大家明白这几个概念之间的区别。

Node(节点)是DOM层次结构中的任何类型的对象的通用名称,Node有很多类型,如元素节点,属性节点,文本节点,注释节点等,通过NodeType区分,常见的有:文章来源地址https://www.yii666.com/article/756059.html文章地址https://www.yii666.com/article/756059.html网址:yii666.com

节点类型 NodeType
元素element 1
属性attr 2
文本text 3
注释comments 8
文档document 9

  更多节点类型参考:https://developer.mozilla.org/en-US/docs/DOM/Node.nodeType?redirectlocale=en-US&redirectslug=nodeType

  Element继承了Node类,也就是说Element是Node多种类型中的一种,即当NodeType为1时Node即为ElementNode,另外Element扩展了Node,Element拥有id、class、children等属性。

  以上就是Element跟Node的区别。文章来源地址:https://www.yii666.com/article/756059.html

  那么用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的实例。网址:yii666.com<

  同时,Node的children属性为为undefined

版权声明:本文内容来源于网络,版权归原作者所有,此博客不拥有其著作权,亦不承担相应法律责任。文本页已经标记具体来源原文地址,请点击原文查看来源网址,站内文章以及资源内容站长不承诺其正确性,如侵犯了您的权益,请联系站长如有侵权请联系站长,将立刻删除

JavaScript中Element与Node的区别,children与childNodes的区别-相关文章

  1. JavaScript中Element与Node的区别,children与childNodes的区别

  2. HTML Element 与 Node 的区别

  3. Element instanceof Node

  4. engine中调整Element的上下显示顺序(遮盖)

  5. element popover 不显示/不隐藏问题解决方法

  6. Authentication failed (rejected by the remote node), please check the Erlang

  7. Element DOM Tree jQuery plugin – Firebug like functionality | RockingCode

    Element DOM Tree jQuery plugin – Firebug like functionality | RockingCodeElement DOM Tree jQuery plugin – Firebug like functionality110Rate thisHave you even seen G+ Feedback page style? It works pretty much like firebug, when you find something working work, you an ordinary user, will point and click which element is buggy so they will know what they nee

  8. element清空图片显示

    使用element-ui,使用el-upload上传图片,上传图片后再次打开还是会有原来的图片,想要清空原来上传的图片,只需要在组件上绑定ref,在提交成功后的方法里调用this.$refs.upload.clearFiles();就可以清除原来上传的文件。具体如下:el-upload ref=\\\'upload\\\' class=\\\"upload-demo\\\" action=\\\"uploadUrl\\\" :on

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信图片_20190322181744_03.jpg

微信扫一扫打赏

请作者喝杯咖啡吧~

支付宝扫一扫领取红包,优惠每天领

二维码1

zhifubaohongbao.png

二维码2

zhifubaohongbao2.png