DOM

svtter 发布于2019-08-02 10:56 / 3363人阅读

摘要：就是大家一起出来的页面的一种结构。由个部分组成，。就是写代码的那些标签组成的，如下图就是把转换成对象得到的，关系如下图。对节点进行操作意思就是在这颗树上爬来爬去，寻找需要的元素文本文档等，进行删增改查。

DOM

DOM就是大家一起YY出来的页面的一种结构。由3个部分组成，Document,Object,Model。
Document就是写代码的那些标签组成的，如下图：

Object就是把Document转换成对象得到的，关系如下图。Javascript类型中，它们都属于Node，Node又属于Object，关系如下下图：

Model就是上面这样模式的名字，文档对象模型。

Node

正如像function,Array一样，Node也有很多自己的方法和属性。Array的方法和属性用来对数组进行操作，Node的方法和属性就用来对节点进行操作。对节点进行操作意思就是在DOM这颗树上爬来爬去，寻找需要的元素（element）,文本（text）,文档（document）等，进行【删增改查】。

Node主要属性 父节点和子节点

parentElement

parentNode

childNodes

获得目标元素的所有子节点，这是对代码来讲的，所以也包括了写代码时的回车换行（text节点）

children

获得目标元素的所有子标签

firstChild

获得目标元素第一个子节点

firstElementChild

获得目标元素第一个子标签

lastChild

获得目标元素最后一个子节点

lastElementChild

获得目标元素最后一个子标签

获取文本

innerText

修改节点的innerText，会删除节点里面的所有内容，改为修改的值

要在后面添加文本内容，请这样写：
var textnode=document.createTextNode("helloMyLove");    //创建文本节点
xxx.appendChild(textnode);      //添加文本节点

或者联成一句：
xxx.appendChild(document.createTextNode("helloMyLove");

textContext

请参考：
https://developer.mozilla.org/zh-CN/docs/Web/API/Node/textContent

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52659.html

前端抽象世界之DOM与Virtual DOM

摘要：它是轻量级的，与特定于浏览器的实现细节分离。由于本身已经是抽象，因此虚拟实际上是抽象的抽象。它允许在这个抽象的世界中进行计算，并跳过真正的那些缓慢的操作。前言目前主流的前端框架React和Vue中都用到了Virtual DOM这个技术，而Virtual DOM到底是什么，可能很多人和我一样，概念上还是模糊。本文主要介绍DOM和Virtual DOM的基本概念及个人理解。以下的D...

plokmju88 2019-08-02 12:00 评论0 收藏0
前端抽象世界之DOM与Virtual DOM

摘要：它是轻量级的，与特定于浏览器的实现细节分离。由于本身已经是抽象，因此虚拟实际上是抽象的抽象。它允许在这个抽象的世界中进行计算，并跳过真正的那些缓慢的操作。前言目前主流的前端框架React和Vue中都用到了Virtual DOM这个技术，而Virtual DOM到底是什么，可能很多人和我一样，概念上还是模糊。本文主要介绍DOM和Virtual DOM的基本概念及个人理解。以下的D...

joy968 2019-08-26 12:23 评论0 收藏0
虚拟DOM

摘要：什么是虚拟举例说明如果网页中有一个表格，表头是姓名，年级，分数。即我们用虚拟的结构替换需要处理的结构，对虚拟的进行操作之后再进行渲染，就成为了真实的数据。当状态变更的时候用修改后的新渲染的的对象和旧的虚拟对象作对比，记录着两棵树的差异。虚拟DOM 可以看看这个文章如何理解虚拟DOM？ - 戴嘉华的回答 - 知乎 https://www.zhihu.com/questio... 深度剖...

yanwei 2019-08-23 12:11 评论0 收藏0
虚拟DOM

摘要：什么是虚拟举例说明如果网页中有一个表格，表头是姓名，年级，分数。即我们用虚拟的结构替换需要处理的结构，对虚拟的进行操作之后再进行渲染，就成为了真实的数据。当状态变更的时候用修改后的新渲染的的对象和旧的虚拟对象作对比，记录着两棵树的差异。虚拟DOM 可以看看这个文章如何理解虚拟DOM？ - 戴嘉华的回答 - 知乎 https://www.zhihu.com/questio... 深度剖...

alin 2019-08-02 11:37 评论0 收藏0
虚拟Dom详解 - (一)

摘要：为此也做了一些学习简单的侃一侃虚拟到底是什么虚拟详解二什么是虚拟虚拟首次产生是框架最先提出和使用的，其卓越的性能很快得到广大开发者的认可，继之后也在其核心引入了虚拟的概念。所谓的虚拟到底是什么也就是通过语言来描述一段代码。随着Vue和React的风声水起，伴随着诸多框架的成长，虚拟DOM渐渐成了我们经常议论和讨论的话题。什么是虚拟DOM，虚拟DOM是如何渲染的，那么Vue的虚拟Dom...

ashe 2019-08-26 10:36 评论0 收藏0