JavaScript-dom继承树

╰半橙微兮° 2022-05-27 11:22 144阅读 0赞

DOM document object moble

DOM 定义了表示和修改文档所定义的方法。DOM对象即宿主对象，由浏览器厂家商定义，用来操作HTML和XML功能的集合。也有人称dom为html和xml的接口。

友情提示：因为所学知识有限，部分内容没有说明（比如XML)，以后会补充说明。

![70][]

1 document  HTMLDocument  Document的关系

看如下操作:

![70 1][]

情况很明显了。

document-->HTMLDocument.prototype-->Document.prototype

看如下代码:

Document.prototype.abc='123';
            HTMLDocument.prototype.ABC='456';

![70 2][]这都是可以，可见document的原型链上有HTMLDocument.prototype和Document.prototype

text(文本节点)和comment(注释节点)

通过关系我们发现继承与CharacterData。我们都知道nodeValue只有文本节点注释节点才有，我们打开CharacterData.prototype发现了nodeValue，看来它们来自这里，所以其他的节点没有了。

![70 3][]最后一个属性。

HTMLElement发现它后面有很多东西，但是都比较熟悉，都是标签对吧。

也就是我们在HTMLElement上加属性，那么所有标签都具有了，如果只想它自己上独有，那么就在它身上加。

看如下代码：

<div></div>
            <script type='text/javascript'>
            var body=document.getElementsByTagName('body')[0];
            var div=document.getElementsByTagName('div')[0];
            </script>

![70 4][]应该比较清楚了。

注意:

![70 5][]

对于第三条说一下，在Element.prototype上定义那个方法有什么用了。

看如下代码:

<div>
                <span>123</span>
            </div>
            <span>456</span>
            <script type='text/javascript'>
            var div=document.getElementsByTagName('div')[0];
            var span=div.getElementsByTagName('span')[0];
            </script>

选择第一个span

因为Element.prototype上也有那个方法，它也可以使用就能精确找到想要的span

![70 6][]

其他在操作台上试一下：

![70 7][]

[70]: /images/20220527/3b4f7b83bfe24723b1d23a63ea70f85f.png
[70 1]: /images/20220527/b2accda194624f77b8cddc8e2bba5c4e.png
[70 2]: /images/20220527/a4bb591e8c484395bb2025ce5fab3282.png
[70 3]: /images/20220527/4a23a723429442e7bf0e9f069accd465.png
[70 4]: /images/20220527/fbb956713f03402ab04d2bf64d205bbf.png
[70 5]: /images/20220527/86d28e5ac3d9426ebdb4de30192b0e06.png
[70 6]: /images/20220527/315cd9d5c9774c70a9594eb608ba2136.png
[70 7]: /images/20220527/63571cafe90241d991fdf52948f24c25.png