1.添加节点（将新元素作为父元素的最后一个子元素进行添加。） <div id="div1"><p id="p1">这是一个段落。</p><p id="p2">这是另一个段落。</p></div> <script>var para=document.createElement("p");var node=document.createTextNo
JavaScript常见原生DOM操作API总结 目录 几种对象 Node NodeList HTMLCollection 节点查找API 节点创建API createElement createTextNode cloneNode createDocumentFragment 节点修改API appendChild insertBefore removeChild replaceChild 节点关系API 父
表单的校验规则 绑定事件: 绑定事件中执行方法的参数为ref属性的值 (ref被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用，引用信息就是元素; 如果用在子组件上，引用信息就是组件实例) 在方法中,this
Web 项目多语言（i18n，即国际化）是比较常见的需求，常规的做法大概有以下几种： 每种语言单独开发页面，适用于 CMS 之类的网站 多语言文本和页面结构分离，运行时动态替换。适用于单页应用（SPA） 直接用网页翻译插件，机器翻译。这种效果不太理想，同时有一些局限性（后面会讲到） 问题 每一种方案都有
1. diff算法 关键点在于 key，key是虚拟dom 中的标识，当列表数据变化产生新的虚拟dom，React 会把前后新旧虚拟dom 进行 diff 对比 key 不变： 对应的 遍历item 数据不变，直接使用原始真实dom 对应的 遍历item 数据改变，更新原始真实dom key 改变： 原 key 改变，销毁原始真实dom，创建新的
1.JavaScript简史 Netscape公司决定开发一种客户端语言用来处理浏览器端简单的表单验证。 Netscape公司派布兰登·艾奇（BrendanEich）为计划于1995年2月发布的Netscape Navigator 2开发一种叫LiveScript的脚本语言，该语言将同时在浏览器和服务器中使用（在服务器上的名字叫LiveWire）。 N
DOM 参考：CSDN zwwkkkk1博客 Node类型 快速导航：节点类型 | Node属性 | 操纵 NodeList 中节点常用方法 Node.ATTRIBUTE_NODEArrtibute属性节点2 常量名 节点类型 常用 值 Node.ELEMENT_NODE Element 元素节点 1 Node.TEXT_NODE Text 文本节点 3 Node.CDATA_
React diff算法 React通过引入虚拟dom的概念，避免了无效的dom操作，提高了dom的构建效率，为了高效的对比新旧虚拟dom树的异同引入了diff算法，react对diff算法进行了自己的优化，virtual Dom + diff； diff算法策略分为，tree diff，component diff,element diff React对以上三种策略进
认识DOM（文档对象模型） DOM（Document Object Model）：定义访问和处理HTML文档的标准方法。 DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>D
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>javascript监听DOM内容改变事件</title> <style type="text/css"> #el-test{ line-height: 100px;
一、html5中的template标签html中的template标签中的内容在页面中不会显示。但是在后台查看页面DOM结构存在template标签。这是因为template标签天生不可见，它设置了display:none;属性。 //当前页面只显示"我是自定义表现abc"这个内容，不显示"我是template",这是因为template标签天
写在前面 浏览器在从服务器端获得 html、css、js 文件后要进行页面的渲染，浏览器中有两个引擎非常重要，一个是渲染引擎，负责 html 和 css 文件的解析和渲染，另个一是 js 引擎，负责处理 js 文件逻辑。 浏览器渲染页面的整个流程到底是怎么样的呢？ 1. 根据HTML构建HTML树(DOM) 首先，浏览器
React是facebook开源的JS库，它可以把界面抽象成一个一个的组件，组件进行组合来得到功能丰富的页面。与Vue不同，React立足于MVC框架，是一个包括view和controller的库。首先我们来看一下什么是MVC。 MVC(Model View Controller)：M指的是业务模型，它有最多的处理任务，被模型返回的数
现在很多页面都是动态渲染的，数据不同dom结构也可能不同就会产生抖动，较真的产品经理就会想着让去优化，没办法，只能硬着头皮干。解决的办法就从他的原因入手，抖动的原因无非就是因为数据动态加载产生的dom不同，有些dom 被挤得变形了，所以事先给他的容器一个固定高度或者宽度就可以了。也算
浏览器会将HTML解析成一个DOM树，DOM 树的构建过程是一个深度遍历过程： 当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。 将CSS解析成 CSS Rule Tree 。 根据DOM树和CSSOM来构造 Rendering Tree。 注意：Rendering Tree 渲染树并不等同于 DOM 树， 因为一些像Header
1.1常见的JavaScript库 · jQuery· Prototype· YUI· Dojo· Ext JS· 移动端的zepto 这些库都是对原生JavaScript的封装，内部都是用JavaScript实现的 2.jQuery 下载 官网：http://jquery.com 版本： · 1x：兼容IE678 等低版本浏览器，官网不再更新· 2x：不兼容IE678等低版本浏览器，官网
Bullshit 本来想每天都更新下博客的，但是最近要考试，还有就是自己还是停留在暗自窃喜中吧(这种想法要改变)。其实最近总在想，自己要怎么去管理自己的数据，每天的生活都是对自己的数据的增删查改。昨天把自己的电脑重装了，确实很多软件的存放要改地方了，之前不知道怎么去管理软件安装，所以
知识点一：webAPI介绍 1、API定义 ① 应用程序编程接口 ② 是一些预先定义的函数 alert() prompt() log() reverse() 2、目的 ① 提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节 3、注意：
浏览器图片懒加载，可以预加载一个小的图片。 性能优化 监控lighthouse Compression: node 起静态资源，来压缩静态资源。 gZip加了一点运算量 讲防止重复被打包吗？ Webpack-analyatics(可实话的包) Tree shaking FMP FP FCP Ssr FP首屏 performance 网络 缓存（DNS成型，放到
1 //声明一个控制点击的变量 2 var upLoadClicktag = 0; 3 //点击事件 4 $("td.upLoad").on("click",function () { 5 //第一次进来为true 6 if(upLoadClicktag==0){ 7 //改版变量 8 upLoadClicktag = 1; 9 10 //此处写你要做的事情，操
创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content=&
DOM属性 console.log(ele.attributes) 获取ele元素的属性集合 ele.attributes.getNamesItem(attr).nodeValue 获取指定属性值 ele.attributes[attr].nodeValue 获取指定属性值 ele.attributes.removeNamedItem(attr) 删除指定属性 创建属性并赋值： var attr=document.create
一、DOM对象简介 DOM是文档对象模型。 二、文档对象获取的方法 2.1 通过Id来获取元对象：document.getElementById("id值"),返回的是一个对象。 2.2 通过标签名来获取对象 ：document.getElementsByTagName("标签名");返回一个集合【数组】。 2.3 通过class属性值
addEventListener() 方法 实例 添加当用户点击按钮时触发的事件监听器： document.getElementById("myBtn").addEventListener("click", displayDate); addEventListener() 方法为指定元素指定事件处理程序。 addEventListener() 方法为元素附加事件处理程序而不会覆盖已有的
选择器： 1.基本选择器： ID选择器： $("#id值") 标签选择器： $("标签名") 类选择器： $(".class值") 2.层级选择器[组合选择器]： $(selA selB) 后代选择器：选择selA标签内部所有后代中的selB标签 $(selA>selB) 子代选择器：选择selA标签直接子代中的selB标签 $(selA+sel
