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

获取其中包含特定元素的元素作为子元素,而不使用jquery

获取其中包含特定元素的元素作为子元素,而不使用jQuery,可以使用原生JavaScript来实现。以下是一种可能的实现方式:

  1. 首先,获取父元素,可以使用document.getElementById()document.querySelector()等方法来获取父元素的引用。
  2. 然后,使用父元素的querySelectorAll()方法来获取所有子元素。
  3. 遍历子元素列表,使用每个子元素的querySelector()方法来查找包含特定元素的子元素。如果找到了符合条件的子元素,则将其添加到结果列表中。
  4. 最后,返回结果列表。

以下是一个示例代码:

代码语言:javascript
复制
function getElementsWithSpecificChild(parentId, childSelector) {
  var parent = document.getElementById(parentId);
  var children = parent.querySelectorAll('*');
  var result = [];

  for (var i = 0; i < children.length; i++) {
    var child = children[i];
    if (child.querySelector(childSelector)) {
      result.push(child);
    }
  }

  return result;
}

使用示例:

代码语言:javascript
复制
var elements = getElementsWithSpecificChild('parentElementId', '.specificChildElement');
console.log(elements);

请注意,上述代码中的parentId参数应为父元素的id属性值,childSelector参数应为要查找的特定子元素的选择器。

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

相关·内容

  • JQuery最全常用方法指南

    contents() 取得一个包含匹配元素集合中每一个元素所有子孙节点集合(只包括元素节点, 包括文本节点),如果元素为iframe,则取得其中文档元素 find(expr) 搜索所有与指定表达式匹配元素...parents([expr]) 取得一个包含着所有匹配元素唯一祖先元素元素集合(包含元素)。 prev([expr]) 取得一个包含匹配元素集合中每一个元素紧邻前一个同辈元素元素集合。....innerHTML; 3、如何获取jQuery集合某一项 对于获取元素集合,获取其中某一项(通过索引指定)可以使用eq或get(n)方法或者索引号获取,要注意,eq返回jquery对象,...对于jquery对象只能使用jquery方法,dom对象只能使用dom方法,如要获取第三个 元素内容。...,我们无需在html元素上直接写事件,可以直接为通过jquery获取对象添加事件。

    11K31

    jQuery基本操作

    ,Malcom John Sinclair]  :empty //概述 //匹配所有包含元素或者文本元素 描述 查找所有包含元素或者文本元素 HTML代码...=value] //概述 //匹配所有不含有指定属性,或者属性不等于特定值· //次选择器等价于:not([attr=value])要匹配含有特定属性但不等于特定元素,请使用[attr]:not...//概述 匹配第一个元素 类似的(:first)匹配第一个元素,次选择符将为 每个父元素匹配一个元素· 描述 在每一个ul中查找第一个li HTML代码 John...,select中option),对于select元素来说,获取选中推荐使用:selected 描述 查找说有选中复选框元素 HTML代码 <input type="checkbox...html内容·和个函数 不能用XML文档·但可以用于XHTML文档· //在一个HTML文档中,我们可以<em>使用</em>.html()方法来<em>获取</em>任意一个<em>元素</em><em>的</em>内容·如果选择匹配多余一个<em>的</em><em>元素</em>,那么只有第一个匹配<em>元素</em><em>的</em>

    7.5K20

    jQuery中常用函数和属性详细解析

    ,如果不存在就设置此样式 $("input元素名称").val(); 获取input元素值 $("input元素名称").val(value); 设置input元素值为value Manipulation...","号分割多个expr,用于实现多个条件筛选. ilter( fn ) 利用一个特殊函数来作为筛选条件移除集合中匹配元素。...add( expr ) 把与表达式匹配元素添加到jQuery对象中。 children( [expr] ) 取得一个包含匹配元素集合中每一个元素所有元素元素集合。...contents( ) 取得一个包含匹配元素集合中每一个元素所有子孙节点集合(只包括元素节点,不包括文本节点),如果元素为iframe,则取得其中文档元素 find( expr ) 搜索所有与指定表达式匹配元素...parents( [expr] ) 取得一个包含着所有匹配元素唯一祖先元素元素集合(包含元素)。

    2.6K10

    JQuery选择器和JQuery包装集

    JQuery选择器 编写任何javascript程序都需要首先获得对象, jQuery选择器能彻底改变我们平时获取对象方式, 可以获取几乎任何语意对象, 比如”拥有title属性并且值中包含test...在DOM编程中我们只能使用有限函数根据id或者TagName获取DOM对象。...属性过滤器 $("div[id]")匹配包含给定属性元素 $("input[name='...']") 匹配给定属性是某个特定元素 name='...' $("input[name!...='...']")匹配给定属性是包含某个特定元素 name='...' $("input[name^='...']")匹配给定属性是以某些值开始元素 name^='...'...().is("form")用一个表达式来检查当前选择元素集合,如果其中至少有一个元素符合这个给定表达式就返回true $("p").parent()查找每个段落元素: 示例 HTML 代码:<

    3.1K20

    jQuery笔试题汇总整理--2018

    jQuery(document).ready(function(){ }); 5、jQuery对象和DOM对象是怎样转换 jQuery对象是一个包含了dom对象数组 可以通过jQuery...children():获取匹配元素元素集合,不考虑后代元素 $(function(){$("div").children()}) next()获取匹配元素后面紧邻同级元素 prev()获取匹配元素前紧邻同级元素...jQuery中常见函数如下:   1)get()取得所有匹配DOM元素集合.   2)get(index)取得其中一个匹配元素.index表示取得第几个匹配元素.   3)append(content...expr)搜索所有与指定表达式匹配元素.   7)bind(type,[data],fn)为每个匹配元素特定事件绑定事件处理函数.   8)empty()删除匹配元素集合中所有的节点.   ...简而言之,XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,阻塞用户。

    2.5K21

    DOM 高级工程师不完全指南

    尽管这几年风生水起 Vue、React 加剧了 jQuery 没落,但全世界仍有超过 6600 万个网站在使用 jQuery,占全球所有网站数量 74%。...讽刺是,也正是这两个原生方法出现,大大加快了 jQuery 没落,因为它们取代了前者最常用功能 —— 快捷选择 DOM 元素。...如果页面上没有指定元素时,返回 null 获取 DOM 元素集合 使用 document.querySelectorAll 可以获取一个元素集合,它传参和 document.querySelector...如今,开发者们可以使用 replaceWith 就可以完成两个元素之间替换了: ? 从用法上来说,要比前者清爽一些。...contains 方法可以检测出一个元素是否包含另一个元素(或者:一个元素是否是另一个元素元素): ?

    71410

    DOM 高级工程师不完全指南

    尽管这几年风生水起 Vue、React 加剧了 jQuery 没落,但全世界仍有超过 6600 万个网站在使用 jQuery,占全球所有网站数量 74%。...讽刺是,也正是这两个原生方法出现,大大加快了 jQuery 没落,因为它们取代了前者最常用功能 —— 快捷选择 DOM 元素。...如果页面上没有指定元素时,返回 null 获取 DOM 元素集合 使用 document.querySelectorAll 可以获取一个元素集合,它传参和 document.querySelector...如今,开发者们可以使用 replaceWith 就可以完成两个元素之间替换了: ? 从用法上来说,要比前者清爽一些。...contains 方法可以检测出一个元素是否包含另一个元素(或者:一个元素是否是另一个元素元素): ?

    72010

    jquery选择器用法_jQuery属性选择器

    使用公式:(“#id”) 示例:(“#box”) //获取id属性值为box元素 2....(可以是ID选择器、元素选择器或是类名选择器)组合在一起,两个选择器之间以逗号”,”分隔,只要符合其中任何一个筛选条件就会被匹配,返回是一个集合形式jQuery包装集,利用jQuery索引器可以取得集合中...prev元素之后所有siblings元素其中prev和siblings是个相同辈元素 使用公式: 三、过滤选择器 1.简单过滤器...”word”文本内容元素 :empty 说明:匹配所有包含元素或者文本元素 示例:(“td:empty”...) //匹配包含元素或者文本单元格 :has(selector) 说明:匹配含有选择器所匹配元素元素

    12.2K30

    JavaScript学习笔记(四)—— jQuery入门

    red" ); 属性选择器 属性选择器是通过元素属性作为过滤条件进行筛选对象 名称 说明 举例 [attribute] 匹配包含给定属性元素 $(“div[id]”) [attribute...=value] 匹配给定元素包含某个特定元素 $(“input[name!...选择同元素类型随后一个元素 :nth-of-type 选择同元素类型第n个或奇偶元素,n值为"整数或odd或even" :only-of-type 匹配父元素特定类型唯一元素(该父元素可以有多个子元素...hidden 内容伪类选择器 根据元素文字内容或所包含元素特征来选择元素 选择器 说明 :contains(text) 选择包含给定文本内容元素 :has(selector) 选择包含选择器所匹配元素元素...:empty 选择所有包含元素或者包含文本元素 :parent 选择含有元素或者文本元素 $("div:contains('刘')").css("text-decoration

    11.2K50

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

    $option.text("北京"); 创建元素节点时,直接将其节点文本内容插入其中。...empty(): 清空节点 – 清空元素所有后代节点(包含属性节点)。 复制节点 clone(): 克隆匹配 DOM 元素, 返回值为克隆后副本....当为该方法传递一个参数时, 即为某元素获取指定属性。 当为该方法传递两个参数时, 即为某元素设置指定属性值。 jQuery 中有很多方法都是一个函数实现获取和设置....removeAttr(“属性名”): 删除指定元素指定属性 样式操作 获取 class 和设置 class :class 是元素一个属性, 所以获取 class 和设置 class 都可以使用...遍历节点 取得匹配元素所有元素组成集合: children(). 该方法只考虑元素不考虑任何后代元素.

    1.5K10

    jQuery选择器和选取方法

    注意该过滤器序号是从1开始,因此如果一个元素是其父节点第一个元素,会认为它是奇数元素,匹配是3n+1,不是3n。...">元素 注意:CSS和jQuery选择器语法允许在简单选择器某些过滤器中使用圆括号,但并不允许使用圆括号来进行更常见分组。...如果传递选择器字符串给not()它会返回一个新jQuery对象,该 对象只包含匹配该选择器元素。...对选中每一个元素,这些方法会使用该选中元素作为上下文或起始点来得到新选中元素集,然后返回一个新jQuery对象,包含所有新选中元素 并集。...大部分都接受可选选择器字符串作为参数。传入选择器时,它们会返回所有元素、兄弟元素或父元素。传入选择器时,它们会过滤元素集,仅返回匹配

    5.2K40

    jQuery 选择器

    层叠样式表 良好地继承了css选择器语法,还继承了其获取页面元素便捷高效特点 于css不同,jQuery选择器获取元素后,为该元素添加是行为 有良好兼容性 优势 1. ...通过DOM之间层次关系来获取元素 2. jQuery有四种常用层次选择器: (1) 后代选择器 (2) 选择器 (3) 相邻选择器 (4) 同辈选择器 ?...层级选择器之间相似与不同点: 1)层级选择器都有一个参考节点 2)后代选择器包含选择器选择内容 3)一般兄弟选择器包含相邻兄弟选择内容 4)相邻兄弟选择器和一般兄弟选择器所选择到元素...在层次选择呢亲中,后代选择器和选择器较为常用,相邻元素选择器和同辈元素选择器在jQuery中可以用更加简单方法代替: (1)使用next()房代替prev-next(相邻元素选择器) (2)使用nextAll...代码: /1不带空格jQuery选择器 var $t b= $(".test:hidden") ; 选取是隐藏class 为“test" 元素。 最后: ? (C) 房上猫 。

    2.7K90

    Web前端JQuery面试题(二)

    通过jquery自身方法获取页面元素对象,就是jquery对象。...) 获取包含给定文本元素 :empty 获取所有包含元素或文本元素 如: :has(selector) 获取含所选择器所有元素 :parent 获取含有元素或文本元素...] 获取给定属性元素 [attribute = value] 匹配给定属性是某个特定元素 [attribute !...*= value] 匹配有包含某些值特定元素 [selector1][selector2] 同时满足多个条件使用 元素过滤选择器: :nth-child 从1开始,匹配每个父元素下第n个元素...:first-child 匹配每个父元素第一个元素 :last-child 匹配每个父元素最后一个元素 :only-child 匹配父元素中只有唯一元素,如果父元素中有多个子元素,就不会被匹配

    1.9K30

    jQuery 教程

    /2.0.2/jquery-2.0.2.min.js"> Google CDN:( 推荐使用Google CDN来获取版本,因为Google产品在中国很不稳定。...”) 属于其父元素特定类型唯一元素所有 元素 $(“div > p”) 元素直接元素所有 元素 parent descendant $(“div p”).../ 包含 Runob文本元素 $("td:empty") //包含元素或者文本元素 $("div:has(selector)") //含有选择器所匹配元素...innerHeight() 返回元素高度(包含 padding,包含 border) innerWidth() 返回元素宽度(包含 padding,包含 border) insertAfter...jQuery.support 包含表示不同浏览器特性或漏洞属性集(主要用于 jQuery 内部使用) length 包含 jQuery 对象中元素数目 jQuery.cssNumber 包含所有可以不使用单位

    17K20

    JavaScript理解记录(5)

    ,Text,这三个也是Node其中几个子类;  2、文档元素选取:返回值是Element或Element组成数组NodeList;...CSS选择器字符串参数,返回一个NodeList对象或Element;功能与JQuery类库中()相似,两者参数相同,不同是:()返回值为一个JQuery对象表示匹配元素集,JQuery对象是一个类数组...:.success 4、基于属性值:input[name='button']; 5、组合使用:span.fatal.error //其class中包含fatal和error元素;    ...3、 文档结构:作为节点树解析(还有一种是作为元素树解析,将文档看做Element对象树,忽略Text和Comment节点)         节点Node对象主要以下几个重要属性:            ...不同属性获取不同内容;          innerHTML : 元素内容作为字符串返回;          outerHTML :返回字符包含查询元素开头和结尾标签;(HTML5才有且FireFox

    1.4K20

    Web前端JQuery面试题(一)

    :contains :empty :has :parent 匹配包含给定文本元素 匹配所有包含元素或者文本元素 匹配含有选择器所匹配元素元素 匹配含有元素或者文本元素 5.可见性选择器...[attribute] [attribute = value] 匹配给定属性是某个特定元素 [attribute !...*= value] 匹配有包含某些值特定元素 [selector1][selector2] 同时满足多个条件使用 $("div[id]"); <div...:first-child 匹配每个父元素第一个元素 :last-child 匹配每个父元素最后一个元素 :only-child 匹配父元素中只有唯一元素,如果父元素中有多个子元素,就不会被匹配...children(); 获取元素 find(); 用于查找表达式 next(); 获取下一个元素 nextAll(); 获取下一个所有元素 parent(); 获取元素 parents(); 获取所有匹配元素祖先元素集合

    2.9K20
    领券