dom对象

vue中的 ref 和 $refs

由 ◇◆丶佛笑我妖孽 提交于 2020-01-17 01:58:52
vue中的 ref 和 $refs 如图， ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例： 在上面的例子中，input的引用信息为input1 ，$refs 是所有注册过的ref的一个集合， console.log(this.$refs.input1)//<input type="text" id="input1"> console.log(document.getElementById('input1'))//<input type="text" id="input1"> 这两种方法获得的都是Dom节点，而$refs相对document.getElementById的方法，会减少获取dom节点的消耗。 ref和v-for在一起的情况 li里的ref的无法读取item里面的值，即item.name或被直接读取为字符串“item.name”， 此时的$refs 转载来源https://www.cnblogs.com/xumqfaith/p/7743387.html 整个用下来就是比较方便取DOM，方便操作DOM 如图， ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用

react-虚拟dom

由 南楼画角 提交于 2020-01-16 13:20:00
React中几个核心的概念 虚拟DOM（Virtual Document Object Model） DOM的本质是什么：就是用JS表示的UI元素 DOM和虚拟DOM的区别： DOM是由浏览器中的JS提供功能，所以我们只能人为的使用 浏览器提供的固定的API来操作DOM对象； 虚拟DOM：并不是由浏览器提供的，而是我们程序员手动模拟实现的，类似于浏览器中的DOM，但是有着本质的区别； 为什么要实现虚拟DOM： 什么是React中的虚拟DOM： 虚拟DOM的目的： Diff算法 tree diff:新旧DOM树，逐层对比的方式，就叫做 tree diff,每当我们从前到后，把所有层的节点对比完后，必然能够找到那些 需要被更新的元素； component diff：在对比每一层的时候，组件之间的对比，叫做 component diff;当对比组件的时候，如果两个组件的类型相同，则暂时认为这个组件不需要被更新，如果组件的类型不同，则立即将旧组件移除，新建一个组件，替换到被移除的位置； element diff:在组件中，每个元素之间也要进行对比，那么，元素级别的对比，叫做 element diff； key：key这个属性，可以把 页面上的 DOM节点 和 虚拟DOM中的对象，做一层关联关系； <!DOCTYPE html> <html lang="en"> <head> <meta

js 获取当前元素距离窗口的距离

由 筅森魡賤 提交于 2020-01-16 03:15:51
获取dom到body左侧和顶部的距离-getBoundingClientRect 平时在写js的时候，偶尔会需要用js来获取当前div到 body 左侧、顶部的距离。网上查一查，有很多都是通过offsetTop、offsetLeft来计算出来的。我按照网上的查到的资料用了一次，算出来了一堆错误答案。下面我要分享的这个方法，兼容性很好（ie4都ok），而且很方便，不会算错。 这个方法就是 getBoundingClientRect。 1.getBoundingClientRect方法简介 getBoundingClientRect 返回的是一个 DOMRect 对象，是一组矩形集合，我们这次所使用的返回值主要是left、top、bottom和right。其余的返回值width、height、x、y这次用不到,就不再讨论。 使用方法如下： let domToTop = dom.getBoundingClientRect().top // dom 的顶边到视口顶部的距离 let domToLeft = dom.getBoundingClientRect().left // dom 的左边到视口左边的距离 let domToBottom = dom.getBoundingClientRect().bottom // dom 的底边到视口顶部的距离 let domToRight = dom

vue的常用组件方法应用

由 一个人想着一个人 提交于 2020-01-16 01:07:55
项目技术： webpack + vue + element（mint-ui, etc...） + axois (vue-resource) + less-loader+ ... vue的操作的方法案例： 1.数组数据还未获取到，做出预加载的动画 <el-carousel :interval="3000" type="card" height="200px" class="common-mt-md"> <el-carousel-item v-for="item in movieArr" :key="item.id" class="text-center"> <img v-bind:src="item.images.small" alt="电影封面" class="ticket-index-movie-img"> </el-carousel-item>// 实际显示的内容-跑马灯 <div v-if="!movieArr.length" class="ticket-index-movie-loading"> <span class="el-icon-loading "></span> </div>// 当 movirArr的数组为空的时候，做出的预加载 loading </el-carousel> 2. 按钮状态的判断，按钮能不能点的问题 <p v-if="

每日思考（2020/01/15）

由 拟墨画扇 提交于 2020-01-16 00:06:04
题目概览 DOM和BOM有什么区别? 让网页的字体变得清晰，变细用CSS怎么做？ 写一个方法把0和1互转（0置1，1置0） 题目解答 DOM和BOM有什么区别？ DOM 是 Document Object Model 的缩写。即文档对象模型，遵循 W3C 制定的标准。提供了独立于内容而与浏览器窗口进行交互的对象。描述了与浏览器进行交互的方法和接口，可以对浏览器窗口进行访问和操作，譬如可以弹出新的窗口，改变状态栏中的文本。其本质就是 DOM 元素。最早使用的 document.getElementById 获取到的对象就是 DOM 对象。利用 JS 操作某个 DOM 的颜色、形状、大小都是对 DOM 元素的操作。在代码上可以理解为 document 开头的方法和属性 BOM 是 Browser Object Model 的缩写。即浏览器对象模型，这并没有一套规定标准，每个浏览器都有自己的实现DOM 是针对 HTML 的基于树的 API。描述了处理网页内容的方法和接口，是 HTML 的API，DOM 把整个页面规划成由节点层级构成的文档。但事实上在大部分主要的功能上都已经形成默契。BOM 主要操作浏览器的行为，比 navigator ， location ， history ， storage 都为 BOM 的操作。其根对象是 window，可以理解为 winodw 开头的方法 关系

jQuery——选择器

由 扶醉桌前 提交于 2020-01-15 20:10:22
1、层级选择器 选择器是jQuery的核心。一个选择器写出来类似 $('#dom-id') 。 公式 ： $(选择器).事件(事件函数) 回顾DOM操作中我们经常使用的代码： // 按ID查找： var a = document.getElementById('dom-id'); // 按tag查找： var divs = document.getElementsByTagName('div'); // 查找<p class="red">： var ps = document.getElementsByTagName('p'); // 过滤出class="red": // TODO: // 查找<table class="green">里面的所有<tr>： var table = ... for (var i=0; i<table.children; i++) { // TODO: 过滤出<tr> } 这些代码实在太繁琐了，并且，在层级关系中，例如，查找 <table class="green"> 里面的所有 <tr> ，一层循环实际上是错的，因为 <table> 的标准写法是： <table> <tbody> <tr>...</tr> <tr>...</tr> </tbody> </table> 很多时候，需要递归查找所有子节点。

DOM文档对象模型

由 青春壹個敷衍的年華 提交于 2020-01-15 01:08:48
JavaScript HTML DOM 通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。 HTML DOM (文档对象模型) 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 HTML DOM 模型被构造为对象的树： 通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。 JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变页面中的所有 HTML 属性 JavaScript 能够改变页面中的所有 CSS 样式 JavaScript 能够对页面中的所有事件做出反应 查找 HTML 元素 通常，通过 JavaScript，您需要操作 HTML 元素。 为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事： 通过 id 找到 HTML 元素 通过标签名找到 HTML 元素 通过类名找到 HTML 元素 通过 id 查找 HTML 元素 在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。 本例查找 id=“intro” 元素： 实例 var x = document . getElementById ( "intro" ) ; 如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。 如果未找到该元素，则

JavaScript HTML DOM

由 ↘锁芯ラ 提交于 2020-01-14 07:56:53
通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。 HTML DOM （文档对象模型） 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被构造为对象的树。 HTML DOM 树 通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。 JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变页面中的所有 HTML 属性 JavaScript 能够改变页面中的所有 CSS 样式 JavaScript 能够对页面中的所有事件做出反应 查找 HTML 元素 通常，通过 JavaScript，您需要操作 HTML 元素。 为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事： a.通过 id 找到 HTML 元素 在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。 实例 本例查找 id=“intro” 元素： var x = document.getElementById ( "intro" ) ; 如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。 如果未找到该元素，则 x 将包含 null B.通过标签名找到 HTML 元素 实例 本例查找 id=“main” 的元素，然后查找

DOM事件模型

由 早过忘川 提交于 2020-01-13 21:42:37
一、事件流 　　事件流描述的是从页面中接收事件的顺序。IE和网景团队提出流相反的事件流概念。IE事件流是事件冒泡流，而网景是事件捕获流。 二、事件冒泡 　　IE的事件流叫做事件冒泡，即事件开始由最具体的元素接收，然后逐级向上传播到较为不具体的节点。 　　 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div> 点我点我 </div> </body> </html> 如果你单击了div元素，那么click事件会按照如下事件传播 <div> <body> <html> document 点击元素会从最具体的元素向上传播。所有现代浏览器都支持事件冒泡，但是具体实现还是有些差别，IE5.5及更早版本的事件会跳过<html>元素。 三、事件捕获 网景公司提出的另一个事件流叫做事件捕获，事件捕获的思想上不太具体的节点应该更早接收到事件，而最具体的元素应该最后接收到事件，事件捕获的目的的事件到达预期目标之前捕获它。之前的例子来说就是 document html body div 由于老版的浏览器不支持事件捕获，所以我们一般使用的都是事件冒泡。 四、DOM事件流 DOM2级规定的事件流包含三个阶段， 事件捕获阶段、处于目标阶段和事件冒泡阶段

HTML DOM学习总结

由 南笙酒味 提交于 2020-01-13 18:44:07
一、基本定义 DOM (Document Object Model) 译为 文档对象模型 ，是 HTML 和 XML 文档的编程接口。HTML DOM 定义了访问和操作 HTML 文档的标准方法。DOM 以树结构表达 HTML 文档。 二、思维导图 三、实例说明 https://www.runoob.com/htmldom/htmldom-intro.html 或 https://www.w3school.com.cn/htmldom/index.asp 来源： CSDN 作者： Alone_in_ 链接： https://blog.csdn.net/Alone_in_/article/details/103954707
订阅 dom对象