遍历元素

最新推荐文章于 2022-08-26 11:31:30 发布

原创最新推荐文章于 2022-08-26 11:31:30 发布 · 259 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个简单的HTML页面，其中包含一个按钮和一个带有导航菜单的布局。通过JavaScript实现了当页面上的任意元素被点击时，可以获取到该元素及其父级元素的节点名称、ID和类名，并将这些信息以DOM路径的形式输出。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript">
        var clickHandler= function(){
            debugger;
            var target = event.target;
            var result = [];
            do{
                var temp = "";
                temp += target.nodeName.toLowerCase();
                if(target.id){
                    temp += "#" + target.id;
                }
                if(target.className){
                    target.className.split(" ").forEach(function(value){
                        temp += "."+value;
                    });
                }
                result.push(temp);
                target = target.parentElement;
            }while(target)
            console.log(result.reverse().join(" "));
        }
        document.onclick=clickHandler;
    </script>
</head>
<body>
    <button id="mybtn" class="btn my-btn">btn</button>
    <div id="page">
        <div class="main">
            <div class="menu">
                <ul>
                    <li></li>
                    <li></li>
                </ul>
             </div>
        </div>
    </div>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

tanli49

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

python如何使用索引遍历元素

泗水长流的博客

07-18

500

如果我们需要索引和元素时，那就可以通过 Python 内置的函数 enumerate()。用它来遍历集合，这样不仅会返回每个元素，并且还返回其对应的索引。上面这个方法比较简单，当然我们也可以使用range()函数。

集合04/集合元素的遍历

Locus的博客

08-17

472

集合元素的遍历 1.iterator接口 2. foreach 1. 使用迭代器Iterator接口 iterator():返回Iterator接口的实例，用于遍历集合元素。放在IteratorTest.java中测试内部的方法: hasNext()和next() package com.jh; import org.junit.Test; import java.util.ArrayList; import java.util.Collection; import java.util.I

参与评论您还未登录，请先登录后发表或查看评论

元素添加样式

JSer_Dick的博客

09-04

480

Ok，既然如此，那么先创建一些元素var createElementOflink = document.createElement("link"); //姑且作为link内联吧. createElementOflink.herf = "#"; createElementOflink.name = "Mylink"; createElementOflink.id = "Mylink"; createE

元素遍历

weixin_30539835的博客

06-27

149

对于元素间的空格，IE9及之前版本不会返回文本节点，而其他所有浏览器都会返回文本节点。这样就导致了在使用childNodes和firstChild等属性时的行为不一致。为了弥补这一差异，而同时又保持DOM规范不变，Element Traversal规范新定义了一组属性。 childElementCount：返回子元素（不包括文本节点和注释）的个数 firstElementChild：指向第...

DOM 元素的遍历

weixin_45147894的博客

10-16

398

对于元素间的空格，各浏览器会做出不同的反应，就导致了在使用childNodes和firstChild等属性时的行为不一致，由此，Element Traversal API 为DOM元素添加了以下５个属性。 childElementCount:返回子元素（不包括文本节点和注释）的个数 firstElementChild:指向第一个子元素，firstChild的元素版。 lastElementChild：指向最后一个元素，lastChild的元素版。 previousElementSibling:指向

jQuery - 元素遍历

立志欲坚不欲锐，成功在久不在速度

11-23

1011

前言：一提到“遍历”,大家一般都能联想到 each() 或者 for()等语法，但是在jQuery中究竟什么是遍历？什么是遍历： jQuery 遍历，意为"移动"，用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。下图展示了一个家族树。通过 jQuery 遍...

数组的元素遍历

MIRACLE_SQ的博客

07-17

405

什么是遍历: 就是将数组中的元素一一获取到并输出到控制台上 public static void main(String[] args){ //已知数组:静态初始化 int[] arr = {11,22,33,44,55} ; //原始的做法:对象名称[索引值/角标值] System.out.println(arr[0]) ; //11 System.out.println(arr[1]) ; //22 System.out.println(arr[2]) ;//33 S

python中使用enumerate函数遍历元素实例

01-20

这个是python的一个内建函数，看书的时候发现了他，mark一下当我们既需要遍历索引同时需要遍历元素的时候，可以考虑使用enumerate函数，enumerate函数接受一个可遍历的对象，如列表、字符串比如我们有一个[“one”,...

JQuery遍历元素的父辈和祖先的方法

10-21

接下来，我们将探讨如何使用JQuery遍历元素的父辈和祖先。 1. parent()方法 parent()方法用于获取当前选中元素的直接父辈元素。这是遍历父辈元素中最基础的方法。例如，在给定的代码片段中，通过点击一个按钮，使用...

python中enumerate函数遍历元素用法分析

12-25

本文实例讲述了python中enumerate函数遍历元素用法。分享给大家供大家参考，具体如下： enumerate函数用于遍历序列中的元素以及它们的下标示例代码如下： i = 0 seq = ['one', 'two', 'three'] for element in seq...

JQuery遍历元素的后代和同胞实现方法

10-21

在jQuery库中，有多种方法可以用来实现这种需求，接下来，我们将会详细解释如何使用children()和find()方法来遍历后代，以及如何使用siblings()方法来遍历同胞元素。首先，让我们了解children()方法。children()...

javascript DOM扩展-元素遍历

wujunlei1595848的博客

05-30

250

使用循环语句进行常规遍历的不方便性：元素间的空格(空行)的对待方式不一致，除IE9-外的浏览器都视作文本节点，所以未使用新API之前遍历元素都需要检测节点的类型，跳开空格（空行）代表文本节点。 W3C的Element Traversal规范新定义了一组属性：IE9+支持： childElementCount: 子元素节点的个数； firstElementChild: 第一个子元素节点...

利用DOM来遍历所有元素（children和childNodes的区别）

Allenyhy的博客

09-30

1万+

如果一个元素的子元素里还有子元素，那么我们常常用到的一个方法就是递归例子如下图所示： function traversal(dom){ var len = dom.length; var d = null; for(var i=0; i<len; i++){ d = dom[i]; console.log(d); if(d....

数组元素的遍历及数组常用方法-B站晓舟学习报告笔记

qq_43573285的博客

08-16

809

文章目录数组元素的遍历1 while循环遍历2 for循环遍历3 for in 遍历(i为索引)4 for of 遍历(i为值)5 map方法遍历数组的常用方法pushsortfilterjoin提取性别为女性的，另外组成一个数组数组元素的遍历数组的遍历 var list = [“a”,“c”,“b”,“d”,“e”]; 1 while循环遍历【index]为索引，0开始 var i = 0; while(i<list.length){

js数组遍历所有元素方法总结

热门推荐

若水弹丸之地

02-28

1万+

方法一：for(){} 遍历这是最笨的方法，low到不解释缺点：蠢！ var arr = [1,2,3,"a",true]; for(var i=0;i&lt;arr.length;i++){ console.log("第" + i + "次遍历:" + arr[i]); } 执行结果：方法二：forEach 遍历缺点：不能使用 break 语句来跳

常用遍历元素的方法

qq_34550459的博客

05-14

1658

遍历节点: 使用each(callback)方法来遍历元素经典用法: $(selector).each(function(index,element){ … }); 美元符号(selector):返回的是一个集合(伪数组) index:当前遍历节点的索引 element:DOM元素对象使用jquery方法或者属性时,需要转换为jquery对象 —>$(element) 或者使用$(this) -->当前遍历节点对象方式二: $.each(array,function(index,eleme

遍历集合元素的三种方式

笑语轻柔

09-13

2562

方式一： Iterator iterator = list.iterator(); while(iterator.hasNext()){ System.out.println(iterator.next()); } 迭代器（Iterator）　　迭代器是一种设计模式，它是一个对象，它可以遍历并选择序列中的对象，而开发人员不需要了解该序列的底层结构。迭代器通常被称为“轻量级”对

2-4 容器中元素的遍历方式

chumingqian的博客

04-28

360

1. 容器中元素的遍历容器中元素遍历的四种方式；使用迭代器； for each 语法; 增强型 for 循环； for(auto a:b)中b为一个容器，效果是利用a遍历并获得b容器中的每一个值，但是a无法影响到b容器中的元素。 for(auto &a:b)中加了引用符号，可以对容器中的内容进行赋值，即可通过对a赋值来做到容器b的内容填充。以map 容器,举例, 遍历map 容器中的元素；由于 map 是关联式容器，里面存储的元素是一个个 ”键值对 “ &

【Numpy总结】第六节：Numpy 元素的遍历

weixin_47139649的博客

08-26

2698

迭代器对象 numpy.nditer 提供了一种灵活访问一个或者多个数组元素的方式。后，可以实现对二维数组的行或者列的输出，在今后的写代码过程中，给大家带来便利；，其余的设置不常用，就不列举了；可以通过改变遍历的顺序；...

python playwright 遍历元素