https://www.cnblogs.com/djtang/p/11538420.html  dom的理解

https://blog.csdn.net/jiuqiyuliang/article/details/13766271  dom的理解

https://www.jianshu.com/p/f65e2610dde1  vue的理解

Windows：打开一个窗口，就是一个Windows对象。

Document：每个窗口的内容就是document，可以进行操作和访问。

DOM：是一种对页面操作的一种标准和规范，能够让开发人员更好的访问和操作数据。英文全称就是 document Object Model 文档对象模型，就是把文档当做对象来进行操作。

获取DOM元素可以通过id选择器，Class名称等方法获取。eg:document.getElementById()  document.getElementByClassName()

js中想要修改、移动、删除、添加等操作均需要DOM接口提供方法和属性。

eg:在一个页面中想要想一个p标签中添加内容。用原生js时，需要通过DOM提供的document.getElementById 或者document.getElementByClassName 等方法操作dom元素才可以。而Vue则不需要。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <script src="vue.js" type="text/javascript"></script>

    </head>

    <body>

        <div id="app">

            <p >{{msg}}</p>

        </div>

        <script type="text/javascript">

            var vm = new Vue({

                el:'#app',

                data:{

                    msg:"hellow vue"

                }

            });

            //以下是操作dom元素的写法 需要给p标签一个id

            //document.getElementById("qqq").innerHTML = "123"

        </script>    

    </body>

</html>

DOM的理解的更多相关文章

  1. 对dom的理解

    js对dom的操作可以理解为: 增.删.改.查 获取对象:查 对象操作:增,修,删 内容操作:innerHTML,innerText等 事件操作:mouse,key 样式操作:id,tag,class ...

  2. JavaScipt中对DOM的理解

    一.理解DOM 浏览器通过文档对象模型DOM使JavaScript程序可以访问页面上的元素,而DOM是页面上XHTML中文档正文标题.段落.列表.样式ID.class以及所有其他出现的数据的一个内部表 ...

  3. Virtual DOM 虚拟DOM的理解(转)

    作者:戴嘉华 转载请注明出处并保留原文链接( #13 )和作者信息. 目录: 1 前言 2 对前端应用状态管理思考 3 Virtual DOM 算法 4 算法实现 4.1 步骤一:用JS对象模拟DOM ...

  4. 【使用 DOM】理解 DOM

    DOM(Document Object Model,文档对象模型)允许我们用 JavaScript 来探查和操作 HTML 文档里的内容.它对于创建丰富性内容而言是必不可少的一组功能. 1. 理解文档 ...

  5. javascript与DOM -- 深入理解javascript

    /* 一.文档对象模型Document Object Model DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的API */ /* 注 ...

  6. 关于DOM的理解

    每个载入浏览器的HTML文档都会生成一个Document对象 Document对象使我们可以从脚本中对HTML中的所有元素进行访问 DOM实际上是以面向对象方式描述的对象模型,它将文档建模为一个个对象 ...

  7. accp8.0转换教材第7章JavaScript操作DOM对象理解与练习

    程序调试,chrome开发人员工具,DOM操作,节点和节点间的关系,节点信息,操作节点,获取元素 一.单词部分 ①alert警告②prompt提示③parentNode父节点④childNode子节点 ...

  8. javaScript操作DOM深入理解

    做为一个web前端,处理和了解浏览器差异一个重要问题.下面将介绍本人在工作中的一些笔记总结,先介绍没有使用js库的情况. 1. setAttribute方法设置元素类名 : 在jQuery中,直接使用 ...

  9. 第二十四篇:对于dom的理解

    好家伙, HTML            CSS              JS structure style        function 结构体    样式     功能 <>   ...

随机推荐

  1. /etc/fstab和/etc/mtab的区别

    etc/fstab文件的作用         记录了计算机上硬盘分区的相关信息,启动 Linux 的时候,检查分区的 fsck 命令,和挂载分区的 mount 命令,都需要 fstab 中的信息,来正 ...

  2. SQL系列总结——基础篇（三）

    之前的两篇文章SQL系列总结:<基础篇一>, <基础篇二>已经介绍了一些基本的数据库知识.现在让我们来从头开始构建一个数据库.到管理数据库和对象. 架构开始!     1.创建 ...

  3. jvm学习第二天

    0.垃圾回收概述 1.什么是垃圾,怎么判断? 1.1引用计数法 含义 顾名思义,此种算法会在每一个对象上记录这个对象被引用的次数,只要有任何一个对象引用了此对象,这个对象的计数器就+1,取消对这个对象 ...

  4. python实现经典排序算法

    以下排序算法最终结果都默认为升序排列,实现简单,没有考虑特殊情况,实现仅表达了算法的基本思想. 冒泡排序 内层循环中相邻的元素被依次比较,内层循环第一次结束后会将最大的元素移到序列最右边,第二次结束后 ...

  5. HDU6321 Dynamic Graph Matching【状压DP 子集枚举】

    HDU6321 Dynamic Graph Matching 题意: 给出\(N\)个点,一开始没有边,然后有\(M\)次操作,每次操作加一条无向边或者删一条已经存在的边,问每次操作后图中恰好匹配\( ...

  6. hdu 2089不要62 (数位dp)

    Problem Description 杭州人称那些傻乎乎粘嗒嗒的人为62(音:laoer). 杭州交通管理局经常会扩充一些的士车牌照,新近出来一个好消息,以后上牌照,不再含有不吉利的数字了,这样一来 ...

  7. c语言中qsort函数的使用、编程中的一些错误

    qsort()函数: 功能:相当于c++sort,具有快排的功能,复杂度的话nlog(n)注:C中的qsort()采用的是快排算法,C++的sort()则是改进的快排算法.两者的时间复杂度都是nlog ...

  8. 详解Go语言I/O多路复用netpoller模型

    转载请声明出处哦~,本篇文章发布于luozhiyun的博客:https://www.luozhiyun.com 本文使用的go的源码15.7 可以从 Go 源码目录结构和对应代码文件了解 Go 在不同 ...

  9. M1 MacBook安装Homebrew

    在装载M1芯片的MacBook产品上,默认是不带有homebrew这款包管理工具的,具体原因官方解释为适配问题,原有的homebrew无法与silicon Mac机型匹配.但是这并不意味着我们不可以在 ...

  10. 涂颜色的RPG问题

    长度为n的方格,刷3种颜色的颜料,相邻的方格颜料颜色不能相同,且首尾方格颜色不能相同.每个方格必须涂色.计算一共有多少种涂色方式. 解题思路:(1)f(1)=3,f(2)=6,f(3)=6 (2)如果 ...