dom

vue知识点，面试题考试

由 三世轮回 提交于 2020-01-22 06:43:41
vue面试题 1.Vue和react的相同与不同 相同点： 都支持服务器端渲染 都有virtual DOM，组件化开发，通过props参数进行父子组件数据的传递，都实现webComponent规范 数据驱动视图 都有支持native的方案，react native，Vue的weex 都有管理状态，react有redux,vue有自己的VueX 不同点： react严格上只针对MVC的view层，Vue则是MVVM模式 virtual DOM不一样，Vue会跟踪每一个组建的依赖关系，不需要重新渲染整个组件树。而对于react而言，每当应用的状态被改变时，全部组件都会重新渲染，所以react中会需要shouldcomponentUpdate这个生命周期函数方法来进行控制 组件写法不一样, React推荐的做法是 JSX + inline style, 也就是把HTML和CSS全都写进JavaScript了,即’all in js’; Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,jd写在同一个文件; .数据绑定: vue实现了数据的双向绑定,react数据流动是单向的 .state对象在react应用中不可变的,需要使用setState方法更新状态; 在vue中,state对象不是必须的,数据由data属性在vue对象中管理； 2

How to disable a button with a timed loop?

由 陌路散爱 提交于 2020-01-22 02:50:07
问题 i'm trying to disable a button for 6 seconds while in a loop but so far I can't quite figure it out. var disabledStartTimer = setInterval(disabledTimer, 1000); function disabledTimer() { var start = 0; if (start > 6) { clearInterval(disabledStartTimer); console.log("disabled timer stopped"); attack.disabled = true; } else { attack.disabled = false; start++; }; } attack = the button I click to attack. 回答1: var start = 0; if (start > 6){ Clearly this will always go into the else. You set the

javaScript系列 [28]

由 試著忘記壹切 提交于 2020-01-21 23:15:47
本文介绍JavaScript事件相关的知识点，主要包括事件流、事件处理程序、事件对象(event)以及常见事件类型和事件委托等相关内容。 在网页开发涉及的三种基础技术( HTML CSS JavaScript )中，JavaScript主要负责处理页面的 行为 ，而所谓行为大多指的是 交互行为 。 JavaScript和HTML间的交互通过事件来实现 ，换句话来说事件其实就是页面文档或浏览器窗口中发生的特定交互，譬如页面中的按钮标签被点击我们称之为按钮的点击( click )事件，类似的还有页面加载事件、鼠标的移入移除等等。 通常,我们在开发中对事件的操作(处理)主要由两部分组成，即 事件注册 和 事件函数 。我们总是需要先通过特定的方式来给标签添加(注册)事件监听，当事件发生时事件函数将得以调用执行。本文以 能够清晰明确的把事件的传递过程、事件注册的方式、事件对象以及常见的事件类型讲解清楚 为目标。 事件流 事件流 描述的其实是事件内在的传递过程(顺序)。 我们的开发经验是，当我们给某些标签注册(绑定)了事件后，该事件被触发就会执行对应的事件处理函数。这似乎是一个顺理成章的经验，但事件到底是如何传递的呢 ？我们知道在网页中有很多的Node节点，而Node节点之间是复杂的树结构，事件在接收、传递和处理的时候，是按照 目标节点->上层节点->根节点 还是 根节点->下层节点-

09js.BOM和DOM

由 耗尽温柔 提交于 2020-01-21 22:42:14
BOM / DOM（上） 使用 js 去操作浏览器和页面中的 html 元素了 BOM BOM（Browser Object Model）： 浏览器对象模型 其实就是操作浏览器8 的一些能力 我们可以操作哪些内容 获取一些浏览器的相关信息（窗口的大小） 操作浏览器进行页面跳转 获取当前浏览器地址栏的信息 操作浏览器的滚动条 浏览器的信息（浏览器的版本） 让浏览器出现一个弹出框（alert/confirm/prompt） BOM 的核心就是 window 对象 window 是浏览器内置的一个对象，里面包含着操作浏览器的方法 获取浏览器窗口的尺寸 innerHeight 和 innerWidth 这两个方法分别是用来获取浏览器窗口的宽度和高度（包含滚动条的） var windowHeight = window.innerHeight console.log(windowHeight) var windowWidth = window.innerWidth console.log(windowWidth) 浏览器的弹出层 alert 是在浏览器弹出一个提示框 window.alert(‘我是一个提示框’) 这个弹出层知识一个提示内容，只有一个确定按钮 点击确定按钮以后，这个提示框就消失了 confirm 是在浏览器弹出一个询问框 var boo = window.confirm(

Web图片资源的加载与渲染时机

由 自作多情 提交于 2020-01-21 15:46:07
此文研究页面中的图片资源的加载和渲染时机，使得我们能更好的管理图片资源，避免不必要的流量和提高用户体验。 浏览器的工作流程 要研究图片资源的加载和渲染，我们先要了解浏览器的工作原理。以 Webkit 引擎的工作流程为例： 从上图可看出，浏览器加载一个HTML页面后进行如下操作： 解析HTML —> 构建DOM树 加载样式 —> 解析样式 —> 构建样式规则树 加载javascript —> 执行javascript代码 把DOM树和样式规则树匹配构建渲染树 计算元素位置进行布局 绘制 从上图我们不能很直观的看出图片资源从什么时候开始加载，下图标出图片加载和渲染的时机： 解析HTML【遇到 <img> 标签加载图片】 —> 构建DOM树 加载样式 —> 解析样式【遇到背景图片链接不加载】 —> 构建样式规则树 加载javascript —> 执行javascript代码 把DOM树和样式规则树匹配构建渲染树【遍历DOM树时加载对应样式规则上的背景图片】 计算元素位置进行布局 绘制【开始渲染图片】 图片加载与渲染规则 页面中不是所有的 <img> 标签图片和样式表背景图片都会加载。 display:none <style> .img-purple { background-image: url(../image/purple.png); } </style> <img src="..

Should't JavaScript ignore whitespace? Node quirk in Firefox

由 混江龙づ霸主 提交于 2020-01-21 12:42:30
问题 I encountered this "bug" in the latest verison of firefox and I don't know what causes this behavior and which is the correct result. HTML <div><h1 id="heading">First Title</h1></div><div><h1>Second Title</h1></div> JavaScript var allDivNodes = document.getElementsByTagName("div"); console.log(allDivNodes[0].childNodes); console.log(allDivNodes[1].childNodes); console.log(allDivNodes[0].childNodes.length); console.log(allDivNodes[1].childNodes.length); The result I get is the following: And

Should't JavaScript ignore whitespace? Node quirk in Firefox

由 此生再无相见时 提交于 2020-01-21 12:42:14
问题 I encountered this "bug" in the latest verison of firefox and I don't know what causes this behavior and which is the correct result. HTML <div><h1 id="heading">First Title</h1></div><div><h1>Second Title</h1></div> JavaScript var allDivNodes = document.getElementsByTagName("div"); console.log(allDivNodes[0].childNodes); console.log(allDivNodes[1].childNodes); console.log(allDivNodes[0].childNodes.length); console.log(allDivNodes[1].childNodes.length); The result I get is the following: And

Java DOM transforming and parsing arbitrary strings with invalid XML characters?

由 爱⌒轻易说出口 提交于 2020-01-21 11:49:08
问题 First of all I want to mention that this is not a duplicate of How to parse invalid (bad / not well-formed) XML? because I don't have a given invalid (or not well-formed) XML file but rather a given arbitrary Java String which may or may not contain an invalid XML character. I want to create a DOM Document containing a Text node with the given String , then transform it to a file. When the file is parsed to a DOM Document I want to get a String which is equal to the initial given String . I

How to check if a browser supports shadow DOM

由 安稳与你 提交于 2020-01-21 10:50:26
问题 One way would be to check if there is a .shadowRoot property on an element, however I need to return a boolean before the page is rendered. 回答1: One simple feature test would be: if (document.head.createShadowRoot || document.head.attachShadow) { // I can shadow DOM } else { // I can't } This will work even if you include the script in the head section and assumes no malicious scripts were added prior to yours (a safe assumption). Currently, Chrome, Opera, and derived browsers (like Android

Get HTML String for jQuery and/or DOM object

由 与世无争的帅哥 提交于 2020-01-21 07:38:25
问题 I think I've read through the complete jQuery API documentation and looked at jQuery objects and simple DOM elements in the debugger to check what methods they actually have at runtime, but for the life of me, I can't find a way to get the html string that represents the contents of a jQuery object or a DOM Node. Am I missing something? jQuery objects have the method html() , DOM elements have the property innerHTML but both only give the inner html of the object. So if I have HTML like this:
订阅 dom