DOM元素的继承关系和原型链

最新推荐文章于 2022-02-23 13:24:30 发布
最新推荐文章于 2022-02-23 13:24:30 发布
阅读量1.2k 收藏 1
点赞数 1
分类专栏： 前端 文章标签： DOM
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43238122/article/details/82770031
版权

DOM是树状的数据结构

Document Object Model是一个js对象，数据结构为树型，是将HTML文件中的节点翻译成js对象，浏览器根据这个对象进行界面的渲染。

<!DOCTYPE html>
<html lang="en">
<head>
 <title>HTML</title>
 <style></style>
</head>
<body>
 <h1>我是标题</h1>
 <div class="test"></div>
 <script src="xxx"></script>
</body>

</html>

节点类型

  • 文档节点 例如（window.document） document对象
  • 元素节点 element_node 例如

  • 文本节点 就是上面的“我是标题”.
  • 属性节点 class=“test” src="xxx"等
  • document_fragment_node document.createDocumentFragment() 暂不要求
  • document_type 可以用来区分html文档类型 暂不要求

在浏览器的控制台中执行以下代码
显示Node对象的属性

for(var key in window.Node){
    console.log(key,' = '+Node[key]);
};
for(var p_key in Node.prototype)
{   
    console.log(key);//输入Node原型链上的公用方法
}

对象的继承关系如下（了解即可，完全不用记忆）

  • Object < Node < Element < HTMLElement < (e.g., HTML*Element)
  • Object < Node < Attr (this is deprecated in DOM4)
  • Object < Node < CharacterData < Text
  • Object < Node < Document < HTMLDocument
  • Object < Node < DocumentFragment
    ``
    var s=document.getElementsByTagName(“html”)[0];
    console.log(s);
    // 顺着s.proto 属性，就可以找到它的继承链，以及对应对象上的属性和方法
    // 返回一个数组，取第一个，就是对应的DOM对象

详细的继承关系为 从上到下

  • Object js对象的相关操作

  • EventTarget(用于添加事件机制) 主要方法有 addEventListener() 添加事件监听 dispatchEvent() 分发事件 removeEventListener() 移除事件监听

  • Node (主要与节点在DOM树中的层级有关) 方法有 childNodes()子元素数组 contains() 包含关系 insertBefore() 在子元素的某一个元素前插入节点 firstChild() lastChild() parentNode() nodeName nodeType nodeValue 等等，详细属性用到时，直接查即可，不要求记忆

  • Element 元素的长宽高有（clientHeight clientWidth clientTop等等） getAttribute() 获取元素的属性 setAttribute() 设置元素的属性等等

  • HTMLElement 为offsetHeight等属性 onclick() onchange() ondrag()等大多数事件添加 set和get函数

  • HTMLHtmlElement click() blur() onclick() ondrag() focus() 等方法 id innerHTML innerText 等属性

今天你刷leetcode了吗
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript的DOM和原型链的了解
Sahara-冷颜的博客
07-28 475
DOM通常分为三类:DOM Core(核心),HTML-DOM和CSS-DOM. DOM是以树状结构组织的HTML文档,那么,它是怎样规定的呢? (1).整个文档是一个文档节点. (2).每个HTML标签是一个元素节点. (3).包含在HTML元素中的文本是文本节点. (4).每个HTML属性和是一个属性节点. (5).注释属于注释节点. 那么各个节点之间的关系是怎样的呢? 在节点树中,顶部节点被...
《dom启蒙》读书笔记和测试代码
极客神殿
05-20 232
《DOM 启蒙》读书笔记及测试代码 节点概览 节点组成的树形层次结构 节点类型 3.节点继承 继承而来节点打交道的属性和方法 节点类型名称和值 Node.prototype.nodeType Node.prototype.nodeName Node.prototype.nodeValue 创建节点 document.createElement document.createTextNode document.createComment document.createAttribute docume
js（十一）---DOM的介绍
Shine_twinkle的博客
12-29 308
DOM• DOM的全称是Document Object Model 文档对象模型，DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。• DOM对象即为宿主对象，由浏览器厂商定义，用来操作html的css功能的一类对象和集合。不过浏览器厂商之间大部分都遵循w3c标准。• 简单来说，DOM就是用来操作html和css的，它是一系列对象的集合。 DOM如何操作HTML那么我
DOM继承树
superyuan567的博客
12-28 453
一、继承树 document表示文档对象，而它的构造函数是HTMLDocument HTMLDocument.prototype.proto = Document.prototype 因此，document和Document之间的关系就是： document继承自HTMLDocument.prototype,而HTMLDocument.prototype又继承自Document.prot...
JavaScript(二十三) DOM继承树，DOM基本操作
Bella.的博客
02-23 627
上节讲到的节点类型也被用为查找的基本操作 IE不支持全说的是IE9及以下，IE10以上全部遵循W3C标准 1. DOM继承树 代表的就是一系列的继承关系 1. 大写的Document，你可以理解成构造函数（函数里只有构造函数需要首字母大写），但是你不能new它，它是留给系统留给自己new的 作用：大的Document可以作为小的document的原型，在大的上填一个属性，从小的里可以访问 但是大的Document，不是直接构造小的document的，正经说小的document的原型
详解一个小实例理解js原型和继承
10-17
例如，我们创建了一个名为`GetElem`的构造函数，它接受一个元素的ID作为参数，用于获取该ID的DOM元素。当我们实例化一个`GetElem`对象，如`domOne = new GetElem('old')`，`domOne`就拥有了`GetElem.prototype`上的...
遍历DOM对象内的元素属性示例代码
09-04
此外，DOM元素还提供了`getAttribute()`和`setAttribute()`方法，用于获取和设置特定的属性值，这种方法更加直接，但无法遍历所有属性。 总结来说，遍历DOM对象内的元素属性是通过JavaScript实现的，主要利用`for.....
proto:针对非ieHTMLElement原型链扩展
06-14
在Internet Explorer（尤其是早期版本）中，其DOM元素对象并不遵循标准的JavaScript原型链。它们没有`__proto__`属性，而是使用`prototype`和`__proto__`之间的关系来实现继承。但在非IE浏览器（如Firefox、Chrome、...
基于ES6的DOM元素动画库插件特效代码
03-20
基于ES6的DOM元素动画库插件正是这样一种技术，它利用了JavaScript的新特性，如类(class)、箭头函数(arrow function)、模板字符串(template literals)等，提高了代码的可读性和性能。 首先，让我们深入理解ES6中的...
DOM对象的继承关系
niudehao1的博客
10-28 224
DOM
DOM继承树，增删改操作(精简版)
gaoshanyangzhi_1999的博客
08-01 623
DOM扩展 选择API querySelector()方法 接收一个CSS选择符，返回与该模式匹配的第一个元素，未找到返回null。 //取得body元素 var body = document.querySelector(&amp;amp;quot;body&amp;amp;quot;); //取得ID为&amp;amp;quot;myDiv&amp;amp;quot;的元素 var myDiv = document.querySel
DOM继承关系
BTS__TING的博客
09-27 196
```javascript <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>DOM</title> </head> <body> <div id="test"></div> <s...
dom 继承树 dom基本操作 （上）
Mark_fu博客
10-08 89
1、让JS 操作HTML 和 XML 的接口 任何元素都有 nodeType 记住 1元素节点 3文本节点 8注释节点 9 文档节点 document 基于元素节点树 遍历 children 可用 其他的如 parentElement firstElementChild lastElementChild ie9以下用不了 2、 document 继承自 HTMLDocument.prototype 继承自 Document.prototype
js系列教程13-原型、原型链、作用链、闭包全解
全栈工程师开发手册（原创）https://github.com/tencentmusic/cube-studio
11-17 5907
全栈工程师开发手册 （作者：栾鹏） 快捷链接： js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算法全解 js系列教程6-BOM操作全解 js系列教程7-DOM操作全解 js系列教程8-事件全解 js系列教程9-表单元素全解 js系列教程10-canvas绘图全解 js系列教程
DOM 原型
Birdlun的博客
07-08 387
原型使用的目的 共性对象的属性和方法 列：使用原型 <script type="text/javascript"> /*原型:共享对象的属性与方法 function Student(){} Student.prototype.name='祖儿'; Student.prototype.age=23; Student.prototype.eat=f...
对象继承的简单总结
JDKANDER的博客
04-07 407
在Java类和对象的使用中，我们总是会面临各类大数据大工程的跟新迭代，使得工作量极为巨大，而巧妙的引用了继承这一概念，使得很多问题都迎刃而解了，大致思想就是子类继承父类的东西比如属性，方法等，除了构造方法不能继承，其他都能很好的继承，而且子类在继承父类的同时可以增加相应的元素，毕竟和世界的发展一样一样的嘛。         而在子类若是出现和父类一样的方法名字和参数列表，修饰符，就会使得父类对应
JavaScript dom继承树 dom基本操作
终日而思不如须臾所学。
01-09 166
)
什么是闭包？有什么作用？ 什么是跨域？如何解决跨域问题？ 什么是原型链？如何理解它？ 什么是事件代理？有什么优点？ 什么是事件冒泡和捕获？如何阻止它们？ 什么是虚拟DOM？和真实DOM有什么区别？ 什么是CSS盒子模型？有哪些属性？ 什么是CSS选择器？有哪些常用的选择器？ 什么是CSS层叠顺序？如何计算它？ 什么是CSS预处理器？有哪些常用的预处理器？
最新发布
06-02
原型链是JavaScript中实现继承的一种机制。每个对象都有一个隐藏的内部属性[[Prototype]]，指向它的原型对象。当访问一个对象的属性时，如果该对象本身没有该属性，就会沿着原型链向上查找，直到找到该属性或者查找...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值