您的当前位置:首页filter()方法遍历DOM节点操作用法详解
广告

filter()方法遍历DOM节点操作用法详解

2023-12-01 来源:旭新科技网

一、 .filter(selector)

这种用法是在已匹配的元素中按照给定的selector参数(jquery选择器表达式)进行筛选,然后将匹配的元素包装成jquery元素集合返回。这个方法是用来缩小匹配范围的,selector参数可以是多个表达式用逗号连接起来。来看例子:

HTML代码:

<ul> <li>11111</li> <li class="item">22222</li> <li>33333</li> <li>44444</li> <li>55555</li> <li>66666</li> <li>77777</li></ul>

Jquery代码:

上面的jquery代码和下面的jquery代码效果是一样的

再来看一下选择器表达式用逗号连接起来的用法:

demo示例如下:

二、 .filter( function(index) )

这种使用方法是对匹配的元素进行遍历,如果function(index)返回的值为true的话,那么这个元素就被选中,如果返回值为false的话,那么这个元素就不被选中

index参数是当前的匹配元素在原来的元素集合中的索引。下面的例子:

HTML代码:

<p id="first"></p><p id="second"></p><p id="third"></p><p id="fourth"></p><p id="fifth"></p><p id="sixth"></p>

jquery代码:

上面代码的结果是 第二个p元素和 id为“fourth”的p元素的边框变成了双线颜色为蓝色

demo示例如下:

三、 .filter( element )

element参数为DOM对象,如果element DOM对象和匹配的元素是同一个元素的话,那么这个元素会被匹配。

看例子吧:

还是对上面的HTML代码,看jquery代码:

$("p").filter(document.getElementById("third")).css("border", "5px double blue");

结果是id为third的p元素边框有变化。

demo示例如下:

四、 .filter(jQuery object)

这个用法和上面的.filter( element )的用法差不多,只是一个参数为DOM对象,一个参数为jquery对象。

看例子:

同样是对上面的HTML代码,看jquery代码:

结果是id为third的p元素边框有变化。同样直接用下面的jquery代码会更好:

demo示例如下:

小编还为您整理了以下内容,可能对您也有帮助:

关于DOM(查找)

$(selector).children(filter)
返回被选元素的所有直接子元素
filter:字符串值,可选。规定缩小搜索子元素范围的选择器表达式。
无参时,找所有的直接子元素

$(selector).find(filter)
返回被选元素的后代元素。该方法沿着 DOM 元素的后代向下遍历,直至最后一个后代的所有路径(<html>)
filter:必需。过滤搜索后代条件的选择器表达式、元素或 jQuery 对象。如需返回多个后代,请使用逗号分隔每个表达式。
提示:如需返回所有的后代元素,请使用 "*" 选择器。

$(selector).first() 返回被选元素的第一个元素

$(selector).last() 返回被选元素的最后一个元素

$(selector).filter(criteria,function(index))
返回符合一定条件的元素。该方法规定一个条件。不符合条件的元素将从选择中移除,符合条件的元素将被返回(与 not() 方法相对的)
criteria:可选。规定要从被选元素组合中返回的选择器表达式、jQuery 对象、一个或多个元素(规定多个条件,请使用逗号分隔)。
function(index):可选。为集合中的每个元素规定要运行的函数。如果返回 true,则保留元素,否则元素将被移除。
index - 集合中元素的 index 位置。

$(selector).not(criteria,function(index))
返回不符合一定条件的元素。该方法让您规定一个条件。不符合条件的元素将从选择中返回,符合条件的元素将被移除。该方法通常用于从被选元素组合中移除一个或多个元素(与 filter() 方法相对的)
criteria:可选。规定要从被选元素组合中返回的选择器表达式、jQuery 对象、一个或多个元素(规定多个条件,请使用逗号分隔)。
function(index):可选。为集合中的每个元素规定要运行的函数。如果返回 true,则保留元素,否则元素将被移除。
index - 集合中元素的 index 位置。

$(selector).eq(index)
返回带有被选元素的指定索引号的元素。索引号从 0 开头,所以第一个元素的索引号是 0(不是 1)
index:必需。规定元素的索引。可以是整数或负数。使用负数将从被选元素的结尾开始计算索引(最后一个索引可以是-1)。

$(selector).is(selectorElement,function(index,element))
用于查看选择的元素是否匹配选择器。
selectorElement:必须。选择器表达式,根据选择器/元素/jQuery 对象检查匹配元素集合,如果存在至少一个匹配元素,则返回 true,否则返回 false。
function(index,element):可选。指定了选择元素组要执行的函数。
index - 元素的索引位置
element - 当前元素 ( "this" 选择器也可以使用 )

$(selector).has(element)
返回拥有匹配指定选择器的一个或多个元素在其内的所有元素。
element:必需。规定匹配元素的选择器表达式或元素。

$(selector).each(function(index,element))
为每个匹配元素规定要运行的函数,返回 false 可用于及早停止循环。
function(index,element):必需,为每个匹配元素规定运行的函数。
index - 选择器的 index 位置。
element - 当前的元素(也可使用 "this" 选择器)。

$(selector).parent(filter)
返回被选元素的直接父元素
filter:字符串值,可选。规定缩小搜索父元素范围的选择器表达式。
无参时,找所有的直接父元素

$(selector).parents(filter)
返回被选元素的所有祖先元素。该方法从父元素向上遍历 DOM 元素的祖先,直至文档根元素的所有路径(<html>)
filter:字符串值,可选,规定缩小搜索祖先元素范围的选择器表达式。如需返回多个祖先,请使用逗号分隔每个表达式。
注意:如果 filter 参数为空,该方法将从直接父元素直至 <body> 和 <html> 的所有路径中选取元素集合中的所有祖先。

$(selector).siblings(filter)
返回被选元素的所有同级元素
filter:字符串值,可选。规定缩小搜索同级元素范围的选择器表达式。

$(selector).next(filter)
返回被选元素的紧连的后一个同级元素(该方法只返回一个元素)
filter:字符串值,可选。规定缩小搜索后一个同级元素范围的选择器表达式,如果紧连的后一个不符合filter,则不会被选中(即不返回)。

$(selector).nextAll(filter)
返回被选元素之后的所有同级元素
filter:字符串值,可选。规定缩小搜索元素之后的同级元素范围的选择器表达式。如需返回多个同级元素,请使用逗号分隔每个表达式。

$(selector).prev(filter)
返回被选元素的紧连的前一个同级元素(该方法只返回一个元素)
filter:字符串值,可选。规定缩小搜索后一个同级元素范围的选择器表达式,如果紧连的前一个不符合filter,则不会被选中(即不返回)。

$(selector).prevAll(filter)
返回被选元素之前的所有同级元素
filter:字符串值,可选。规定缩小搜索元素之后的同级元素范围的选择器表达式。如需返回多个同级元素,请使用逗号分隔每个表达式。

关于DOM(查找)

$(selector).children(filter)
返回被选元素的所有直接子元素
filter:字符串值,可选。规定缩小搜索子元素范围的选择器表达式。
无参时,找所有的直接子元素

$(selector).find(filter)
返回被选元素的后代元素。该方法沿着 DOM 元素的后代向下遍历,直至最后一个后代的所有路径(<html>)
filter:必需。过滤搜索后代条件的选择器表达式、元素或 jQuery 对象。如需返回多个后代,请使用逗号分隔每个表达式。
提示:如需返回所有的后代元素,请使用 "*" 选择器。

$(selector).first() 返回被选元素的第一个元素

$(selector).last() 返回被选元素的最后一个元素

$(selector).filter(criteria,function(index))
返回符合一定条件的元素。该方法规定一个条件。不符合条件的元素将从选择中移除,符合条件的元素将被返回(与 not() 方法相对的)
criteria:可选。规定要从被选元素组合中返回的选择器表达式、jQuery 对象、一个或多个元素(规定多个条件,请使用逗号分隔)。
function(index):可选。为集合中的每个元素规定要运行的函数。如果返回 true,则保留元素,否则元素将被移除。
index - 集合中元素的 index 位置。

$(selector).not(criteria,function(index))
返回不符合一定条件的元素。该方法让您规定一个条件。不符合条件的元素将从选择中返回,符合条件的元素将被移除。该方法通常用于从被选元素组合中移除一个或多个元素(与 filter() 方法相对的)
criteria:可选。规定要从被选元素组合中返回的选择器表达式、jQuery 对象、一个或多个元素(规定多个条件,请使用逗号分隔)。
function(index):可选。为集合中的每个元素规定要运行的函数。如果返回 true,则保留元素,否则元素将被移除。
index - 集合中元素的 index 位置。

$(selector).eq(index)
返回带有被选元素的指定索引号的元素。索引号从 0 开头,所以第一个元素的索引号是 0(不是 1)
index:必需。规定元素的索引。可以是整数或负数。使用负数将从被选元素的结尾开始计算索引(最后一个索引可以是-1)。

$(selector).is(selectorElement,function(index,element))
用于查看选择的元素是否匹配选择器。
selectorElement:必须。选择器表达式,根据选择器/元素/jQuery 对象检查匹配元素集合,如果存在至少一个匹配元素,则返回 true,否则返回 false。
function(index,element):可选。指定了选择元素组要执行的函数。
index - 元素的索引位置
element - 当前元素 ( "this" 选择器也可以使用 )

$(selector).has(element)
返回拥有匹配指定选择器的一个或多个元素在其内的所有元素。
element:必需。规定匹配元素的选择器表达式或元素。

$(selector).each(function(index,element))
为每个匹配元素规定要运行的函数,返回 false 可用于及早停止循环。
function(index,element):必需,为每个匹配元素规定运行的函数。
index - 选择器的 index 位置。
element - 当前的元素(也可使用 "this" 选择器)。

$(selector).parent(filter)
返回被选元素的直接父元素
filter:字符串值,可选。规定缩小搜索父元素范围的选择器表达式。
无参时,找所有的直接父元素

$(selector).parents(filter)
返回被选元素的所有祖先元素。该方法从父元素向上遍历 DOM 元素的祖先,直至文档根元素的所有路径(<html>)
filter:字符串值,可选,规定缩小搜索祖先元素范围的选择器表达式。如需返回多个祖先,请使用逗号分隔每个表达式。
注意:如果 filter 参数为空,该方法将从直接父元素直至 <body> 和 <html> 的所有路径中选取元素集合中的所有祖先。

$(selector).siblings(filter)
返回被选元素的所有同级元素
filter:字符串值,可选。规定缩小搜索同级元素范围的选择器表达式。

$(selector).next(filter)
返回被选元素的紧连的后一个同级元素(该方法只返回一个元素)
filter:字符串值,可选。规定缩小搜索后一个同级元素范围的选择器表达式,如果紧连的后一个不符合filter,则不会被选中(即不返回)。

$(selector).nextAll(filter)
返回被选元素之后的所有同级元素
filter:字符串值,可选。规定缩小搜索元素之后的同级元素范围的选择器表达式。如需返回多个同级元素,请使用逗号分隔每个表达式。

$(selector).prev(filter)
返回被选元素的紧连的前一个同级元素(该方法只返回一个元素)
filter:字符串值,可选。规定缩小搜索后一个同级元素范围的选择器表达式,如果紧连的前一个不符合filter,则不会被选中(即不返回)。

$(selector).prevAll(filter)
返回被选元素之前的所有同级元素
filter:字符串值,可选。规定缩小搜索元素之后的同级元素范围的选择器表达式。如需返回多个同级元素,请使用逗号分隔每个表达式。

怎样进行JS内DOM节点使用

这次给大家带来怎样进行JS内DOM节点使用,JS内DOM节点使用的注意事项有哪些,下面就是实战案例,一起来看一下。

DOM操作在JS中可以说是非常常见了吧,很多网页的小功能的实现,比如一些元素的增删操作等都可以用JS来实现。那么在DOM中我们需要知道些什么才能完成一些功能的实现呢?今天这篇文章就先简单的带大家入一下JS中DOM操作的门吧!!

一、DOM树的节点

1、 DOM节点分为三大类: 元素节点(标签节点)、属性节点和文本节点。

属性节点和文本节点都属于元素节点的子节点。 因此操作时,需先选中元素节点,再修改属性和文本。

【查看元素节点】

1、 使用getElement系列方法:

具体的HTML代码如下图:

//通过ID来查看元素属性

var li = document.getElementById("first");

//通过类名来查看元素属性

var lis1 = document.getElementsByClassName("cls");

//通过名字来查看元素属性

var lis2 = document.getElementsByName("name");

//通过标签名来查看元素属性

var lis3 = document.getElementsByTagName("li");注意事项:

① ID不能重名,如果ID重复,只能取到第一个。

② 获取元素节点时,必须等到DOM树加载完成后才能获取。

两种处理方式:

a.将JS写在文档最后;

b.将代码写入window.onload函数中;

③ 通过getElements系列取到的为数组格式,操作时必须取到其中的每一个元素,才能进行操作,而不能直接对数组进行操作。

document.getElementsByTagName("li")[0].click = function(){}④ 这一系列方法,也可以先选中一个DOM节点,在从选中的DOM节点中,选择需要的节点:

document.getElementById("p1").getElementsByTagName("li");【通过querySelector系列方法】

① 传入一个选择器名称,返回第一个找到的元素。 通常用于查找ID:

var dq1 = document.querySelector("#id");② 传入一个选择器名称,返回所有找到的元素,无论找到几个,都返回数组格式。这种方法比较全能,不管什么属性都可以准确地找到。

var dqs1 = document.querySelectorAll("#p1 li");【查看设置属性节点】

1、 查看属性节点:.getAttribute("属性名");

2、 设置属性节点:.setAttribute("属性名","属性值");

注意事项:.setAttribute() 在老版本IE中会存在兼容性问题,可以使用.符号代替。

【JS修改CSS的多种方式】

1、 使用setAttribute设置class和style。

document.getElementById("first").setAttribute("class","class1");

document.getElementById("first").setAttribute("style","color:red;");2、使用.className添加一个class选择器。

document.getElementById("first").className = "class1";3、 使用.style.样式 直接修改单个样式。 注意样式名必须使用驼峰命名法。

document.getElementById("first").style.fontSize = "18px";4、 使用.style 或 .style.cssText 添加一串行级样式:

// IE不兼容

document.getElementById("first").style = "color:red;";

//所有浏览器兼容

document.getElementById("first").style.cssText = "color:red;";【查看/设置文本节点】

1、.innerHTML: 取到或设置一个节点中的HTML代码。

2、.innerText: 取到或设置一个节点中的文本,不能设置HTML代码。

二、层次节点操作

1. .childNodes: 获取当前节点的所有子节点(包括元素节点和文本节点)。

.children: 获取当前节点的所有元素子节点(不包含文本节点)。

2. .parentNode: 获取当前节点的父节点。

3. .firstChild: 获取第一个子节点,包括回车等文本节点;

.firstElementChild: 获取第一个元素节点。 不含文本节点;

.lastChild: 获取最后一个子节点,包括回车等文本节点;

.lastElementChild: 获取最后一个子节点,不含文本节点;

4. .previousSibling: 获取当前节点的前一个兄弟节点,包括文本节点;

.previousElementSibling: 获取当前节点的前一个元素兄弟节点;

.nextSibling:获取当前节点的后一个兄弟节点,包括文本节点;

.nextElementSibling:获取当前节点的后一个元素兄弟节点;

5. .attributes: 获取当前节点的所有属性节点。 返回数组格式。

【创建并新增节点】

1. document.createElement("标签名"): 创建一个新节点,并将创建的新节点返回。

需要配合.setAttribute()为新节点设置属性。

2. 父节点.insertBefore(新节点,目标节点): 在父节点中,将新节点插入到目标节点之前。

父节点.appendChild(新节点): 在父节点的内部最后,插入一个新节点。

3. 源节点.cloneNode(true): 克隆一个节点。

传入true表示克隆源节点以及源节点的所有子节点;

传入false或不传,表示只克隆当前节点,而不克隆子节点。

【删除、替换节点】

1. 父节点.removeChild(子节点): 从父节点中,删除指定子节点。

2. 父节点.replaceChild(新节点,老节点): 从父节点中,用新节点替换老节点。

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

不用JS实现菜单打开关闭

怎样操作vue通过id从列表页跳转详情页

使用dom编程,可以对节点对象实现什么操作?

使用DOM编程,可以对节点对象实现以下操作:

创建节点:使用createElement()方法创建一个新的元素节点。

添加节点:使用appendChild()方法将一个节点添加为另一个节点的子节点。

删除节点:使用removeChild()方法从父节点中删除指定的子节点。

替换节点:使用replaceChild()方法将一个节点替换为另一个节点。

插入节点:使用insertBefore()方法在指定节点之前插入一个新节点。

获取和修改节点的属性:使用getAttribute()和setAttribute()方法获取和设置节点的属性。

获取和修改节点的文本内容:使用textContent属性获取或设置节点的文本内容。

遍历节点树:使用childNodes属性获取节点的子节点列表,使用parentNode属性获取节点的父节点,使用nextSibling和previousSibling属性获取相邻的兄弟节点。

修改节点的样式:使用style属性获取或设置节点的CSS样式。

绑定事件处理程序:使用addEventListener()方法将事件处理程序绑定到节点上。

这些只是DOM编程中的一些常见操作,还有许多其他方法和属性可以用于操作和处理节点对象。具体的操作和实现方式可能会根据不同的编程语言、框架或库而有所不同。建议参考相关的文档、教程和示例代码,以了解更多关于DOM编程的详细信息。

旭新科技网还为您提供以下相关内容希望对您有帮助:

关于DOM(查找)

该方法从父元素向上遍历 DOM 元素的祖先,直至文档根元素的所有路径() filter:字符串值,可选,规定缩小搜索祖先元素范围的选择器表达式。如需返回多个祖先,请使用逗号分隔每个表达式。 注意:如果 filter 参数为空,...

怎样进行JS内DOM节点使用

一、DOM树的节点1、 DOM节点分为三大类: 元素节点(标签节点)、属性节点和文本节点。属性节点和文本节点都属于元素节点的子节点。 因此操作时,需先选中元素节点,再修改属性和文本。【查看元素节点】1、 使用getElement系列...

jquery如何遍历一个html页面标题生成目录

DOM获得-tex()、html()以及val()三个简单实用的用于 DOM 操作的 jQuery 方法:text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容(包括 HTML 标记)val() - 设置或返回表单字段的值获取...

filter方法

array.filter(callback [,that]);对于array,需要指定预先创建的数组对象。对于回调,可以指定数组元素的值“value”,数组元素的数字索引“index”以及存储数组元素的数组对象“arrayObj”。对于每个数组元素,callbak返回true的...

使用dom编程,可以对节点对象实现什么操作?

使用DOM编程,可以对节点对象实现以下操作:创建节点:使用createElement()方法创建一个新的元素节点。添加节点:使用appendChild()方法将一个节点添加为另一个节点的子节点。删除节点:使用removeChild()方法从父节点中删除指定的...

js操作节点的DOM方法

js操作节点的DOM方法 一、创建节点 createElement createTextNode 二、添加、删除、替换、克隆元素 1、appendChild 2、insertBefore 3、如果appendChild、insertBefore追加的是已经存在的子元素,实际上就会将子元素位置移动 4、删除...

怎么遍历html dom 节点 javascript

选择递归 (全能方法) var TM = { arr : [], getNodes : function(tagNames, models) { var m = models ? models : this.model; var c = null; var arr = this.arr; // 数组传递也是引用...

DOM访问元素节点有几种方法?分别是哪些?

1. 通过顶层document节点获取:(1) document.getElementById(elementId) :该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法。如果页面上含有多个相同id的节点,那么只返回第一个节点。如今,已经出现了如...

用htmlParser怎么获取下面dd标签里面的内容

2:通过NodeList list = parser.extractAllNodesThatMatch(andFilter);获取满足条件的节点列表。3:对列表list进行循环遍历,在各个遍历里面,可以获取分析多个不同节点的内容,如获取某循环节点的内容和链接:for(int i=0;i ...

Node 节点常用 API 详解

DOM 将会变成这样:移除节点,对应的方法是 Node.removeChild() 和 Element.remove() 。举个例子:Node.replaceChild() 方法用指定的节点替换当前节点的一个子节点,并返回被替换掉的节点。语法如下:请注意,第二个...

Top