文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

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的元素下的子元素。

14.2K10
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    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

    77620

    JavaScript 高级程序设计（第 4 版）- DOM

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

    1.7K31

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

    2K10

    WebAPIs学习笔记

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

    1.4K30

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

    前端学习资料整理

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

    4.2K20

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

    1K10

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

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

    2.6K90

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

    1.1K10

    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"),是从元素开始找

    12K10

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

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

    1.3K50

    jQuery学习笔记之DOM操作、事件绑定（2）

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

    2.1K10

    前端架构师之10_JavaScript_DOM

    1998年10月，DOM正式成为W3C的推荐标准。 第1级DOM（DOM Level 1，或DOM1）。为XML和HTML文档中的元素、节点、属性等提供了必备的属性和方法。...1.2 DOM HTML 节点树 DOM HTML指的是DOM中为操作HTML文档提供的属性和方法。 文档（Document）表示HTML文件。 文档中的标签称为元素（Element）。...若要获取其中一个对象，可以通过下标的方式获取，默认从0开始。 document对象提供一些属性，可用于获取文档中的元素。例如，获取所有表单标签、图片标签等。...querySelector()方法用于返回文档中匹配到指定的元素或CSS选择器的第1个对象的引用。 querySelectorAll()方法用于返回文档中匹配到指定的元素或CSS选择器的对象集合。...属性返回的也是对象集合，若要获取其中一个对象，也需通过下标的方式获取，默认从0开始。

    69710
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券