你好，今天聊一个简单的技术问题，使用 querySelector 方法查询网页上的元素时，如何使用正则进行模糊匹配查询？...其中，13jj5 并不是固定的，它是一串随机字符，是前端框架在编译时为了避免组件样式混淆而故意添加的。...如果我们在智能化产品中直接这样查询目标元素： document.querySelector('h2.UserInfoBox_textEllipsis_13jj5') 下次产品重发后，代码便不再有效了。...这种情况便适合采用属性值正则匹配选择器： document.querySelector('h2[class^="UserInfoBox_textEllipsis"]'); 最后，回顾一下，使用属性值正则匹配选择器...，关键记忆点有两个： 1）使用了中括号，直接用在元素选择器后面。
document.querySelectorAll 方法返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList 。...请注意，返回的节点不再是DOM的一部分，而是仍存在于内存中。 如果处理不当，可能会导致内存泄漏。...，deep(可选)表示是否采用深度克隆,如果为true,则该节点的所有后代节点也都会被克隆,如果为false,则只克隆该节点本身. let list = document.querySelector('...它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤，使其比直接innerHTML操作更快。...beforeend：插入元素内部的最后一个子节点之后。 afterend：元素自身的后面。 text是要被解析为HTML或XML,并插入到DOM树中的字符串。 <!
js自带函数和jquery中的append方法相似 insertAdjacentHTML是一个非常酷的DOM方法，我们可以调用任何DOM元素来向页面添加新内容。...这是插入新内容的一种很方便且灵活的方法。 对元素调用该方法并接受两个参数：位置和包含HTML的字符串。...const item = ` test ` document.querySelector('#container').insertAdjacentHTML('afterend...我们有四种选项可以设置它的位置： beforebegin 在元素之前 afterbegin 在元素的第一个子元素之后 beforeend 在元素的最后一个子元素之后 afterend 在元素之后 下面的示例代码展示了...，向列表中添加了一项： document.querySelector('ul').insertAdjacentHTML('beforeend', 'item')
如果属性已经存在，则更 新该值；否则，使用指定的名称和值添加一个新的属性； JS示例代码 元素（标签） appendChild(node) 将一个节点插入到指定父节点的子节点列表的末尾 insertAdjacentHTML(position...text)示例 position位置参数 说明 'beforebegin’ 元素自身的前面 'afterbegin‘ 插入元素内部的第一个子节点之前 'beforeend' 插入元素内部的最后一个子节点之后...--html代码--> 元素1 元素2 var div = document.querySelector('div') div.insertAdjacentHTML...('beforebegin','元素自身前面') div.insertAdjacentHTML('afterbegin','元素1前面') div.insertAdjacentHTML
如果属性已经存在，则更新该值；否则，使用指定的名称和值添加一个新的属性 通过属性名更改属性 对元素属性重新赋值可更改对应属性值 DOM添加 名称 描述 createElement(tagName) 创建一个由标签名称...tagName指定的HTML元素 appendChild(node) 将一个节点插入到指定父节点的子节点列表的末尾处 insertAdjacentHTML(position, text) 将指定文本解析为...ul的最后一个元素后插入，参数只有一个lastItem代表元素节点，最后一空应为符合要求的节点添加方法 将内容为第一名的元素插入到ol元素内的第一行，请补全横线处代码 第二名...('________', '第二名') beforebegin # insertAdjacentHTML方法的第一个参数为插入位置，题目要求要插入元素内的第二行，.../h1> load # 由于代码中的js写在了h1元素上方，所以需要等待页面加载完成才能获取到此元素，此处需使用页面加载完成时触发的事件 浏览器窗口宽度为1000px时，p元素的字体大小为______
使用 normalize() 和 wholeText 来操作文本节点 HTML 文档中的文本节点可能很不容易操作，特别是动态插入或者创造节点时。...将合并该元素内的任何相邻文本节点。...insertAdjacentHTML() 的缺陷之一是插入的内容必须是字符串形式。...这三个方法第一个参数都是一样的，取值为： beforebegin: 插入到调用方法的元素之前 afterbegin: 插入元素中，在其第一个子元素之前 beforeend: 插入元素内部，在元素的最后一个子元素之后...afterend: 插入元素之后 事件详细信息 如前所述，事件使用熟悉的 addEventListener() 方法添加到网页上的元素。
插入标记 我们之前用的api大多数都是获取元素内容，HTML5规范中定义了一个向标签元素内添加内容的方法。...innerHTML innerHTML是向元素内插入一个字符串，注释或者文本标记，它会根据现在提供的内容重新渲染到DOM树上，替代之前元素包含的所有节点。...insertAdjacentHTML()和inserAdjacentText() 这俩个方法都接受俩个参数，第一个参数是固定的，必须是以下4中类型 "beforebegin"，插入当前元素前面，作为前一个同胞节点...； "afterbegin"，插入当前元素内部，作为新的子节点或放在第一个子节点前面； "beforeend"，插入当前元素内部，作为新的子节点或放在最后一个子节点后面； "afterend"，插入当前元素后面...// 作为前一个同胞节点插入 name.insertAdjacentHTML("beforebegin", "jackson!!!
如果属性已经存在，则更新该值；否则，使用指定的名称和值添加一个新的属性 通过属性名更改属性 对元素属性重新赋值可更改对应属性值 2....insertAdjacentHTML(position, text) 将指定文本解析为HTML字符串，插入到指定位置（IE不友好） position（内容相对当前元素位置）： ‘beforebegin...('________', '第一名') 答案：afterbegin insertAdjacentHTML方法的第一个参数为插入位置，题目要求要插入元素内第一行，.../script> 答案：innerHTML 此处需要插入一个p元素，插入的值为字符串，所以需要使用可以解析html字符串的DOM属性，返回元素中的html内容。...= "欢迎光临" }) 等待中 答案：load 由于代码中的js写在了h1元素上方，所以需要等待页面加载完成才能获取到此元素，此处需使用页面加载完成时触发的事件
操作 className addClass 给元素增加 class，使用 classList 属性，该属性返回的是 DOMTokenList 对象，对象有一个 add 方法可添加 class，如果没有这个属性那么使用...insertBefore 在元素前面插入新的元素，直接使用 insertBefore 即可，注意要在 parentNode 上调用，refEl 代表参照节点 function insertBefore(...el, child) { if (typeof child === 'string') { return el.querySelector(child) !...== el) } insertAdjacentHTML 在元素内部或外部追加 html 代码；insertAdjacentHTML 接收两个参数，一个是相对位置，一个是 html 字符串。...-- afterend --> function insertAdjacentHTML(el, pos, html) { el.insertAdjacentHTML(pos, html) } 节点过滤和遍历
document.querySelector(v.el).insertAdjacentHTML("beforeEnd", render(globalObj....document.querySelector(v.el).insertAdjacentHTML("beforeEnd", render(globalObj....在最后一行中通过判断v.el是否是真值，如果是就执行这行代码： document.querySelector(v.el).insertAdjacentHTML("beforeEnd", render(globalObj...insertAdjacentHTML() 方法将指定的文本解析为 Element 元素，并将结果节点插入到DOM树中的指定位置。它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。...insertAdjacentHTML()方法传入的第二个参数是是要被解析为HTML或XML元素，并插入到DOM树中的DOMString，render(globalObj.
抽象对象: Tab对象 该对象具有切换功能 该对象具有添加功能 该对象具有删除功能 该对象具有修改功能 2、案例准备 获取到标题元素 获取到内容元素 获取到删除的小按钮...为获取到的标题绑定点击事件,展示对应的内容区域,存储对应的索引 this.lis[i].index = i; this.lis[i].onclick = this.toggleTab; 使用排他...现在高级做法:利用insertAdjacentHTML()可以直接把字符串格式元素添加到父元素中 appendChild不支持追加字符串的子元素, insertAdjacentHTML支持追加字符串的元素... that.ul.insertAdjacentHTML('beforeend', li); that.fsection.insertAdjacentHTML('beforeend', section...that.sections[index].remove(); that.init(); // 当我们删除的不是选中状态的li 的时候,原来的选中状态li保持不变 if (document.querySelector
const getStyle = (el, ruleName) => getComputedStyle(el)[ruleName]; getStyle(document.querySelector('...const hasClass = (el, className) => el.classList.contains(className); hasClass(document.querySelector...//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
下面来对这个方法简单解释一下： 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的顺序插入，有一种栈结构先进后出的感觉...beforeend：插入元素element里面的最后一个子节点之后（这个比较容易理解，就是插入到最后一个节点后，例如我插入5个节点，顺序是1、2、3、4、5，那就正常的1、2、3、4、5就好啦，但是注意是在已有节点的后面哦...afterend：元素element自己的后面。 text参数 参数便是你想要插入的HTML元素，可以是字符串形式，也可以用ES6新增的模板字符串的形式。
that.ul.insertAdjacentHTML('beforeend', li); that.fsection.insertAdjacentHTML('beforeend', section...this.main = document.querySelector(id); this.addBtn = this.main.querySelector('.tabadd...thisReplace.lis[index].remove(); thisReplace.sections[index].remove(); // 删除元素后，让删除最后一个元素时然之前的一个元素处于选中状态...if (document.querySelector(".liactive")) { return } // 若删除的不是最后一个元素，则维持选中不变....this.children[0]; input.select(); //让文本框默认全选 input.onblur = function() { // 当文本框失去焦点时将文本框的值传递给父元素的
文本节点:包含文本、属性节点:包含属性、元素节点和文档节点:null hasChildNodes 包含一个或多个节点时返回true contains 如果是后代节点返回true isEqualNode...:name属性名 getElementsByClassName() 一个参数:包含一个或多个类名的字符串 querySelector() 接收CSS选择符，返回匹配到的第一个元素，没有则null querySelectorAll...removeChild() 移除节点 cloneNode() 克隆，一个布尔值参数，true为深拷贝，false为浅拷贝 importNode() 从文档中复制一个节点，两个参数：要复制的节点和布尔值(是否复制子节点) insertAdjacentHTML...() 插入文本，两个参数：插入的位置和要插入文本"beforebegin",在该元素前插入"afterbegin",在该元素第一个子元素前插入"beforeend",在该元素最后一个子元素后面插入"afterend...",在该元素后插入 "beforebegin",在该元素前插入 "afterbegin",在该元素第一个子元素前插入 "beforeend",在该元素最后一个子元素后面插入 "afterend",在该元素后插入
为获取到的标题绑定点击事件,展示对应的内容区域,存储对应的索引 this.lis[i].index = i; this.lis[i].onclick = this.toggleTab; 使用排他...that.ul.insertAdjacentHTML('beforeend', li); that.fsection.insertAdjacentHTML('beforeend', section...that.sections[index].remove(); that.init(); // 当我们删除的不是选中状态的li 的时候,原来的选中状态li保持不变 if (document.querySelector.... 4.以前的做法:动态创建元素createElement , 但是元素里面内容较多,需要innerHTML赋值在appendChild 追加到父元素里面. 5.现在高级做法:利用insertAdjacentHTMLO...可以直接把字符串格式元素添加到父元素中 6.appendChild不支持追加字符串的子 愫, insertAdjacentHTML支持追加字符串的元素
双击tab项文字或者内容项文字可以修改里面的文字内容 1.2案例准备 获取到标题元素 获取到内容元素 获取到删除的小按钮 x号 新建js文件,定义类,添加需要的属性方法(切换,删除...为获取到的标题绑定点击事件,展示对应的内容区域,存储对应的索引 this.lis[i].index = i; this.lis[i].onclick = this.toggleTab; 使用排他...>'; var section = '测试 ' + random + ''; // (2) 把这两个元素追加到对应的父元素里面...that.ul.insertAdjacentHTML('beforeend', li); that.fsection.insertAdjacentHTML('beforeend', section...that.sections[index].remove(); that.init(); // 当我们删除的不是选中状态的li 的时候,原来的选中状态li保持不变 if (document.querySelector
作为attr节点的属性 一种使用Element的属性的方法。Node类型定义了attributes属性。针对非Element对象任何节点。该属性为null。...以及 nodeList[0].textContent 该两个方法相同 使用innerHTML可以获取元素的内容 同样也可以使用这个方法进行更改 nodeList[0].innerHTML = "hello...有两个定义好的api分别是element.insertAdjacentHTML 以及 Element.insertAdjacentText() 这两个元素内容 element.insertAdjacentHTML...此节点插入的html会被html解析器进行解析，如果用户插入请务必进行转义，防止小白攻击法 Element.insertAdjacentText() 这个仅仅是插入文本，建议一般使用这个，将不会产生dom...id为myimage的元素后边 myimage.appendChild(newnode) 插入节点 一旦有了一个新节点可以使用Node方法的appendChild或者insertBefore()将其完成插入
大家好，我是前端西瓜哥，今天来和大家说说 canvas 怎么做图形拾取。 图形拾取，指的是用户通过鼠标或手指在图形界面上能选中图形的能力。...下面我们看看元素拾取的几种方案。 方案 1：isPointInPath isPointInPath 是 canvas 原生提供的一个检测某个点是否在指定路径内的方法。...const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); ctx.beginPath(...Konva 库使用了该方案。...结尾 总结一下，canvas 的图形拾取有三种方案： isPointInPath：canvas 原生提供的 API，能够知道点是否在路径内； 缓存 Canvas：额外使用一个 canvas，每次绘制图形都在这个
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
云直播
腾讯会议
