DOM继承关系,DOM继承树,DOM基本操作

最新推荐文章于 2022-10-12 11:07:36 发布
最新推荐文章于 2022-10-12 11:07:36 发布
阅读量639 收藏
点赞数
分类专栏： 前端 JavaScript 文章标签： javascript html js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42208160/article/details/107242237
版权

首先我们认识一下DOM

javascript组成
DOM是JavaScript中很重要的一部分

一.DOM继承树
DOM继承树,DOM结构树
document.proto–>HTMLDocument.prototype–>Document.prototype–>Node.prototype–>EventTarget.prototype–>Object.prototype

二.DOM继承规则

  1. getElementById方法定义在Document.prototype上，即Element节点上不能使用
  2. getElementsByName方法定义在HTMLDocument.prototype上，即非html中的document不能使用(xml document,Element)
  3. getElementsByTagName方法定义在Document.prototype和Element.prototype上
  4. HTMLDocument.prototype定义了一些常用的属性，body,head
document.body //<body></body>
document.head //<head></head>
  1. Document.prototype上定义了documentElement属性，在HTML文档中，document.documentElement --><html></html>
  2. getElementByClassName、querySelectorAll、querySelect在Document.prototype,Element.prototype上均有定义

三.dom基本操作
1.创建一个节点

  • document.createElement();创建元素节点
  • document.createTextNode();创建文本节点
  • document.createComment();创建注释节点
  • document.createDocumentFragment();创建文档节点片段
document.createDocumentFragment();用法
var fragment = document.createDocumentFragment();
for(var i = 0; i<3;i++){
	var li = document.createElement('li');
	fragment.appendChild(li);
}
ul.appendChild(fragment);

2.插入节点

  • parentNode.appendChild(child)
    参数child为添加的子节点,类似push
  • parentNode.insertBefore(child,指定元素)
    插入到指定的元素前面

3.删除节点

  • parentNode.removeChild(child)
    从父元素中删除一个子节点，返回删除的节点

4.替换节点
parentNode.replaceChild(new,origin);

5.复制节点
node.cloneNode()

var copyli = ul.children[0].cloneNode();//复制节点
ul.appendChild(copyli);//添加节点

注意：如果cloneNode()参数为空或者为false，则为浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。如果为true，则为深拷贝

cv角斗士
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOM元素的继承关系和原型链
weixin_43238122的博客
09-19 1282
DOM是树状的数据结构 Document Object Model是一个js对象，数据结构为树型，是将HTML文件中的节点翻译成js对象，浏览器根据这个对象进行界面的渲染。 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;title&gt;HTML&lt;/title&gt; &lt;style&gt;&l
DOM对象的继承关系
qq_45683093的博客
09-27 334
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>DOM对象的继承关系</title> </head> <body> <div id="test"></div> <script&gt...
JavaScript(二十三) DOM继承树，DOM基本操作
Bella.的博客
02-23 622
上节讲到的节点类型也被用为查找的基本操作 IE不支持全说的是IE9及以下，IE10以上全部遵循W3C标准 1. DOM继承树 代表的就是一系列的继承关系 1. 大写的Document，你可以理解成构造函数（函数里只有构造函数需要首字母大写），但是你不能new它，它是留给系统留给自己new的 作用：大的Document可以作为小的document的原型，在大的上填一个属性，从小的里可以访问 但是大的Document，不是直接构造小的document的，正经说小的document的原型
Dom的继承关系
ancan1559的博客
07-11 199
Document对象： 　　是Html文档的根节点，拥有其他的节点（element nodes, text nodes, attribute nodes, and comment nodes），并提供了获得所有节点的属性和方法。 　　https://developer.mozilla.org/zh-CN/docs/Web/API/Document 所有继承关系： htt...
DOM — DOM对象继承关系1
08-08
DOM — DOM对象继承关系1
详解jQuery中的DOM操作
12-29
jQuery作为JavaScript库，继承并发扬了JavaScript对DOM对象操作的特性，使开发人员能方便的操作DOM对象。 jQuery中的DOM操作 看看DOM操作都有哪些 逐一来看 先写一份HTML代码，后面的代码将操作这份HTML代码 选择...
详解Python中DOM方法的动态性
12-25
xml.dom 模块对于 Python 程序员来说，可能是使用 XML 文档时功能最强大的工具。不幸的是，XML-SIG 提供的文档目前来说还比较少。W3C 语言无关的 DOM 规范填补了这方面的部分空白。但 Python 程序员最好有一个特定于...
js基础之DOM中元素对象的属性方法详解
01-19
最基本的节点类型是Node类型，其他所有类型都继承自Node，DOM操作往往是js中开销最大的部分，因而NodeList导致的问题最多。要注意：NodeList是‘动态的’，也就是说，每次访问NodeList对象，都会运行一次查询，虽然...
[ JavaScript ] 敲完这几行代码，DOM基本操作也就学会了！
01-08
Dom基本操作DOM查找节点的类型 nodeType遍历节点树基于元素节点树的遍历节点的四个属性DOM继承树DOM修改修改属性修改样式DOM添加添加元素优化 带着例子学Dom 几行代码就搞定！ DOM查找 document代表整个文档 按id...
JavaScript-dom继承树
wust_cyl的博客
04-17 1087
DOM document object mobleDOM 定义了表示和修改文档所定义的方法。DOM对象即宿主对象，由浏览器厂家商定义，用来操作HTML和XML功能的集合。也有人称dom为html和xml的接口。友情提示：因为所学知识有限，部分内容没有说明（比如XML)，以后会补充说明。1 document  HTMLDocument  Document的关系看如下操作:情况很明显了。documen...
DOM继承树，增删改操作(精简版)
gaoshanyangzhi_1999的博客
08-01 616
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继承树、dom节点操作
雷雨天的雷胖子
04-18 571
目录 一、dom继承树 dom节点类 dom元素类 二、dom节点操作 查询节点 创建节点 插入节点 删除节点 替换节点 克隆节点 三、实例代码 一、dom继承树 dom继承树又叫dom结构树，表示的是一系列继承关系。dom继承树中每一个树节点都是一个Javascript内置类又称dom节点类，这些节点类是一种特殊的构造函数，特殊之处在于它们只能被系统使用，不能被开发者用...
DOM继承关系
BTS__TING的博客
09-27 189
```javascript <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>DOM</title> </head> <body> <div id="test"></div> <s...
html DOM 的继承关系
weixin_33854644的博客
06-21 250
零散的知识聚合在一起，就会形成力量，就有了生命力。 如各种语言的开发框架， 都是右各个碎片化的功能聚合在一起，构成有机地整体，便有了强大的力量。will be powerful!   如： jquery 库， angular 　　cakephp 库 ..and so on... ------------------------------------------------------------...
一张图搞定js dom
邪魅
07-14 257
了解DOM模型
owen_william的博客
04-07 1475
1. 概述 DOM不是一门什么技术，可以说它只是提供访问结构化文档的一种方式，主要是XML文档和HTML文档。基于这种思想，各种语言都有自己的DOM解析器。DOM解析器的作用就是完成结构化文档和DOM树之间的转换关系。通常来说，DOM解析器解析结构化文档，就是将磁盘的结构化文档转换成内存中的DOM树；而从DOM树解析出结构化文档，就是将内存中的DOM树转换成磁盘上的结构化文档。如下图的关系：
dom继承树，dom基本操作
m0_64494670的博客
10-12 263
dom继承树，dom基本操作
HK2 Dom.unwrap(self) 作用
最新发布
06-08
在 HK2 中，`Dom.unwrap(self)` 是一个用于获取 `org.glassfish.hk2.api.ServiceHandle` 对象的方法，其作用是将当前的 `ServiceHandle` 对象转换为一个更具体的实现类，以便访问实现类中的方法和属性。具体来说，`Dom.unwrap(self)` 方法返回的是一个 `org.glassfish.hk2.utilities.ServiceHandleImpl` 对象，它继承自 `org.glassfish.hk2.api.ServiceHandle` 接口并提供了更多的实用方法。 `ServiceHandle` 接口是 HK2 的一个核心接口，它用于管理服务实例的生命周期和依赖关系。当你从 HK2 容器中获取一个服务实例时，你会得到一个 `ServiceHandle` 对象，通过这个对象可以对服务实例进行操作，例如注入依赖、销毁服务等。 在某些情况下，你需要访问 `ServiceHandle` 的更多实现细节，例如获取服务实例的类名、判断服务是否是单例等。这时就可以使用 `Dom.unwrap(self)` 方法将 `ServiceHandle` 对象转换为 `ServiceHandleImpl` 对象，然后调用其提供的更多实用方法。 需要注意的是，`Dom.unwrap(self)` 方法是 HK2 内部 API，不建议在应用程序中直接使用它。如果需要访问 `ServiceHandle` 的更多实现细节，建议使用 HK2 提供的其他公共 API 或者编写自己的代码来实现。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值