首页 > TAG信息列表 > DOM

DOM第二章 节点操作

元素节点操作 切换图片 <style> p { text-align: center; width: 400px; height: 50px; } div { width: 400px; height: 400px; background: goldenrod; margin:

20道高频react面试题(附答案)

在构造函数调用 super 并将 props 作为参数传入的作用 在调用 super() 方法之前,子类构造函数无法使用this引用,ES6 子类也是如此。 将 props 参数传递给 super() 调用的主要原因是在子构造函数中能够通过this.props来获取传入的 props 传递了props class MyComponent extends React

nextTick

在Vue中,数据的更新不会马上同步到视图上,而是放在一个异步更新队列中,在下一个事件循环tick集中更新。 由于这个机制,我们如果想在基于更新后的DOM状态做点什么,就没办法在更新数据后马上获取DOM,因此为此时数据还未同步到视图上。而Vue提供了nextTick(),它可以传入一个回调函数,这个回调

前端学习_知识点记录

1. DOCTYPE 的作用是什么? <!DOCTYPE>声明位于 HTML 文档中的第一行,处于 <html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。 2.link与@import导入外部样式的区别  link属于XHTML标签;@import完全是css提供的一种方式。 link标签除了可以加载css外,还可以做很多其他

如何写成高性能的代码(一):巧用Canvas绘制电子表格

一、什么是Canvas Canvas是HTML5的标签,是HTML5的一种新特性,又称画板。顾名思义,我们可以将其理解为一块画布,支持在上面绘制矩形、圆形等图形或logo等。 需要注意的是,与其他标签不同,Canvas只是一块空画布,其本身是不能绘制图形的,必须通过JavaScript 脚本进行绘制。 大多数现代浏览器

JS DOM:获取元素、getAttribute()方法、setAttribute()方法

认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构(节点树)。 先来看看下面代码: 1).将HTML代码分解为DOM节点层次图: 2).HTML文档可以说由节点构成的集合,DOM节点有: 3).节点属性: 在文档对象

$nextTick 的理解

<template> <div> <div ref="msg">{{ message }}</div> <div>{{ message1 }}</div> <button @click="changeMessage">改变message</button> </div> </template> <script

js获取不到v-for里面的元素

需求描述笔者在开发某个界面时,需要操作v-for循环中某个div(该节点指定特定class)节点对其绑定鼠标事件,同时为了测试也在v-for之外也添加了同样的节点,如下图所示,图1是v-for要操作的div节点,图2是自己弄的假数据i节点,图3的mouted操作代码         问题描述每次加载界面时,只能获取

为开源提 PR

PR 可让你在 GitHub 上向他人告知你已经推送到存储库中分支的更改。 在 PR 打开后,你可以与协作者讨论并审查潜在更改,在更改合并到基本分支之前添加跟进提交。 为什么 PR 使用 PR 的主要原因是促进有益的代码审查过程。如果允许团队中的每个人都在不收集反馈和确保质量的情况下

8、操作DOM对象(重点)

[DOM]事件基础:事件三要素、事件执行、常见鼠标点击事件

[DOM]事件基础:事件三要素、事件执行、常见的鼠标事件 JavaScript使我们有能力创建动态页面,而事件是可以被JavaScript侦测到的 简单理解:触发——响应机制 页面中的每个元素都可以产生某些可以触发JavaScript的时间,例如,我们可以在用户点击按钮时产生一个时间,然后去执行某些操作 1.事

学习框架后的反思——为什么要使用框架?

“我报名了Goldstone Project Phase 1 Challenge——瓜分100,000奖池,这是我的第一篇文章, 点击查看活动详情 “ 我学习前端有一段时间了。最近在网上看到一个让我反思很久的问题——为什么要使用前端框架? 发现刚学这个框架的时候并没有想太多,只是看中了它在行业中的应用。公司大

web安全 - XSS类型

1. 传统分类 反射型XSS (Reflected XSS) 当web应用在搜索结果,错误消息或其他响应返回用户输入时,就会发生反射型XSS。最常见的做法 是攻击者利用web应用的xss漏洞,构造一个url,通过邮件短信等方式诱导用户点击,当请求发出后, web应用返回url中隐藏的恶意代码,并在用户浏览器中执行,从而

html2canvas配合printjs将页面打印出pdf

import html2canvas from 'html2canvas' import PrintJS from 'print-js' // 打印类属性、方法定义 给需要打印的加上class.flow-print /* eslint-disable */ const Print = function (dom, options = {}) {   if(!dom) {     dom = '.flow-print'   }   if ((ty

第一章、react高级

目录一、邂逅react开发和初体验1、简介2、hello react案例 一、邂逅react开发和初体验 1、简介 * react是什么? - 用于构建用户界面的javascript库 * 常见的javascript库 - jquery - vue - react - angular * react的起源 - 2013年,facebook开源的javascrip

HTML DOM

​ /* *作者:呆萌老师 *☑csdn认证讲师 *☑51cto高级讲师 *☑腾讯课堂认证讲师 *☑网易云课堂认证讲师 *☑华为开发者学堂认证讲师 *☑爱奇艺千人名师计划成员 *在这里给大家分享技术、知识和生活 *各种干货,记得关注哦! *vx:it_daimeng */      HTML DOM 定义了访问和操作 HTM

加入购物车抛小球和购物车晃动

抛出小球加到地方对应元素晃动(加入购物车动画) /** * * 横向抛小球到购物车 * @param addBtnDom 增加按钮的dom元素或者选择器,初始位置 * @param shopCarDom 购物车的dom元素或选择器,结束位置 * @param shopImg 购物车需要晃动的元素 */ export default function controllPa

伪数组和数组

区别 伪数组的类型不是Array,而是Object,而数组类型是Array。   伪数组可以使用的length属性查看长度,也可以使用[index]获取某个元素,但是不能使用数组的其他方法,也不能改变长度,遍历使用for in方法。   伪数组的常见场景: 函数的参数arguments 原生js获取DOM:document.querySelector(

前端JS-Day20

BOM:浏览器对象模型,核心对象为Window  通过var声明的所有全局变量和函数都会变成window对象的属性和方法,let或const则不行。    窗口加载事件:addEventListener('load' fuction(){})   DOMContentLoaded事件,仅当DOM加载完成才运行js函数   document.addEventListener('D

前端JS-Day19

动态创建元素: document.write:直接写入页面流,会导致页面重绘。 innerHTML和createElement相似,但执行效率不同。创建内容时若采取数组形式,innerHTML耗时优于createElement。      DOM重点核心:     DOM对于元素操作:创建、增、删、改、查、属性操作、事件操作。 创建:1.document

如果你能解决这 10 个练习,你就是 HTML DOM Pro

如果你能解决这 10 个练习,你就是 HTML DOM Pro 从简单到艰苦的练习。 Photo by 斯科特·格雷厄姆 on 不飞溅 众所周知,JavaScript 是一种非常强大的语言,无论是在浏览器环境中还是在服务器环境中运行。在任何一种环境中,它都由强大而强大的 API 提供支持,以帮助轻松执行给定的任务

事件对象

1、事件对象是什么? 也是个对象,这个对象里有事件触发时的相关信息 2、事件对象在哪里? 在事件绑定的回调函数的第一个参数就是事件对象        3.常见事件对象属性 type:获取当前的事件类型 clientX/clientY:获取光标相对于浏览器可见窗口左上角的位置 offsetX/offsetY:获取光标相

反应变得简单!

反应变得简单! 如果您完全不知道对语言做出反应,那么阅读这篇文章可能是一个良好的开端,即使您一开始没有遵循,只要坚持到博客的最后一个,您就会得到它。这里还有一些关于 React 的无用但有趣的事实。如果您赶时间,请跳过反应历史段落。 内容 : 反应历史 为什么每个前端开发人员都喜欢 r

【Vue面试题】谈谈你对Vue的diff算法的理解

1 diff算法到底是什么? diff算法是一种通过同层的树节点进行比较的高效算法,它可以不用频繁操作DOM,而是选用虚拟DOM节点操作,说人话就是专门用来处理虚拟DOM节点的。 2 操作流程? 为了更好理解Vue的diff算法,请先看一位B站大佬精心制作的 动画演示。 通过上面视频可以很好理解diff算

解决层级按序排号、接口返回参数双向绑定值无法修改问题、表单重置、路由截取参数、目标打印

1、item.optionValues.sort((a, b) => a['optionSort'] - b['optionSort'])   //a-b从小到大   b-a从大到小 2、接口返回参数双向绑定值无法修改问题用this.$set()  //this.$set(需要被改值的对象,被改的键,被改的值) 3、Object.assign(this.$data.mesPiform, this.$options.da