如果同时添加父元素和子元素时，应该先在内存将子元素都添加到父元素中，再将父元素一次性整体添加到 DOM 树，这样只会触发一次 layout ②....创建文档片段 var frag=document.createDocumentFragment() B. 将子元素临时添加到frag中 frag.appendChild(child) C....添加行，在行分组中 i 位置插入一个新行， 中间插入行，原 i 位置的行向后顺移 A. 表头添加行: var tr=thead.insertRow(i); B....任何方式提交表单之前自动触发 form.onsubmit 常用于在提交之前，验证所有表单元素的内容 (7). 让 elem 获得焦点 elem.focus() (8)....事件对象 事件发生时自动创建的封装事件信息提供操作事件的 API 的对象通常作为事件处理函数的第一个参数，默认自动传入 on 事件名=function(e){ // e 会自动获得事件对象
HTML元素 append() 向每个匹配的元素内部追加内容 appendTo() 将所有匹配的元素追加到另一个指定的元素集合中 注意：$(A).append(B)的操作，不是将B追加到A中，而是将...A追加到B中 prepend() 向每个匹配的元素内部前置内容 prependTo() 将所有匹配的元素前置到另一个指定的元素集合中。...注意：$(A).prepend(B)的操作，不是将B前置到A中，而是将A前置到B中 after() 在每个匹配的元素之后插入内容 insertAfter() 将所有匹配的元素插入另一个指定的元素集合的后面...注意：$(A).after(B)的操作，不是将B插入到A后面，而是将A插入到B的后面 before() 在每个匹配的元素之前插入内容 insertBefore() 将所有匹配的元素插入另一个指定的元素集合的前面...keypress()当键盘或按钮被按下时，发生keypress事件。 表单事件 当提交表单时，会发生submit事件。
这些文档等概念在 JS 代码中就对应一个个的对象. 所以才叫 “文档对象模型” . 查找HTML元素 下面我们将介绍几种常见的DOM元素选择方法。...示例： let newDiv = document.createElement("div"); 说明： 该方法创建了一个新的 div 元素，但此时它还没有被添加到页面中，需要使用其他方法将其插入到 DOM...; 说明： 创建了一个包含文本 “Hello, World!” 的文本节点，可以将它插入到一个元素中显示在页面上。 4....; }); 解释： 当用户将鼠标悬停在ID为 hoverElement 的元素上时，控制台将打印一条消息。 5. submit submit 事件在表单提交时触发。...通常用于在表单提交之前验证表单数据。
DOM 文档对象模型 Document对象 Document对象集合 集合 描述 all 页面中所有标签,不去重,返回一个数组 forms 返回对文档中所有 Form 对象的引用,返回一个数组 images...Form的对象方法 方法 描述 reset() 把表单中的元素重置为它们的默认值 submit() 提交表单 Form对象事件句柄 事件句柄 描述 onreset 在重置表单元素之前调用 onsubmit...在提交表单之前调用 Form表单提交的三种方式 直接在form表单中设置提交按钮或button 使用HTML5方法,在表单外面也可使用,类似label 使用JavaScript中的submit()方法...，或重置当前路径 moveTo() 把路径移动到画布中的指定点，不创建线条 closePath() 创建从当前点回到起始点的路径 lineTo() 添加一个新点，然后在画布中创建从该点到最后指定点的线条...insertRow() 在表格中插入一个新行。 TableRow对象 TableRow 对象集合 集合 描述 cells[] 返回包含行中所有单元格的一个数组。
在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点: 文档是一个文档节点 所有的 HTML 元素都是元素节点 所有 HTML 属性都是属性节点 文本插入到...() 返回带有指定名称的对象集合 document.getElementsByTagName() 返回带有指定标签名的对象集合 document.importNode() 把一个节点从另一个文档复制到该文档以便应用...，但当前文档不保留在history对象中， // 即无法用后退按钮，回到当前文档 document.location.assign('http://www.google.com') // 将location...NodeList 对象不是动态集合，所以元素节点的变化无法实时反映在返回结果中。...，从其原来所在的文档移除，插入当前文档，并返回插入后的新节点。
为文本框指定一个可用的选项列表，当用户在文本框中输入信息时，会根据输入的字符，自动显示下拉列表提示，供用户从中选择 pattern 用于验证表单输入的内容 novalidate 当提交表单的时候不会其进行验证...在一个函数内部创建另外一个函数，并把这个函数return。 用函数为元素绑定事件，当事件发生时，可以操作该函数中的变量。...() 将每个匹配的元素内部追加内容 appendTo() 将所有匹配的元素追加到另一个指定的元素集合中 prepend() 将每个匹配的元素内部前置内容 prependTo(） 把所有匹配的元素前置到指定的元素集合中...after() 在每个匹配的元素之后插入内容 before() 在每个匹配的元素之前插入内容 insertAfter() 将所有匹配的元素插入到指定的元素后 insertBefore() 将所有匹配的元素插入到指定的元素前...同源策略是从一个源加载的文档或脚本去另一个源进行资源交互。
遇到字符 时，状态更改为“标记打开状态”。接收一个 a-z 字符会创建“起始标记”，状态更改为“标记名称状态”。这个状态会一直保持到接收 > 字符。在此期间接收的每个字符都会附加到新的标记名称上。...接收到 Hello world 中的 H 字符时，将创建并发送字符标记，直到接收 中的 中的每个字符都发送一个字符标记。...接收下一个输入字符 / 时，会创建 end tag token 并改为“标记名称状态”。我们会再次保持这个状态，直到接收 >。然后将发送新的标记，并回到“数据状态”。...这些状态称为“插入模式”。 在上一步符号化以后，解析器获得这些标记,然后以合适的方法创建 DOM 对象并将这些符号插入到 DOM 对象中。...还可以取消一些事件，例如，如果表单没有正确填写，则可以停止表单提交。(提交事件是从 元素触发的，JavaScript 侦听器可以检查表单，如果字段为空或无效，还可以选择取消事件。)
属性 Document(): Document构造器创建一个新的Document对象，该对象是在浏览器中加载的页面，并作为页面内容的入口点。...document.onselect: 窗口内表单元素中文本被选中时触发。 document.onsubmit: 窗口内表单中submit按钮被按下触发。...属性会变成当前的document文档，之后你可以把这个节点插入到当前文档中。...document.importNode(externalNode, deep): 将外部文档的一个节点拷贝一份，然后可以把这个拷贝的节点插入到当前文档中。...document.open(): 打开一个要写入的文档，这将会有一些连带的影响，例如此时已注册到文档、文档中的节点或文档的window的所有事件监听器会被清除，文档中的所有节点会被清除。
HTML 的 method 特性 submit(): 提交表单 reset(): 将所有表单域重置为默认值 提交表单 使用 input 或 button 都可以定义提交按钮，只要将其 type 特性的值设置为...重置表单 在用户单击重置按钮时，表单会被重置。使用 type 特性值为 “reset” 的 input 或 button 都可以创建重置按钮，如下: 表单时，所有表单字段都会恢复到页面刚加载完毕时的初始值。如果某个字段的初始值为空，就会恢复为空; 而带有默认值的字段，也会恢复为默认值。...这个 elements 集合是一个有序列表，其中包含着表单中的所有字段，每个表单字段在 elements 集合中的顺序，与它们出现在标记中的顺序相同，可以按照位置和 name 特性来访问它们。...的字段，在提交表单时都不能空着。
1.2 创建文档 创建文档实际上就是向集合中插入数据。...分为两步： 创建集合实例。 调用实例对象下的save方法将数据保存到数据库中。...const course = new Course({ name// 如果想要向集合中插入数据 那么需要创建集合构造函数的实例 // 创建文档 const course = new Course...mongoose验证 在创建集合规则时，可以设置当前字段的验证规则，验证失败就则输入插入失败。...连接数据库，创建用户集合，向集合中插入文档 当用户访问/list时，将所有用户信息查询出来 实现路由功能 呈现用户列表页面 从数据库中查询用户信息 将用户信息展示在列表中
result){ // 获取文件内容成功时的处理 }).catch(function(error){ // 获取文件内容失败时的处理 }); ---- 返回promise对象 创建...[对象类型]) name是要创建的集合的名称。...要将数据插入到mongodb集合中，需要使用mongodb的insert()或save()方法。...) 在插入的文档中，如果不指定_id参数，那么mongodb会为此文档分配一个唯一的ObjectId 要插入文档，也可以使用db.post.save(document)。...id主键为3的文档，覆盖新的值，注意_id为必传 db.age.save({ '_id':3, 'title': 'wscats' }) 删除文档 删除主键_id为3的文档，默认是删除多条
一种方法是在具有唯一值的字段上创建唯一索引。这样可防止插入操作或更新操作产生重复数据。在多个字段上创建唯一索引时，强制要求多个字段值的组合具有唯一性。...初始化数据源和目标账户 向accounts 集合中插入一个文档表示账户A和另一个文档表示账户B。...当成功插入时，BulkWriteResult()中的nInserted 被设置为2。 初始化转移记录 对于每次资金转移，将含有转移信息的文档插入transactions 集合中。...更新目标账户，将事务文档value字段值加到账户中并且将事务文档的_id插入自身数组pendingTransactions 中。...而要通过改变源账户和目的账户的value字段值的方式来完成事务并创建一个新的事务文档来换掉已有的事务文档。
"的表单 用户单击提交按钮或图像按钮时，就会提交表单。...（textarea 是一个例外，在文本区中回车会换行。）如果表单里没有提交按钮，按回车键不会提交表单。 以这种方式提交表单时，浏览器会在将请求发送给服务器之前触发 submit 事件。...其中， focus()方法用于将浏览器的焦点设置到表单字段，即激活表单字段，使其可以响应键盘事件。例如，接收到焦点的文本框会显示插入符号，随时可以接收输入。...这样一来，用户在填写这个简单的表单时，就不必再通过按制表键切换表单字段和提交表单了。 HTML5约束验证API 为了在将表单提交到服务器之前验证数据，HTML5 新增了一些功能。...能够以异步方式从服务器取得更多信息，意味着用户单击后，可以不必刷新页面也能取得新数据。也就是说，可以使用 XHR 对象取得新数据，然后再通过 DOM 将新数据插入到页面中。
对页面中所有已存在的HTML事件作出反应 可以在DOM中创建新的HTML事件 DOM的特性： 整个HTML页面文档就是一个文档节点（只存在一个 根元素） 每一个HTML内的标签是一个元素节点...表示起始标签和结束标签之间的纯文本内容 DOM对象节点操作: 创建节点 createElement():创建元素节点 返回新节点的对象引用，参数是创建的元素节点的标签名 var newElement...setAttributeNode() 添加新属性节点到方法所属节点的属性集合中，参数为新添加的子节点对象； newElement.setAttributeNode(newAttr);//newElement...添加newAttr属性节点 insertBefore() insertBefore(node1,node2); 将node1新节点插入到相对节点node2的前面作为方法所属节点的子节点 删除节点 removeChild...鼠标移动时 鼠标 onmouseup 鼠标抬起时 鼠标 onmouseout 鼠标移出时 鼠标 onmouseover 鼠标移入时 鼠标 onload 载入时 系统 onsubmit 表单提交时 键盘、
getEllementsByName 返回带有指定名称的对象的集合 getElementsByTagName() 返回带有指定标签名的对象的集合 write() 向文档写文本、HTML表达式或JavaScipt...(tagName) 创建一个标签名为tagName的新元素节点 A.appendChild (B) 把B节点追加到A节点的末尾 insertBefore(A,B) 把A节点插入到B节点之间...对象 是包含相关属性和方法的集合 什么是面向对象 面象对象仅仅是一个概念或者编程思想 通过一种叫做原型的方式来实现面向对象的编程 创建对象 自定义对象 内置对象 自定义对象是基于object对象的方式创建对象...调用构造函数的四个步骤 *创建一个新对象 *将构造函数的作用域给新对象(this就指向了这个新对象) *执行构造函数中的代码 *返回新对象 constructor属性标识它的对象属性 instanceof...相关的原型对象层层递进，就构成了实例与原型的链条，就是原型链 搜索当前的实例 搜索第一个的prototype 对象继承 创建子类对象时，不能向父类型的构造函数中传递参数 借用构造函数 apply([
原型链的核心就是依赖对象的_proto_的指向，当自身不存在的属性时，就一层层的扒出创建对象的构造函数，直至到Object时，就没有_proto_指向了。...如果让原型对象等于另一个原型对象的实例，此时的原型对象将包含一个指向另一个原型的指针(__proto__)，另一个原型也包含着一个指向另一个构造函数的指针(constructor)。...实际上，使用该方法是颠倒了常规的$(A).prepend(B)的操作，即不是将B前置到A中，而是将A前置到B中 after() 在每个匹配的元素之后插入内容 insertAfter() 将所有匹配的元素插入到指定元素的后面...实际上，使用该方法是颠倒了常规的$(A).after(B)的操作，即不是讲B插入到A后面，而是将A插入到B后面 before() 在每个匹配的元素之前插入内容 insertBefore() 将所有匹配的元素插入到指定的元素的前面...实际上，使用该方法是颠倒了常规的$(A).before(B)的操作，即不是将B插入到A前面，而是将A插入到B前面 Js的函数节流和函数防抖的区别 函数节流是指一定时间内js方法只执行一次。
reset() 将所有表单重置 submit() 提交表单 获取表单对象的方法有很多种，如下： document.getElementById('myForm');//使用ID获取的DOM访问虽然比较通用，但不是很便利。表单处理中，我们建议使用HTML DOM，它有自己的elements属性，该属性是表单中所有元素的集合。...方法 说明 focus() 将焦点定位到表单字段里 blur() 从元素中将焦点移走 fm.elements[0].focus();//将焦点移入 fm.elements[0].blur();//将焦点移出...alert(textField.defaultValue);//得到最初的value值 选择文本 使用select()方法，可以将文本框里的文本选中，并且将焦点设置到文本框中。...IE不支持，而提供了另一个方案：selection对象，属于document。这个对象保存着用户在整个文档范围内选择的文本信息。导致我们需要做浏览器兼容。
对于对象类型来说，却只创建了引用或对象的另一个名称。通过操纵新的变量，我们就可以操纵原来对象的内容，因为新的变量仅是现有对象的另一个名称。...需要在脚本中插入代码作为字符串时，Nowdoc仅仅是作为辅助。...2.跨站脚本攻击（XSS）：将JS脚本注入到网页中，利用cookie等向目标服务器发送数据。...预防技巧是生成传话ID时，产生并存储一个秘密的会话标记，在提交时进行匹配并确保一定的时间内有效。 C.会话 1.使用XSS将SID写一篇用户的cookie中。...） 轮询版本管理系统以求得版本号 从数据库或文件中读取有效的发行版本 在现行的版本与以前的发行版本之间，创建一个补丁程序 将构建标记为一个发行版本 在发行版本数据库内插入一个新记录，或更新有效的发行版本文件
我们找到添加表单选项中的单行文本，给该按钮设置一个点击事件，需要操作的对象为动态添加的内容次序数组，为其插入一个值，该值就是单行文本的标记 1，插入位置为当前元素个数的加一位置，此时就可以按照顺序往下添加数组内容...此时在右侧显示中创建一个保存按钮并且设置初始状态为隐藏： 随后为编辑按钮创建一个事件点击时触发，将输入框、保存按钮显示，单行文本标题与当前编辑按钮进行隐藏： 接着我们创建一个一维数组用于标题显示，命名为动态插入的组件标题...我们将标题的单行文本内容绑定为动态插入的组件标题对应的序号位置内容： 接下来我们为了使动态插入的组件标题数组的排列与次序数组保持一致，我们在添加的时候也需要为其添加一个标题插入到动态插入的组件标题之中...，用于接收服务传递过来的数据： 接着给页面添加一个事件，该事件显示时触发，触发后默认显示第一页，并且将结果赋予给分页数据变量： 接着我们为需要显示的文本绑定数据，此处以创建时间为例，将数据绑定为循环创建时的创建时间列内容...，此时我们与动态表单生成时操作一致，当元素内容改变时进行数组内的数据更改，由于从动态添加表单页复制到当前界面，此功能已存在并不需要改动，我们直接为提交按钮添加事件即可。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
