首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么jQuery.Find()不返回从HTML5模板克隆的文档片段中的DOM元素集合?

jQuery.Find()方法是用于在DOM元素集合中查找匹配选择器的子元素。然而,它不会返回从HTML5模板克隆的文档片段中的DOM元素集合的原因是,HTML5模板克隆的文档片段在内存中是独立的,与实际文档没有直接的关联。

HTML5模板是一种在HTML中定义的标记,用于包含可复用的HTML内容。当使用jQuery的clone()方法克隆一个HTML5模板时,它会创建一个新的文档片段,其中包含模板中的所有DOM元素。然而,这个克隆的文档片段并没有被插入到实际的文档中,它只存在于内存中。

因此,当我们使用jQuery.Find()方法在克隆的文档片段中查找DOM元素时,它无法找到任何匹配的元素,因为这些元素并没有被插入到实际的文档中。换句话说,克隆的文档片段是一个孤立的DOM结构,与实际文档没有直接的联系。

如果我们想要在克隆的文档片段中查找DOM元素,可以使用jQuery的filter()方法或find()方法的变体,如filter()或children()。这些方法可以在克隆的文档片段中进行筛选和查找,而不依赖于实际文档。

总结起来,jQuery.Find()不返回从HTML5模板克隆的文档片段中的DOM元素集合,是因为克隆的文档片段是独立的,与实际文档没有直接的关联。如果需要在克隆的文档片段中查找DOM元素,可以使用jQuery的filter()方法或find()方法的变体。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Web Components 系列(五)—— 关于 Templates

[Templates.001] 前言 在之前介绍创建 Custom Elements 代码,有一个地方是比较繁琐:Shadow DOM 每个子元素都是通过 document.createElement...将模板视为一个可存储在文档以便后续使用内容片段。虽然解析器在加载页面时确实会处理元素内容,但这样做只是为了确保这些内容有效;但元素内容不会被渲染。...Templates 属性 Templates 除了全局属性(也就是所有 HTML 元素所共有的属性)外,只有一个私有属性 :content,这个属性是只读返回 Templates 内部文档片段对象及其...("template"); // 获取 template 元素包含文档片段 const content = templateEle.content; // content 可以当做正常 document...为了避免修改内容模板内部 DOM 结构,我们可以先克隆模板内部元素节点,再将克隆节点追到到当前文档: // 获取 template 元素 const templateEle = document.querySelector

45620

JS和JQuery获取当前元素兄弟及父级等元素方法

,不限于父元素 jQuery.children(expr),返回所有子节点,这个方法只会返回直接孩子节点,不会返回所有的子孙节点 jQuery.contents(),返回下面的所有内容,包括节点和文本...(),返回兄弟姐妹节点,不分前后 jQuery.find(expr),跟 jQuery.filter(expr) 完全不一样: jQuery.filter(),是初始 jQuery 对象集合筛选出一部分...,而 jQuery.find(),返回结果,不会有初始集合内容,比如 $("p").find("span") ,是 元素开始找 ,等同于 $("p span") JS获取:...;   //获得s最后一个子节点 JS获取节点父级,子级元素:JS方法会比JQUERY麻烦很多,主要则是因为FF、谷歌浏览器会把你换行也当作DOM元素:空text元素,目前IE也是这样       原生JS获取ID为test元素元素

12.4K10

JavaScript 高级程序设计(第 4 版)- DOM

在HTML文档,标签名是区分大小写,而XML文档(包括XHTML)是区分大小写。...DOM文档片段定义为“轻量级”文档,能够包含和操作节点,却没有完整文档那样额外消耗。不能直接把文档片段添加到文档。相反,文档片段作用是充当其他要被添加到文档节点仓库。...使用 document.createDocumentFragment()方法创建文档片段 文档片段 Node 类型继承了所有文档类型具备可以执行 DOM 操作方法 如果文档一个节点被添加到一个文档片段...,则该节点会文档移除,不会再被浏览器渲染 可以通过 appendChild()或 insertBefore()方法将文档片段内容添加到文档 在把文档片段作为参数传给这些方法时,文档片段所有子节点会被添加到文档相应位置...deleteContents():文档删除范围包含节点 extractContents(): 文档移除范围选区,返回范围对应文档片段

1.1K30

【收藏】JavaScript DOM操作简易速查手册

1 概述 1.1 前言 本文中简要罗列了JavaScript操作Dom基本方法,其中包括元素查询、文档结构遍历、属性及内容操作、创建节点、插入节点及删除节点等内容。...img.removeAttribute("width"); 查看示例程序 4.3 数据集属性-dataset 在HTML5文档,任意以 data- 为前缀小写属性名字都是合法。...var txt = document.createTextNode("三十课"); 查看示例程序 6.3 创建文档片段-createDocumentFragment 使用文档片段通常会带来更好性能。...因为文档片段存在于内存,并不在DOM,所以将子元素插入到文档片段时不会引起页面回流(对元素位置和几何上计算)。...var comment = document.createComment("Created by 毛瑞"); 查看示例程序 6.5 节点克隆-cloneNode 通过复制已存在节点来创建新文档节点。

1.1K20

Web Components技术解析到生态应用个人心得指北

disconnectedCallback:当 custom element文档DOM删除时,被调用。adoptedCallback:当 custom element被移动到新文档时,被调用。...IFrame是一个独立html页面,shadow DOM是当前html页面的一个代码片段,不需要创建额外渲染环境——不需要创建一个完整文档环境,而是基于现有的上下文中创建封闭DOM结构。...HTML templates(HTML 模板)这个用过vue理解应该不难:包含一个 HTML 片段,不会在文档初始化时渲染。插槽,类似占位符,可以填充自己内容。...为什么推荐使用Web Components React 和 Vue 在组件化开发方面有自己实现,并没有直接采用 Web Components 作为内部实现——不过,它们两者都提供了与 Web Components...Google 2013 年开始一直在持续推进基于 Web Components 封装类库,同时还开放了基于 Polymer 开发组件集合 PolymerElements · GitHub 和开发周边

36310

WebAPIs学习笔记

元素 CSS选择器 匹配到第一个元素返回一个HTMLElement对象 //语法 document.querySelector('CSS选择器') 匹配多个选择器,返回NodeList对象集合,得到是一个伪数组...,括号内传入布尔值 若为true,则代表克隆时会包含后代节点一起克隆 若为false,则代表克隆包含后代节点 默认为false 语法:元素.cloneNode(布尔值) 结点删除 删除节点和隐藏节点...(添加或者删除可见DOM元素) 重绘 由于节点(元素)样式改变并不影响它在文档位置和文档布局时(比如:color、background-color、 outline等), 称为重绘 注:重绘不一定引起回流...简单理解:当一个元素触发事件后,会依次向上调用所有父级元素同名事件 事件冒泡是默认存在 事件捕获 DOM元素开始去执行对应事件 (从外到里) 说明: addEventListener第三个参数传入...: /^[a-z0-9_-]{3,16}$/ 过滤掉页面内容一些敏感词(替换),或字符串获取我们想要特定部分(提取)等 。

1K30

前端学习资料整理

浏览器先产生一个元素集合,这个集合往往由最后一个部分索引产生(如果没有索引就是所有元素集合)。...然后向上匹配,如果不符合上一个部分,就把元素集合删除,直到真个选择器都匹配完,还在集合元素就匹配这个选择器了  大体就是这样,不过浏览器还会有一些奇怪优化。   ...* 为什么后往前匹配因为效率和文档解析方向。效率不必说,找元素父亲和之前兄弟比遍历所有儿子快而且方便。...应用在即使 html 没有载入完成,浏览器也能根据已经载入这一部分信息完全确定出现过元素属性。   为什么是用集合主要也还是效率。...jQuery.fninit方法返回this指的是什么对象?为什么返回this? jquery如何将数组转化为json字符串,然后再转化回来?

3.4K20

HTML语义化:HTML5新标签——template

模板包含标签会造成标签结束符混乱问题,因此通过该方式存放模板时,不能包含结束标签;   2. xmp元素必须作为body子孙元素。  ...而template返回是0。 2. 伪文档片段入口——content属性      通过innerHTML或innerText属性,template内部模板文本将被视为普通文本来使用。...但template元素为我们提供了另一种使用方式,那就是“文档片段”。  ...“文档片段[[Class]]为[object DocumentFragment],“文档片段”具有文档片段所有功能API,不同是设置img元素src属性不会发出资源请求、执行Script和CSS...因此我们需要复制模板元素,然后再将元素副本添加到当前文档。实现手段有很多种,大家可以自行了解一下。

1.7K90

高性能JavaScript

5、DOM操作量化问题: // 在循坏更新页面,问题所在:每次循环都对DOM元素访问了两次 // 一次是读取document.getElementById('here').innerHTML内容...// 因此建议是:在IE7以下,使用join,在新浏览器下,除了变量缓存外,不需要做别的优化 6、克隆已有的DOM元素,即element.cloneNode(),比起新建节点来说,即element.createElement...7、遍历数组明显快于同样大小和内容HTML集合 8、 for循环时,HTML某元素集合长度建议直接作为循环终止条件,最好将集合长度赋给一个变量,然后使用变量作为循环终止条件; 原因:当每次迭代过程访问集合...9、需要考虑实际情况优化,根据7,可以将集合元素通过for循坏赋值到数组,访问数组数组快于集合。但是要注意对于复制开销是否值得。...文档摘除该元素,摘除该元素方法有: a、对其应用多重改变 b、将元素带回文档 c、使其隐藏,进行修改后在显示 d、使用文档片段创建子树,在将他拷贝进文档 var doc = document;

68510

JavaScript(十一)

HTML5 新增了一种操作类名方式,可以让操作更简单也更安全,那就是为所有元素添加 classList 属性。这个 classList 属性是新集合类型 DOMTokenList 实例。...与其他 DOM 集合类似,DOMTokenList 有一个表示自己包含多少元素 length 属性,而要取得每个元素可以使用 item() 方法,也可以使用方括号语法。...,否则返回 false remove(value): 列表删除给定字符串 toggle(value): 如果列表已经存在给定值,删除它,如果列表没有给定值,添加它 //删除"disabled...焦点管理 HTML5 也添加了辅助管理 DOM 焦点功能。首先就是 document.activeElement 属性,这个属性始终会引用 DOM 当前获得了焦点元素。...作为对 document.body 引用文档 body 元素补充,HTML5 新增了 document.head 属性,引用文档 head 元素

81310

JS获取节点兄弟,父级,子级元素方法

()或者$("span").parent(".class") jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素 jQuery.children...(expr).返回所有子节点,这个方法只会返回直接孩子节点,不会返回所有的子孙节点 jQuery.contents(),返回下面的所有内容,包括节点和文本。...(),返回所有之前兄弟节点 jQuery.next(),返回下一个兄弟节点,不是所有的兄弟节点 jQuery.nextAll(),返回所有之后兄弟节点 jQuery.siblings(),返回兄弟姐妹节点...,不分前后 jQuery.find(expr),跟jQuery.filter(expr)完全不一样。...jQuery.filter()是初始jQuery对象集合筛选出一部分,而jQuery.find()返回结果,不会有初始集合内容,比如$("p"),find("span"),是元素开始找

9.2K10

jQuery学习笔记之DOM操作、事件绑定(2)

(content) :把所有匹配元素插入到另一个、指定元素元素集合前面 删除节点 remove(): DOM 删除所有匹配元素, 传入参数用于根据 jQuery 表达式来筛选元素...empty(): 清空节点 – 清空元素所有后代节点(包含属性节点)。 复制节点 clone(): 克隆匹配 DOM 元素, 返回值为克隆副本....追加样式:addClass() 移除样式:removeClass() — 匹配元素删除全部或指定 class 切换样式:toggleClass() — 控制样式上重复切换...判断是否含有某个样式:hasClass() — 判断元素是否含有某个 class, 如果有, 则返回 true; 否则返回 false。...在jQuery还有很多遍历节点方法,具体参看API帮助文档

1.5K10

学习zepto.js(对象方法)

学习zepto.js(对象方法)[5] clone: 该方法接收任何参数,会返回对象所有元素集合,但不会对象绑定事件. var $temp =$("div").clone...方法实现就是循环调用方法对象.然后将所有的dom元素克隆返回 ? 而且使用深度克隆,就是说,会将节点下方子节点统统克隆过来....(通俗来说就是如果能被匹配元素不属于context,那么将会直接返回false) selector参数也可以传入一个zepto对象.或一个dom集合....而返回元素则会属于传入selector对象一个. context有效值为一个dom元素. 注意:返回值是与调用对象第一个元素有关. ?...满足匹配条件或者循环值文档对象).否则直接赋值false,然后循环终止,返回false; 最终返回一个zepto对象,空或者包含一个元素zepto对象; contents: contents用来获取

2.7K110

在对象原型上添加方法?

HTML5学堂:利利前段时间写了几个数组、字符串方法,其中有一个是克隆(复制)一个数组。于是,最近一直在琢磨如何让这个复制变得更简单,可不可以把这个自定义方法挂载在原型上呢?...3 “复制”各类变量功能封装 “复制”/“克隆”数组功能需求 最初代码 刚开始时候拿到这个需求,第一反应是用for循环,于是乎自己写出了如下代码: var arr = ["HTML5学堂",...concat方法功能是基于当前数组所有项创建一个新数组,返回新数组。该方法会先创建一个当前数组副本,然后将接收到参数,添加到这个副本末尾,最后返回新构建数组。...在对象原型上添加方法是否合理? 仔细思考之后,并查阅了一些相关资料,利利最终还是放弃了将方法添加到对象原型上,为什么呢?...但是DOM 后来原生方法里对这个方法返回是一个Nodelist实例,结果就是之前用了Prototype库代码,运行在新浏览器时候,用DOM原生方法,返回对象是无法继承数组任何方法,所以就会报错

97350
领券