首页
学习
活动
专区
工具
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

54620
  • 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.7K10

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

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

    1.2K30

    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 和开发周边

    67610

    【收藏】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

    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.fn的init方法返回的this指的是什么对象?为什么要返回this? jquery中如何将数组转化为json字符串,然后再转化回来?

    3.5K20

    高性能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;

    70310

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

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

    1.9K90

    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 元素。

    83410

    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

    在对象的原型上添加方法?

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

    99650

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

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

    1.5K10

    脚本语言知识总结.

    学习DOM 编程,从Document对象开始,document代表当前HTML网页文档对象,是window对象一个属性,可以直接使用 ,所有HTML DOM对象都是Document子对象 2.DOM编程开发...window.document 代表整个HTML文档 ①:通过document获得Node节点对象 document.forms 获得页面中所有form元素集合 document.body 访问页面中....cloneNode(true);  该方法可以返回一个节点的克隆节点, 克隆节点包含原节点的属性和子元素 此节内容有大量的练习,建议大家做写,增强代码的熟练度。...获得返回数据 Ø 通过Dom查找获得元素 Ø 调用元素的innerHTML进行操作 ?...") :even  选取所有元素中偶数索引的元素,从 0 开始计数 $("tr:even")  ----- 选取奇数元素 :odd  选取所有元素中奇数索引的元素 ,从0 开始计数 $("tr:odd

    5K130
    领券