Dom中的继承关系
首先声明，一些内容基于个人猜测，如果哪里有错误，请立即联系在下！
我们用js操作Dom时，会经常用到一些个方法比如基于获取到的元素选择其子元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
<style type="text/css">
#box{
height: 100px;
background: deepskyblue;
}
#box div{
width: 100px;
height: 100px;
background: deeppink;
}
</style>
</head>
<body>
<div id="box">
<div>innerDiv</div>
</div>
<script type="text/javascript">
var oBox=document.getElementById('box');
var iBox=oBox.getElementsByTagName('div');
for(var i=0;i<iBox.length;i++){
iBox[i].onclick=function() {
console.log(this)
}
}
</script>
</body>
</html>
为什么oBox会有getElementsByTagName方法呢？答案很简单，跟js中的继承一模一样，通过_proto_指向prototype继承而来。
下面来捋一捋这些继承的关系;用到的工具就是console.dir;console是window下的一个对象，这个dir方法可以显示对象的所有属性和方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
<style type="text/css">
.ta{
width: 100%;
margin:0 auto;
border-collapse: collapse;
}
.ta td{
padding: 5px;
text-align: center;
word-break: break-all;
border: 1px solid skyblue; }
.ta td:first-child{
width: 40%;
}
</style>
<script type="text/javascript">
window.onload=function(){
var str='a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><br><button><canvas><caption><center><cite><code><col><colgroup><command><datalist><dd><del><details><dir><div><dfn><dialog><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1><h6><header><hr><i><iframe><img><input><ins><isindex><kbd><keygen><label><legend><li><link><map><mark><menu><menuitem><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><sub><summary><sup><table><tbody><td><textarea><tfoot><th><thead><time><tr><track><tt><u><ul><var><video><wbr><xmp';
var arr=str.split('><');
var tableInnerHtml=(function (a) {
var tmp={};var tmpStr='<tr><td>标签名</td><td>继承关系</td></tr>';
for(let i=0;i<a.length;i++){
var ele=document.createElement(a[i]);
var tempStr=s(ele).slice(3,ele.length);
if(tempStr!==''){
if(!tmp[tempStr]){
tmp[tempStr]=a[i];
}else{
tmp[tempStr]+='/'+a[i];
}
}
};
for(var k in tmp){
tmpStr+='<tr><td>'+tmp[k]+'</td><td>'+k+'</td></tr>';
}
return tmpStr;
})(arr);
var tab=document.createElement('table');
var tBody=document.createElement('tbody');
tab.className='ta';
tBody.innerHTML=tableInnerHtml;
tab.appendChild(tBody);
document.body.appendChild(tab);
}
function s(e){
var str='';
if(e.__proto__){
str+=" > "+e.__proto__.constructor.name;
return str+=s(e.__proto__);
}else{
return str;
}
}
</script> </head>
<body>
</body>
</html>
copy一下上面代码执行一下就能看到对应dom元素的继承关系，这样我们就可以知道有些dom元素上并没有的方法从哪里来的了。
我这里只写了一些dom元素的继承关系；
其他的如document的继承关系可以自己看看 ：
HTMLDocument> Document> Node > EventTarget > Object；
如有问题，欢迎指出。
Dom中的继承关系的更多相关文章
- Style在Android中的继承关系
Style在Android中的继承关系 Android的Styles(样式)和Themes(主题)非常类似Web开发里的CSS,方便开发者将页面内容和布局呈现分开.Style和Theme在Androi ...
- C++反汇编第四讲,反汇编中识别继承关系,父类,子类,成员对象
C++反汇编第四讲,反汇编中识别继承关系,父类,子类,成员对象 讲解目录: 1.各类在内存中的表现形式 备注: 主要复习开发知识,和反汇编没有关系,但是是理解反汇编的前提. 2.子类继承父 ...
- 在Entity Framework 中实现继承关系映射到数据库表
继承关系映射到数据库表中有多种方式: 第一种:TPH(table-per-hiaerachy) 每一层次一张表 (只有一张表) 仅使用名为父类的类型名的一张表,它包含了各个子类的所有属性信息,使用区分 ...
- 初步学习C++中的继承关系
继承机制是面向对象程序设计使代码能够复用的最重要的手段,它同意程序猿在保持原有类特性的基础上进行扩展,添加功能. 这样产生新的类,称派生类.继承呈现了面向对象程序设计的层次结构,体现了由简单到复杂 ...
- c++中的继承关系
1 什么是继承 面向对象的继承关系指类之间的父子关系.用类图表示如下: 2 为什么要有继承?/ 继承的意义? 因为继承是面向对象中代码复用的一种手段.通过继承,可以获取父类的所有功能,也可以在子类中重 ...
- android 中组件继承关系图，一目了然
View继承关系图 Adapter适配器继承关系图 Activity继承关系图
- 浅谈javaScript中的继承关系<一>
// JavaScript Document //创建三个构造函数 function Shape(){ this.name='ahape'; this.toString=function(){retu ...
- java中的继承关系
1.定义 java中的继承是单一的,一个子类只能拥有一个父类:java中所有类的父类是java.lang.Object,除了这个类之外,每个类只能有一个父类: 而一个父类可以有多个子类,可以被多个子类 ...
- C++反汇编第三讲,反汇编中识别继承关系,父类,子类,成员对象
讲解目录: 1.各类在内存中的表现形式 备注: 主要复习开发知识,和反汇编没有关系,但是是理解反汇编的前提. 2.子类继承父类 2.1 子类中有虚函数,父类中有虚函数 : 都有的情况下 ...
随机推荐
- 使用WKWebView遇到的坑
苹果从iOS8开始推出了WKWebView,大有替换UIWebView的意思(尽管Xcode中还没给UIWebView标记过期版本),所以决定将项目进行适配,iOS8及以上版本,改用WKWebView ...
- LUA5.3的BNF范式学习笔记
BNF巴科斯范式 {A} 表示 0 或多个 A , [A] 表示一个可选的 A chunk ::= block block ::= {stat} [retstat] stat ::= ‘;’ ...
- [Android Tips] 25. ADB Command Note
copy from https://github.com/operando/Android-Command-Note Android Command Note Logcat adb logcat -v ...
- GPS部标平台的架构设计(九)-GPS监控客户端设计
交通部的部标过检,所有的测试都是从客户端发起的,也是在客户端体现的,在客户端承载了部标标准所要求的所有的功能,是整个部标平台当中工作量最大的部分,也是最繁琐的部分. 客户端设计面临两个问题: 1.基于 ...
- [原创]java WEB学习笔记105：Spring学习---AOP介绍，相关概念，使用AOP，利用 方法签名 编写 AspectJ 切入点表达式
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...
- swift基础：第五部分：函数与闭包（补充）
由于时间关系,我就不打算再聊天了,直接进入正题吧. 在OC中,匿名函数就是block,也称为代码块,那么在swift中,匿名函数我们称之为“闭包”.函数实际上是一种特殊的闭包,你可以使用{}来创建一个 ...
- 《玩转D语言系列》二、D语言现状、基本规定和相关资源介绍
这算是本系列文章的一个序吧,主要是为以后的学习做铺垫,文本分为三个部分,第一部分是对于网上一些比较旧的资料的问题的一些更正,当然我也不可能看过所有的资料,难免会有遗漏.第二部分是D语言最基本的规定,第 ...
- WebService "因 URL 意外地以 结束，请求格式无法识别" 的解决方法
最近在做一个图片上传的功能,js调用用webservice进行异步访问服务器,对于不是经常用webservice的菜鸟来说,经常会遇到以下的问题(起码我是遇到了) 在页面上写了js调用代码如下所示: ...
- Win7下清除SQL SERVER 2008的SSMS保存的登录信息
C:\Users\{用户名}\AppData\Roaming\Microsoft\Microsoft SQL Server\100\Tools\Shell\
- 爱挑剔的acm程序员 acmer
2015-9-2 acmer敢于承认自己的错误,并积极改进.自信.有些酷爱运动,各个方面都很优秀:有些则认为出去“玩”就不是玩,有自己的小世界,玩电脑才是最爱. 2015-9-1 acmer都很聪明, ...