Dom中的继承关系

最新推荐文章于 2022-08-17 19:25:30 发布

bai0323

最新推荐文章于 2022-08-17 19:25:30 发布

阅读量370

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/angularbaby/p/5803273.html

版权

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

我们用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；

如有问题，欢迎指出。

转载于:https://www.cnblogs.com/angularbaby/p/5803273.html

bai0323

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Dom中的继承关系

首先声明，一些内容基于个人猜测，如果哪里有错误，请立即联系在下！我们用js操作Dom时，会经常用到一些个方法比如基于获取到的元素选择其子元素：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>title</title&...
复制链接

扫一扫