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. Memcached 缓存系统简介

    memcached官网:http://memcached.org/ What is Memcached? Memcached是一个自由开源的,高性能,高并发,分布式内存对象缓存系统. Memcache ...

  2. 26.Apache

    1.Apache简介 Apache HTTP Server(简称Apache)是Apache软件基金会的一个开放源代码的网页服务器软件,可以在大多数电脑操作系统中运行,由于其跨平台和安全性(尽管不断有 ...

  3. 从零搭建一个IdentityServer——聊聊Asp.net core中的身份验证与授权

    OpenIDConnect是一个身份验证服务,而Oauth2.0是一个授权框架,在前面几篇文章里通过IdentityServer4实现了基于Oauth2.0的客户端证书(Client_Credenti ...

  4. [源码分析] Dynomite 分布式存储引擎 之 DynoJedisClient(1)

    [源码分析] Dynomite 分布式存储引擎 之 DynoJedisClient(1) 目录 [源码分析] Dynomite 分布式存储引擎 之 DynoJedisClient(1) 0x00 摘要 ...

  5. Python爬虫笔记一（来自MOOC） Requests库入门

    Python爬虫笔记一(来自MOOC) 提示:本文是我在中国大学MOOC里面自学以及敲的一部分代码,纯一个记录文,如果刚好有人也是看的这个课,方便搬运在自己电脑上运行. 课程为:北京理工大学-嵩天-P ...

  6. 2019牛客暑期多校训练营（第一场）H XOR(线性基)

    题意:给你n个数字,然后让你求所有满足异或和为0的子集的大小之和. 先对n个数求线性基,设线性基大小为r,可以分别计算线性基内数的贡献和线性基外数的贡献 1.线性基外:共n-r个数,枚举每个数x,将线 ...

  7. 【poj 2115】C Looooops（数论--拓展欧几里德 求解同余方程 模版题）

    题意:有一个在k位无符号整数下的模型:for (variable = A; variable != B; variable += C)  statement; 问循环的次数,若"永不停息&q ...

  8. bzoj3626: [LNOI2014]LCA (树链剖分+离线线段树)

    Description 给出一个n个节点的有根树(编号为0到n-1,根节点为0).一个点的深度定义为这个节点到根的距离+1. 设dep[i]表示点i的深度,LCA(i,j)表示i与j的最近公共祖先. ...

  9. AcWing 243. 一个简单的整数问题2 (树状数组,区间更新/询问)

    题意:区间更新,区间询问. 题解;对于区间更新,我们还是用差分数组\(b_i\)来更新,区间询问时,我们的答案是:\(\sum_{i=l}^{r}\sum_{j=1}^{i}b_j\), 所以,我们搞 ...

  10. Codeforces Round #550 (Div. 3) D. Equalize Them All (贪心,模拟)

    题意:有一组数,可以选择某个数\(a_i\)相邻的一个数\(a_j\),然后可以让\(a_i\)加上或者减去\(|a_i-a_j|\),问最少操作多少次使得数组中所有数相同. 题解:不难发现,每次操作 ...