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

我们用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. Centos6 换源

    #主要是为了提高安装速度以及epel中自带源众多木有的软件. #Author wood_man #2016.06.01 v 2.0 1. 测试环境 VMware 10.0    CentOS rele ...

  2. Testlink与Redmine关联

    TestLink是一个开源的测试管理工具,它可以有效地管理整个测试流程(测试需求, 测试计划, 测试用例, 测试执行, 测试结果分析),但不能和开发流程统一起来,从而不能及时参与到开发中去,不能使项目 ...

  3. Android应用层View绘制流程与源码分析

    1  背景 还记得前面<Android应用setContentView与LayoutInflater加载解析机制源码分析>这篇文章吗?我们有分析到Activity中界面加载显示的基本流程原 ...

  4. Hessian怎样实现远程调用

    1.Spring中除了提供HTTP调用器方式的远程调用,还对第三方的远程调用实现提供了支持,其中提供了对Hessian的支持. Hessian是由Caocho公司发布的一个轻量级的二进制协议远程调用实 ...

  5. [原创]java WEB学习笔记106：Spring学习---AOP的通知 ：前置通知，后置通知，返回通知，异常通知，环绕通知

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  6. JS新API标准 地理定位（navigator.geolocation）/////////zzzzzzzzzzz

    在新的API标准中,可以通过navigator.geolocation来获取设备的当前位置,返回一个位置对象,用户可以从这个对象中得到一些经纬度的相关信息. navigator.geolocation ...

  7. Android仿“守望先锋”加载动画

    转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! 效果图 实现思路 画一个小六边形 按效果图位置画七个小六边形 实现一个小六边形的显示与隐藏 ...

  8. Javascript中event.srcElement和event.target的区别

    event.srcElement 可以捕获当前事件作用的对象,如event.srcElement.tagName可以捕获活动标记名称.注意获取的标记都以大写表示,如"TD",&qu ...

  9. 使用geoserver发布arcgis切片

    arcgis map 版本:10.1,10.2,10.3均可 jre:7或者8 geoserver:2.8.2以上 切片:松散型,256*256  ,png 1:安装geoserver并独立部署geo ...

  10. 理解timestamp

    大多数资料都说timestamp表示自从1970-1-1 00:00:00开始到现在的秒数,一般称为epoch time,却忽略了时区的概念.其实,不同时区记录timesamp的基准时间是不一样的,比 ...