DOM;

joyvw 发布于2019-08-21 17:53 / 1377人阅读

摘要：是的标准所有浏览器公共遵守的标准是各个浏览器厂商根据在各自浏览器上的实现表现为不同浏览器定义有差别实现方式不同是对象，而非对象节点节点分为两个文本节点和元素节点子节点是文本节点和元素节点都计算的假设我们用给加背景颜色，就会报错，因为文本的节

DOM 是 W3C 的标准； [所有浏览器公共遵守的标准]

BOM 是各个浏览器厂商根据 DOM
在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同]

window 是 BOM 对象，而非 js 对象；

DOM节点
节点分为两个：文本节点和元素节点；
子节点：

</>复制代码 
      childNodes是文本节点和元素节点都计算的；
      假设我们用childNodes给li加背景颜色，就会报错，因为文本的节点没有style的；
      可以用nodeType来进行选择节点类型；
  window.onload=function() {
   var oUl=document.getElementById("ul1")
   for (var  i=0;i文本节点
       //当弹窗 nodeType=1  ->元素节点
       if(oUl.childNodes[i].nodeType==1) {
           oUl.childNodes[i].style.background="red";
       }
   }

}

</>复制代码 
nodeType==3 –> 是文本节点；nodeType==1–> 是元素节点；
我们只需元素的节点就可以了，可以用if的语言来判断.

children:

</>复制代码 
如果不这么用，也可以用children：
这不需要处理文本节点和元素节点；仅仅会计算元素节点；
子节点只计算一层，子节点里面包含的内部子节点是不计算的；

父节点：

</>复制代码 
parentNode 可返回某节点的父节点(获取的是结构上的父级);

offsetParent 距离该子元素最近的进行过定位的父元素;

首位子节点：

</>复制代码 
firstChild;//兼容IE
firstElementChild;//兼容FF
解决办法：
      1): if判断浏览器； 
      2): var oFirst = oUl.firstChild||oUl.firstElementChild;
      lastChild;//兼容IE
      lastElementChild;//兼容FF
      解决办法同上；

兄弟节点：

</>复制代码 
  nextSibling;//兼容IE
  nextElementSibling;//兼容FF
  解决办法：
      1): if判断浏览器；
      2): var oFirst = oUl.nextSibling||oUl.nextElementSibling;
      previousSibling;//兼容IE
      previousElementSibling;//兼容FF
      解决办法同上；

DOM方式操作元素属性：

</>复制代码 
   getAttribute(名称);//获取元素属性；
   setAttribute(名称,值);//设置元素属性；
   removeAttribute(名称);//删除元素属性；
   用className选择元素：
   
          function getByClass(oParent,sClass){
           var aEle = oParent.getElementsByTagName("*");
           var aResult=[];
   
            for (var i = 0; i < aEle.length; i++) {
                if(aEle[i].className==sClass){
                   aResult.push(aEle[i]);
                }
            };
            return aResult;
       }
   
       window.onload=function(){
           var oUl = document.getElementById("ul1");
           var oBox = getByClass(oUl,"box");
   
           for (var i = 0; i < oBox.length; i++) {
               oBox[i].style.background="red";
           };
       }

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

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

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