DOM && 虚拟 DOM

Cc冲冲冲
1,032 阅读3分钟

1.DOM 是什么

dom 是document object model 文档对象模型的简写,其中定义了访问和操作html、xml文档的标准，他允许程序动态的更改文档的内容、结构、样式，下面我们只针对学习html dom的学习。

2.HTML DOM

我们之前学习很多数据结构，比如栈、队列、链表、集合、字典（object）、散列、树、图；现在我们将要学习的html dom 就是一个树结构的数据类型；如下图

  • 节点之间存在parentNode(父节点，根节点除外)、childNodes(子节点)、sbiling(兄弟节点)的关系，如下图

  • 每个节点都是一个对象，既然是对象，1.对象就存在方法和属性，接下来的操作dom就是依赖相关的方法和属性进行操作，2.对象就会存在原型，那一个节点的原型是怎么样的呐，我们可以console.dir(node)节点查看node对象原型链，你会发现出现六层的_proto_原型对象，结构如下图

  • 特别是第五层的Eventarget的原型中包含addEventListener()方法，是不是就是我们平时给元素节点添加事件监听操作的api,由于该pai在node节点中包含，所以可以继承操作该方法

3.操作HTML DOM

html dom 都是一个个对象，所以我们可以利用相关的属性和方法进行dom操作，也就是对dom的增删改查操作，还有一个知识点就是，dom节点包含元素节点和文本节点，我们可以通过node.nodeType来辨别，

  • 获取特定的元素：
  1. document文档root, 
  2. doument.doumentElement:html元素,
  3. doument.body:body元素，
  4. doument.head:head元素，
  5. document.all:获取所有元素
  6. node.childNodes 所有子节点
  7. node.children 所有元素节点
  8. node.parentNode 父节点
  9. node.parentElement 父元素
  10. node.previousSibling 前一个兄弟节点
  11. node.previousElemnetSibling 前一个兄弟元素
  12. node.nextSibling 后一个元素节点
  13. ...
  • 查找一个节点api:
  1. document.getElementById() :通过id查找dom
  2. document.getElementsByTagName():通过元素标签查找
  3. document.getElementsByClassName():通过类名查找
  4. document.getElementsByName(),通过函数name属性的元素
  5. docmenet.querySelectorI('#id'):通过写css方式获取元素
  6. document.querySelectorAll():查找一类符合条件的元素
  • 增加一个节点
  1. 创建一个元素节点:document.createELement()
  2. 创建一个文本节点：document.createTextNode()
  3. 然后插入相应的节点中：node.appendChild(),document.append()这个默认在元素的尾部拆入节点，如果需要前面插入节点就需要使用box..insertBefore(div,div1),即在box节点的第一div1节点前面插入
  4. 属性innerHtml、innerText也可以添加相应的元素和节点
  • 删除一个节点
  1. parentNode.removeChild(node),parentNode.romve(node)
  • 更改一个节点
  1. 修改class:node.classList.add()、node.className = ''(编程时候推荐操作类的方式进行dom编程）
  2. 修改style:node.style.color = ''
  3. 修改内容：node.innerText = ''
  4. 修改属性：node.setAtrribute(),node.getAtrribute()
  5. 修改事件处理函数：node.onclick = function(){}

3.vue、react 中的虚拟dom

3.1 定义：能够表示dom的对象，对象中含有标签名、属性、子节点、事件监听等

3.2 dom结构

  • react 中的虚拟dom 数据结构如下代码

  •   const vNode = {
   key:xxx,
   type:'div',
   ref:xxx
   prop:{
    className:xxx,
    onClick:()=>{}
    children:[
      {type:p,....},
      {type:span,...}
    ]
   }
  }

  • vue 中的虚拟dom数据结构如下代码

  •   const vNode = {
      tag:'div',
      data:{
      class:'red',
      on:{
       click(){}
      }
     },
      children:[
      {tag:p,....},
      {tag:span,...}
      ]
  }

3.3 怎么创建虚拟dom

  • vue 通过h函数

    h('div',{ class:'red', on:{ click:()=>{} }},[h('p',{},'span'),h('p',{},'span')])

  • react 通过createElement()函数

    createElement('div',{ className:'red, onClick:()=>{}, [ createElement('p',{//属性},'span'), createElement('p',{//属性},'sapn') ] })

3.4虚拟dom的好处

  • 减少dom操作次数，虚拟dom将需要创建的元素存放在数组中，之后再一次性的插入到节点，同时借助dom diff 一层层比较dom变化来得到patch再更新dom；
  • 跨平台支持
avatar
文章
阅读
粉丝