插入标记 我们之前用的api大多数都是获取元素内容，HTML5规范中定义了一个向标签元素内添加内容的方法。...innerHTML innerHTML是向元素内插入一个字符串，注释或者文本标记，它会根据现在提供的内容重新渲染到DOM树上，替代之前元素包含的所有节点。...insertAdjacentHTML()和inserAdjacentText() 这俩个方法都接受俩个参数，第一个参数是固定的，必须是以下4中类型 "beforebegin"，插入当前元素前面，作为前一个同胞节点...; 我们上面代码示例就是作为前一个同胞节点插入。大家也可以看到页面确实显示了我的名字。...还有一个就是不要用循环来替换或者添加元素，这样每次是通过先获取再添加，也会占据很大的性能。
操作 className addClass 给元素增加 class，使用 classList 属性，该属性返回的是 DOMTokenList 对象，对象有一个 add 方法可添加 class，如果没有这个属性那么使用...el.classList.add(className) : el.className += ` ${className}` } hasClass 检查是否存在某个 class function hasClass...el.classList.contains(className) : el.className.split(' ').includes(className) } removeClass 删除元素的某个...insertBefore 在元素前面插入新的元素，直接使用 insertBefore 即可，注意要在 parentNode 上调用，refEl 代表参照节点 function insertBefore(...== el) } insertAdjacentHTML 在元素内部或外部追加 html 代码；insertAdjacentHTML 接收两个参数，一个是相对位置，一个是 html 字符串。
DOM规定文档中的每个成分都是一个节点（Node）,可以说HTML文档是由节点构成的集合，常见DOM节点有： 文档节点（Document）：代表整个文档 元素节点（Element）：文档中的一个标记 文本节点...（Text）：标记中的文本 属性节点（Attr）：代表一个属性，元素才有属性 DOM节点类型 NodeType属性来表明节点类型，下面列举12中节点类型 节点类型 描述 1 Element 代表元素...() 接收CSS选择符，返回一个数组，没有则返回[] 元素对象ELEMENT操作 所有DOM对象都可以被认为是一个节点,除了CURD DOM树(appendChild/removeChild/replaceChild...) insertAdjacentHTML() 插入文本，两个参数：插入的位置和要插入文本"beforebegin",在该元素前插入"afterbegin",在该元素第一个子元素前插入"beforeend...",在该元素最后一个子元素后面插入"afterend",在该元素后插入 "beforebegin",在该元素前插入 "afterbegin",在该元素第一个子元素前插入 "beforeend",在该元素最后一个子元素后面插入
function (obj) { for (var key in obj) { this[key] = obj[key]; } }; // 插入元素方法...因此便遇到了另一个问题，dom元素的操作。 由于gitee的图片是带有防盗链的，因此需要在头部插入一个标签meta标签，表示no-referrer才可以正常使用其防盗链图片。.../css/Speak.css")["default"][0][1]; document.head.appendChild(element); }, 按钮的插入 起初并不打算插入翻页按钮，因为嵌入到博客后...('afterend',_this.pageLabel) }关于insertAdjacentHTML方法可参考：insertAdjacentHTML 第三个问题：代码高亮插件highlight过大 highlight.min.js...如何使用 使用很简单，只需要一个class为container的容器和一个实例化的Speak对象即可。 由于基于某个主题开发，部分样式可能存在细微差别。
第三个参数是一个名为 useCapture 的布尔值，用于指示是否要使用事件冒泡或捕获【https://www.sitepoint.com/event-bubbling-javascript/】。...这肯定会在很多情况下派上用场，并且无需用 removeEventListener() 或使用其他一些复杂的技术来强制单个事件触发器。...insertAdjacentHTML() 的一个缺点是插入的内容必须是字符串的形式。...注意：任何特殊字符（如HTML标记）都将会作为 HTML 实体插入，请区分此方法与 insertAdjacentHTML() 行为的区别。...：在调用方法的元素之前插入 afterbegin：在第一个子节点之前插入元素内部 beforeend：在最后一个子节点之后插入元素内部 afterend：插入到元素后面 event.detail 属性
document.querySelectorAll 方法返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList 。...通过调用Element.removeAttribute方法，我们可以从元素中删除具有给定名称的属性。...element.insertAdjacentHTML(position, text) 将指定的文本解析为HTML或XML，并将结果节点插入到DOM树中的指定位置。...它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤，使其比直接innerHTML操作更快。...beforeend：插入元素内部的最后一个子节点之后。 afterend：元素自身的后面。 text是要被解析为HTML或XML,并插入到DOM树中的字符串。 <!
在ES7里头 async 的本质是 promise 的语法糖(包装得甜甜的比较好吃下肚)，只要 function标记为 async，就表示里头可以编写 await 的同步语法，而 await 顾名思义就是....then 语法来做连接，基本的代码长相就像下面这样： ?...insertAdjacentHTML() 将指定的文本解析为HTML或XML，并将结果节点插入到DOM树中的指定位置。它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。...举例来说，先前往类似阿里云的获取天气 API 的平台可以取得许多气象资料，搜索某个城市的现在天气报告，通过 fetch的json() 方法处理返回数据，结果显示出「北京市的即时气温」。...05 搭配循环 如果要通过 JavaScript 实现「文字慢慢变大」的效果，除了通过CSS的 transition 这个属性之外，通常就是直接使用 setInterval 来完成，就像下面的代码这样：
以及 nodeList[0].textContent 该两个方法相同 使用innerHTML可以获取元素的内容 同样也可以使用这个方法进行更改 nodeList[0].innerHTML = "hello...有两个定义好的api分别是element.insertAdjacentHTML 以及 Element.insertAdjacentText() 这两个元素内容 element.insertAdjacentHTML...因为它不会重新解析正在使用的元素，因此它不会破坏元素内的现有元素。将会避免额外的序列化步骤，比直接innerHTML将会快很多。...此节点插入的html会被html解析器进行解析，如果用户插入请务必进行转义，防止小白攻击法 Element.insertAdjacentText() 这个仅仅是插入文本，建议一般使用这个，将不会产生dom...id为myimage的元素后边 myimage.appendChild(newnode) 插入节点 一旦有了一个新节点可以使用Node方法的appendChild或者insertBefore()将其完成插入
可以使用索引获取节点集合中的某个元素节点（后续的节点集合也可使用这种方法） document.getElementsByTagName('p')[0] getElementsByClassName(...将一个节点插入到指定父节点的子节点列表的末尾 insertAdjacentHTML(position, text) 将指定文本解析为 HTML 字符串，插入到指定位置 createElement(tagName...(position, text)示例 position位置参数 说明 'beforebegin’ 元素自身的前面 'afterbegin‘ 插入元素内部的第一个子节点之前 'beforeend' 插入元素内部的最后一个子节点之后...('beforebegin','元素自身前面') div.insertAdjacentHTML('afterbegin','元素1前面') div.insertAdjacentHTML...，三种事件中，只有 key 属性返回的结果保持统一，如果不考虑 IE8 以下浏览器兼容性，推荐使用 key 来代替 keyCode 和 charCode 窗口事件 窗口事件在浏览器窗口发生变化时触发，
' : v.constructor.name.toLowerCase(); getType(new Set([1, 2, 3])); // 'set' 47、hasClass 此段代码返回DOM元素是否包含指定的...; // If you are on http://mydomain.com, you are redirected to https://mydomain.com 51、indexOfAll 此代码可以返回数组中某个值对应的所有索引值...const insertAfter = (el, htmlString) => el.insertAdjacentHTML('afterend', htmlString); insertAfter(... after 54、insertBefore 此段代码的功能主要是在给定的DOM节点前插入新的节点内容 const insertBefore = (el, htmlString...,是否可迭代。
当你想根据元素是否匹配特定选择器执行某些操作时， matches() 方法非常有用。它消除了手动遍历DOM或使用复杂的CSS选择器匹配逻辑的需要。 5....我们可以使用 dataset 属性访问和修改这个数据属性。...我们还可以通过给 element.dataset.info 赋新值来修改该值。 6. 平滑动画的方法 在网页上为元素添加动画效果是一个常见的需求，但有时候也是一项具有挑战性的任务。...使用 insertAdjacentElement() 和 insertAdjacentText() 进行灵活的内容插入 虽然许多开发人员熟悉 insertAdjacentHTML() 方法，该方法允许我们将...所有三种方法 - insertAdjacentHTML() ， insertAdjacentElement() 和 insertAdjacentText() - 都接受相同的第一个参数值，用于确定插入内容相对于目标元素的位置
下面来对这个方法简单解释一下： insertAdjacentHTML() 是Element的API中的一个方法，可以将字符串文本转化为你想要的节点（Node），并且插入到你想要插入的位置中。...使用：element.insertAdjacentHTML(position,text) position参数 position就是想要插入的位置，一共有如下的4个固定的值 beforebegin：元素...afterbegin：插入到元素element里面的第一个子节点之前（也就是总是会插入到最前面，例如我插入5个节点，顺序是1、2、3、4、5，那么我就需要以5、4、3、2、1的顺序插入，有一种栈结构先进后出的感觉...afterend：元素element自己的后面。 text参数 参数便是你想要插入的HTML元素，可以是字符串形式，也可以用ES6新增的模板字符串的形式。...可以先判断蛇是否有多节身体，游戏刚开始的情况下，蛇只有一节身体，这时蛇就可以往任意方向掉头移动。
2.4 插入某个元素之后insertAfter(content)方法 参数： content：插入到每个目标后的内容，类型可以：String，DOM，jQuery。...把所有匹配的元素插入到另一个、指定的元素元素集合的后面。实际上，使用这个方法是颠倒了常规的$(A).after(B)的操作，即不是把B插到A后面，而是把A插到B后面。...这种包装对于在文档中插入额外的结构化标记最有用，而且它不会破坏原始文档的语义品质。...当HTML标记代码中的元素包含文本时无法使用这个函数。因此，如果要添加文本应该在包裹完成之后再行添加。...这于 .wrap()是不同的，.wrap()为每一个匹配的元素都包裹一次。这种包装对于在文档中插入额外的结构化标记最有用，而且它不会破坏原始文档的语义品质。
这样做是为了减少全局变量污染，JS可以随意定义保存所有应用资源的全局变量，但全局变量可以削弱程序灵活性，增大了模块之间的耦合性。最小化使用全局变量的一个方法是在你的应用中只创建唯一一个全局变量。...insertAdjacentHTML() 方法将指定的文本解析为 Element 元素，并将结果节点插入到DOM树中的指定位置。它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。...insertAdjacentHTML()方法传入的第二个参数是是要被解析为HTML或XML元素，并插入到DOM树中的DOMString，render(globalObj...._data对象中是否有这个key，如果有我们就使用字符串替换方法replace来把对应的占位符key替换成所对应的值。下面接着进行递归，直到reg.test(template)返回为false。...一旦建立了一个解析对象以后，你就可以使用它的parseFromString方法来解析一个html字符串。
例如 0.1 + 0.2 === 0.300000000000004(大致这个意思，具体多少个零请实际计算) 所以永远不要测试某个特定的浮点数值 3.数值 ① 使用isFinite(num)来确定一个数字是否有穷...只能在onload内获取 // 例子 if(document.readyState == "complete") { // 执行操作 } 6.插入标记 insertAdjacentHTML()...// 1.作为前一个同辈元素被插入 el.insertAdjacentHTML('beforebegin', 'hello world'); // 2.作为第一个子元素被插入 el.insertAdjacentHTML...('afterbegin', 'hello world'); // 3.作为最后一个子元素被插入 el.insertAdjacentHTML('beforeend', 'hello.../ 获取元素集合，只包含元素节点 el.children.length | el.children[i] 8.contains() 判断某个节点是否是另一个节点的后代 // 例子 parentEl.contains
对于早期的w3c浏览器，并没有实现ie的私有方法insertAdjacentHTML（目前已是HTML5标准），可以用appendChild模拟该方法的实现： if(typeof HTMLElement...该方法兼容Chrome，Firefox，IE11，以及Opera15.对于模拟insertAdjacentHTML足够用。当然也可使用兼容性没有问题的DocumentFragment对象。 ...但是出于好奇，我用了jsperf对插入节点的各个方法进行性能分析，发现依旧是appendChild的插入方法效率最高（指的是单位时间内的操作数）。 ...另外，对于innerHTML插入的易用性是不言而喻的，通常我们用一系列拼接的字符串给innerHTML赋值，此时会调用js解析器，将解析的相关节点 作为该元素的子节点。这个属性兼容性没有问题。...对于outerHTML可以用innerHTML做一些兼容性。
获取带有指定标签名的节点集合 querySelector() 获取指定选择器或选择器组匹配的第一个节点 querySelectorAll() 获取指定选择器或选择器组匹配的所有节点集合 除了函数方法，我们还可以使用属性来获取节点信息...span元素皆为div元素的子元素，这里需要使用获取选定元素所有子元素的属性 代码如下，需要判断input输入框是否为密码类型，请补全横线处代码 <input type="password" placeholder...如果修改内容中包含html字符串会被解析成html元素 setAttribute(name,value) 设置指定元素上的某个属性值。...tagName指定的HTML元素 appendChild(node) 将一个节点插入到指定父节点的子节点列表的末尾处 insertAdjacentHTML(position, text) 将指定文本解析为...('________', '第二名') beforebegin # insertAdjacentHTML方法的第一个参数为插入位置，题目要求要插入元素内的第二行，
使用 normalize() 和 wholeText 来操作文本节点 HTML 文档中的文本节点可能很不容易操作，特别是动态插入或者创造节点时。...insertAdjacentHTML() 的缺陷之一是插入的内容必须是字符串形式。...请注意，任何特殊字符（如HTML标记）都将作为HTML实体插入，与 insertadjacenthl() 相比，该方法的行为有所不同。...这三个方法第一个参数都是一样的，取值为： beforebegin: 插入到调用方法的元素之前 afterbegin: 插入元素中，在其第一个子元素之前 beforeend: 插入元素内部，在元素的最后一个子元素之后...afterend: 插入元素之后 事件详细信息 如前所述，事件使用熟悉的 addEventListener() 方法添加到网页上的元素。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
