每日一题：求出dom中某个元素（span）出现的次数

最新推荐文章于 2021-10-24 18:17:39 发布
最新推荐文章于 2021-10-24 18:17:39 发布
阅读量287 收藏
点赞数
分类专栏： js 算法 数据结构 文章标签： js dom html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr_carry/article/details/109158962
版权
js 同时被 3 个专栏收录
32 篇文章 1 订阅
订阅专栏
数据结构
18 篇文章 0 订阅
订阅专栏
算法
15 篇文章 0 订阅
订阅专栏

It is so eazy！

<html>
<head>
<title>span计数</title>
</head>
<body>
<div class="scroll">
  <span>span计数1</span>
  <span>span计数2</span>
  <span>span计数3</span>
  <span>span计数4</span>
  <span>span计数5</span>
</div>
</body>
<script>
  const set = new Set();
  document.querySelectorAll('span').forEach(x=>{
    set.add(x)
  })
  console.log(set.size);
</script>
</html>

梅子丨朱
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS获取数组中出现次数最多及第二多元素的方法
11-30
本文实例讲述了JS获取数组中出现次数最多及第二多元素的方法。分享给大家供大家参考，具体如下： 整型数组中出现次数最多和第二多的元素 用哈希数组 function f(arr){ var i; var length=arr.length; var hash=[];//使用哈希数组 for(i=0;i<length;i++){ if(!hash[arr[i]])hash[arr[i]]=1;//没有初始化的数组元素为undefined，undefined++为NaN else hash[arr[i]]++; } var max=0;//最多的次数 va
jquery 统计统计子标签的个数
weixin_30445169的博客
05-05 416
本文实例讲述了jQuery获得子元素个数的方法。分享给大家供大家参考。具体分析如下：//获取id=div1下的子元素的个数$('#div1').children().length;//获取id=div1下的span元素个数$('#div1').children('span').length;$(".site_show").children().length18$(".site_show").chi...
减少DOM的获取与修改次数
li123128的博客
08-24 531
　　面试官经常会问你：“平时工作中，你怎么优化自己应用的性能？” 　　 　　你回答如下：“我平时遵循以下几条原则来优化我的项目、以提高性能，主要有：” 　　 　　a. 减少DOM操作的次数（减少DOM的获取与修改次数） 　　 　　b. 减少网络请求 　　 　　c. 压缩、合并静态资源文件（css、js、img等） 　　 　　d. 小图片文件base64化处理 　　 　　e. js少用全局变量 　　...
jQuery中的DOM遍历方法
杨欢博的博客
07-14 3749
一、向上遍历 1. parent() 获取元素的直接父元素 $("span").parent().css({ "color":"red", "border":"1px solid red" }) 2. parents() 获取元素的祖先元素，直到根元素html $("span").parents().css({ "color":"red", "border":"1px solid red" }) 3. parentsUntil() 向上查找直到遇见某个祖先元素为止 $("span").pa
JS、JQ获取容器内标签的个数
weixin_30915951的博客
09-19 296
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>获取容器内标签的个数</title> </head> <body> <div class="content" id="con...
ngRemove:用于从 DOM 中删除元素但保留元素的子元素的 AngularJS 指令
06-15
AngularJS 指令从 DOM 中删除元素但保留元素的子元素。 ngRemove 是一个属性指令。 它可以放置在任何元素上，该元素将从 DOM 中删除，但是，该元素的子元素仍然存在。 用法 < div> 1 < div> 2 < span> 3 </ ...
VUE中v-on:click事件中获取当前dom元素的代码
10-18
主要介绍了VUE中v-on:click事件中获取当前dom元素的代码，文中同时给大家提到了v-on：click获取当前事件对象元素的方法,需要的朋友可以参考下
在vue中获取dom元素内容的方法
08-30
本篇文章主要介绍了在vue中获取dom元素内容的方法，可以通过给标签加ref属性，这里整理了详细的代码,有兴趣的可以了解一下
jsx-dom:使用JSX创建DOM元素
04-30
使用JSX创建DOM元素。 支持ES模块和TypeScript。 安装 npm install --save jsx-dom yarn install jsx-dom 用法 注意： jsx-dom仅是ESM。 如果您绝对需要CommonJS支持，请改用jsx-dom-cjs 。 注意：如果您使用的是 ...
react-mirror::mirror:创建React DOM元素的同步副本
03-19
React镜创建一个React DOM元素的同步副本用法请参阅下面的钩子和组件的等效用法。useMirror挂钩import { useMirror } from 'react-mirror' ;function App ( ) { const [ ref , reflection ] = useMirror ( { ...
CSS 标签权重判断的方式
m0_61123456的博客
10-24 3184
CSS权重 概念：去计算CSS选择器的优先级大小，即权重，谁的选择器权重大，css就表现谁的属性，条件 必须是对同一个html 标签的同一个属性进行设置时 才出现优先级问题，才需要去比较优先级，即权重大小。(若权重值一样，谁写在后面就用谁的属性) 方法一： ①加法 原理每种css选择器的权重值不一样，然后那么我们可以将选择器的权重值进行相加，再进行比较 分配， id选择器权重值100. class选择器权重值10. 标签选择器权重值 1.
JavaScript 最佳实践
Oscar Chen
01-13 1454
摘要： 记录JavaScript最佳实践的一些准则、以及对前文中图例的改进。
div,span标签title属性
deng131的专栏
06-07 8253
[color=red]div,span标签title属性：规定元素的额外信息（可在工具提示中显示）[/color] 鼠标放在这个层上面的时候会出现一个提示那就是你title的内容.类似于img的alt 。 今天在实现查看图片左右区域显示上一张，下一张效果时候使用到该功能，平时很少用到，原来可以使用div或者span的title属性实现鼠标放在这个层上面的时候会出现提示信息。 参考...
jq查找div下的第二个span
热门推荐
damei2017的博客
09-05 1万+
$(".total_edit").find("span").eq(1).html("");
怎样获取页面的DOM节点数量
甘焕的博客
04-11 9289
诊断内存泄漏的一个重要步骤是判断页面的DOM数量的增长情况，因此我们需要持续获取页面的DOM数量，方法如下：// 递归函数 function countNodes(node) { // 计算自身 var count = 1; // 判断是否存在子节点 if(node.hasChildNodes()) { // 获取子节点 var
js html统计出现次数,JS实现统计字符串中字符出现个数及最大个数功能示例
weixin_28903391的博客
06-04 604
本文实例讲述了JS实现统计字符串中字符出现个数及最大个数功能。分享给大家供大家参考，具体如下：js判断字符串中某字符出现的个数今天碰到的一道题，比较简单，为了防止眼高手低还是写一下吧www.jb51.net js判断字符串中某字符出现的个数var testStr = 'aoifhoiwehfoiweiwadakl';var i;var tempObj = {};for (i = 0; i <...
javascript中如何获得div中所有span对象
三味线的铲屎官的博客
12-08 1万+
if(document.querySelector){ var aSpan=document.querySelector("#id名 span") } else{ var aSpan=document.getElementById("id名").getElementsByTagName("span"); }
html中如何统计数据,28_写一个方法，统计一下html文档的元素包括元素的数量
weixin_32254267的博客
06-10 1320
一、统计html文档元素HTML：写一个方法，统计一下html文档的元素包括元素的数量标题段落文字1、js获取页面上的所有标签var a = new Set([...document.querySelectorAll('*')].map(v => v.tagName));var b = new Set(Array.from(document.querySelectorAll('*')).ma...
javascript学习手册十三：html dom——文档元素的操作（一）
最新发布
06-28
### 回答1： HTML DOM（文档对象模型）是一种编程接口，允许程序访问和操作HTML文档中的元素。使用JavaScript来操作HTML DOM可以让网页具有交互性和动态性。 在JavaScript中，可以使用getElementById，getElementsByTagName和getElementsByClassName等方法来获取页面上的元素。例如，通过getElementById("myId")可以获取id为"myId"的元素。 操作元素的属性和内容也很简单，可以使用如下方法： - 修改元素的属性：element.attribute = new value - 访问元素的属性：element.attribute - 修改元素的内容：element.innerHTML = new content - 访问元素的内容：element.innerHTML 通过操作HTML DOM，可以实现各种交互效果和动态效果。例如，可以在点击按钮时显示或隐藏元素，或在输入框中输入文本时实时更新页面内容等。 ### 回答2： HTML DOM是JavaScript操作网页中元素和属性的主要方式之一。在HTML DOM中，文档元素是指HTML页面中所有元素的根节点。文档元素的操作包括获取元素、创建元素、删除元素、修改元素属性等。 获取元素是HTML DOM操作的重要一环。在JavaScript中，可以使用getElementById()、getElementsByTagName()、getElementsByClassName()等方法获得HTML页面中的元素。其中getElementById()方法可以通过元素的ID获取该元素的引用，常用于根据ID修改元素的属性或内容。而getElementsByTagName()方法可以通过标签名获取HTML页面中所有该标签的元素，例如获取所有的h1元素，常用于对整个页面的控制。getElementsByClassName()方法可以通过class属性获取HTML页面中所有具有该class的元素。 创建元素是向HTML页面中添加元素的重要方式。可以使用createElement()方法创建一个新元素，然后使用appendChild()方法将其添加到现有元素中。例如，创建一个新的p元素，并将其添加到body元素中可以使用以下代码： var newPara = document.createElement("p"); var textNode = document.createTextNode("This is a new paragraph."); newPara.appendChild(textNode); document.body.appendChild(newPara); 删除元素也是HTML DOM中的一个常用操作。可以使用removeChild()方法删除现有元素，例如： var parent = document.getElementById("parent-id"); var child = document.getElementById("child-id"); parent.removeChild(child); 修改元素属性是HTML DOM中的另一个核心操作。可以使用setAttribute()方法修改元素的属性值，例如： var element = document.getElementById("my-id"); element.setAttribute("class", "new-class"); 可以通过HTML DOM操作文档元素，实现对页面元素和属性的各种操作。掌握HTML DOM的知识，可以更好地控制和管理HTML页面。 ### 回答3： HTML DOM是JavaScript操作网页元素的主要方式之一，它的核心在于文档对象模型（DOM，Document Object Model），需要熟悉DOM才能灵活操作网页元素。文档元素是HTML页面中的根元素，它是其他所有元素的祖先元素，也是HTML DOM操作的基础。 一、获取元素 在JavaScript中，我们可以通过各种方式来获取文档元素，例如getElementById()、getElementsByTagName()、getElementsByClassName()等。其中，通过id、标签名和类名获取元素是最常用的三种方法。 1. getElementById() 此方法用于获取具有指定id属性的元素，其语法为document.getElementById(id)。id属性在整个HTML文档中应该是唯一的。 示例：获取id为“demo”的元素 ``` var demo = document.getElementById("demo”); ``` 2. getElementsByTagName() 此方法用于获取具有指定标签名的元素，其语法为document.getElementsByTagName(tagname)。 示例：获取所有p元素 ``` var pList = document.getElementsByTagName("p"); ``` 3. getElementsByClassName() 此方法用于获取具有指定类名的元素，其语法为document.getElementsByClassName(classname)。 示例：获取类名为“red”的元素 ``` var redList = document.getElementsByClassName("red"); ``` 二、改变元素 有很多种方法可以改变文档元素的属性和样式，下面列举一些常见的方法： 1. 修改元素的文本内容 我们可以通过innerHTML属性和innerText属性来修改元素的文本内容。 innerHTML属性用于改变元素的HTML内容，其语法为element.innerHTML=new html content； innerText属性用于改变元素的纯文本内容，其语法为element.innerText=new text content； 2. 修改元素的样式 我们可以通过style属性来修改元素的样式，其中style属性包含了元素的所有样式属性。 示例：将id为“demo”的元素背景色改为红色 ``` document.getElementById("demo").style.backgroundColor = "red"; ``` 3. 创建新元素 我们可以使用document.createElement()方法来创建新元素，并通过appendChild()方法将其加入到指定的元素内。 示例：创建一个新的p元素 ``` var newP = document.createElement("p"); ``` 4. 删除元素 我们可以使用parentNode.removeChild()方法来删除指定的元素。 示例：删除id为“demo”的元素 ``` var demo = document.getElementById("demo"); demo.parentNode.removeChild(demo); ``` 三、总结 通过这篇文章的学习，我们了解了HTML DOM的基础知识和基本操作方法，例如获取元素、改变元素的属性和样式以及创建和删除元素等。掌握这些操作方法可以帮助我们更好地操作网页元素，从而实现丰富多彩的网页效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值