首先声明,一些内容基于个人猜测,如果哪里有错误,请立即联系在下!

我们用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中的继承关系的更多相关文章

  1. Style在Android中的继承关系

    Style在Android中的继承关系 Android的Styles(样式)和Themes(主题)非常类似Web开发里的CSS,方便开发者将页面内容和布局呈现分开.Style和Theme在Androi ...

  2. C++反汇编第四讲,反汇编中识别继承关系,父类,子类,成员对象

    C++反汇编第四讲,反汇编中识别继承关系,父类,子类,成员对象 讲解目录: 1.各类在内存中的表现形式   备注: 主要复习开发知识,和反汇编没有关系,但是是理解反汇编的前提.     2.子类继承父 ...

  3. 在Entity Framework 中实现继承关系映射到数据库表

    继承关系映射到数据库表中有多种方式: 第一种:TPH(table-per-hiaerachy) 每一层次一张表 (只有一张表) 仅使用名为父类的类型名的一张表,它包含了各个子类的所有属性信息,使用区分 ...

  4. 初步学习C++中的继承关系

    继承机制是面向对象程序设计使代码能够复用的最重要的手段,它同意程序猿在保持原有类特性的基础上进行扩展,添加功能. 这样产生新的类,称派生类.继承呈现了面向对象程序设计的层次结构,体现了由简单到复杂 ...

  5. c++中的继承关系

    1 什么是继承 面向对象的继承关系指类之间的父子关系.用类图表示如下: 2 为什么要有继承?/ 继承的意义? 因为继承是面向对象中代码复用的一种手段.通过继承,可以获取父类的所有功能,也可以在子类中重 ...

  6. android 中组件继承关系图,一目了然

    View继承关系图 Adapter适配器继承关系图 Activity继承关系图

  7. 浅谈javaScript中的继承关系<一>

    // JavaScript Document //创建三个构造函数 function Shape(){ this.name='ahape'; this.toString=function(){retu ...

  8. java中的继承关系

    1.定义 java中的继承是单一的,一个子类只能拥有一个父类:java中所有类的父类是java.lang.Object,除了这个类之外,每个类只能有一个父类: 而一个父类可以有多个子类,可以被多个子类 ...

  9. C++反汇编第三讲,反汇编中识别继承关系,父类,子类,成员对象

    讲解目录: 1.各类在内存中的表现形式   备注: 主要复习开发知识,和反汇编没有关系,但是是理解反汇编的前提.     2.子类继承父类 2.1 子类中有虚函数,父类中有虚函数 : 都有的情况下   ...

随机推荐

  1. 本机,同机房,同城,异地,不同城,腾讯云ping延时值

    本机,同机房,同城,异地,不同城,腾讯云ping延时值 ping本机: 0.01ms ping同机房机器: 0.1ms ping同城机器: 1ms ping不同城机器: 20ms 北(南)方ping南 ...

  2. iOS网络相关知识总结

    iOS网络相关知识总结 1.关于请求NSURLRequest? 我们经常讲的GET/POST/PUT等请求是指我们要向服务器发出的NSMutableURLRequest的类型; 我们可以设置Reque ...

  3. PAT线性结构_一元多项式求导、按给定步长反转链表、出栈序列存在性判断

    02-线性结构1. 一元多项式求导 (25) 设计函数求一元多项式的导数.(注:xn(n为整数)的一阶导数为n*xn-1.) 输入格式:以指数递降方式输入多项式非零项系数和指数(绝对值均为不超过100 ...

  4. 00Linux学习及角色定义

    一.嵌入式Linux学习顺序 二.Linux架构 三.Linux工程师角色划分 四. 嵌入式应用工程师工作内容与所需知识点 从图 1可以知道, 嵌入式应用工程师主要从事与产品相关的嵌入式 Linux ...

  5. Python中递归的最大次数

    实际应用中遇到了一个python递归调用的问题,报错如下: RuntimeError: maximum recursion depth exceeded while calling a Python ...

  6. sqlite简单使用

    c创建表: create table 表名称(元素名称 类型,,,): 插入数据:insert into 表名称 values(null,,,) 修改数据   : update 表名 set 字段=’ ...

  7. Java 之 List<T> 接口的实现:ArrayList

    Collection├List│├LinkedList│├ArrayList│└Vector│ └Stack└SetMap├Hashtable├HashMap└WeakHashMap ArrayLis ...

  8. 3.多线程NSOperation

    1.NSOperation的基本操作 使用NSOperation的两个子类,NSInvocationOperation 和 NSBlockOperation 创建操作,然后将操作添加到队列中去执行 / ...

  9. Material Design Lite,简洁惊艳的前端工具箱 之 容器组件。

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为http://www.cnblogs.com/jasonnode/ .网站上有对应每一 ...

  10. ExtJS6 自适应浏览器窗口大小

    ExtJS6官方文档推荐使用Ext.on.做一个小例子,创建一个Panel显示在页面上,使它的大小随浏览器变化,自适应浏览器窗口大小. html:增加一个css样式给Panel加上红色border. ...