DOM

fanux 发布于2019-08-21 16:51 / 752人阅读

摘要：文档对象模型赋予开发者操作页面的接口常见的节点类型元素节点等元素为的为文本节点可能为空格或者回车也是文本节点为注释节点为属性节点通过属性为为属性的值为属性名获取到某个节点的所有子节点属性会返回一个数组代表的是所有的子节点属性会返回一个数组代

DOM

文档对象模型 document object model 赋予开发者操作页面的接口

常见的dom节点类型 nodeType

元素节点 div ul li 等元素 nodeType 为 1
document 的 nodeType 为 9
文本节点（可能为空格或者回车也是文本节点） nodeType 为 3
注释节点 nodeType 为 8
属性节点通过ele.attributes属性 nodeType 为2

                                          nodeValue  为属性的值    nodeName为属性名

获取到某个节点的所有子节点

ele.childsNodes属性会返回一个数组代表的是所有的子节点

children   属性   会返回一个数组  代表的是这个元素里边所有的元素节点

获取元素的父节点

ele.parentNode 得到某个元素的父节点
document-> html->body->ele

获取兄弟节点

ele.nextElementSibling 得到他的最近的下一个兄弟节点（一个兄弟节点）

                     依次使用这个属性就会得到后面的所有的兄弟节点

ele.previousElementSibling 得到最近的上一个兄弟节点（一个兄弟节点）

                     依次使用这个属性就会得到前面的所有的兄弟节点

得到最后一个子节点和第一个子节点

parentNode.lastElementChild 得到父元素中最后一个子节点
parentNode.firstElementChild 得到父元素中第一个子节点

得到节点的宽度和高度

offsetParent 得到最近的有定位属性的祖先节点如果没有找到的话就会找到body
offsetLeft ele的外边框到有定位父级的内边框的距离
js不能够通过ele.style.width 来得到元素的宽度而不是针对窗口
通过以下的方式可以得到ele的样式

   var container=document.getElementById("container")
      console.log(getComputedStyle(container))

只有offsetLeft offsetTop但是没有offsetRight、offsetBottom
用offsetLeft来模拟元素到窗口左边的距离

 while(elm){   //得到元素离窗口的左边距
          left+=elm.offsetLeft;
          elm=elm.offsetParent
          console.log(left)
      }

GPU云服务器云服务器 DOM dom0和dom2 python dom XML DOM

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

转载请注明本文地址：https://www.ucloud.cn/yun/88826.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