原生JS有3种方式来获取元素:
getElementById('id')
getElementsByName('name')
getElementsByTagName('tag')
getElementById是获取元素最快的方式,但我们不能给每个HTML元素都加以ID吧,所以我们需要一个很方便的通过className来获取元素:
function getElementsByClassName(className,tagName){
var ele=[],all=document.getElementsByTagName(tagName||"*");
for(var i=0;i<all.length;i++){
if(all[i].className==className){
ele[ele.length]=all[i];
}
}
return ele;
}
console.log(getElementsByClassName("entry"));
console.log(getElementsByClassName("entry","div"));
实现原理很简单,通过getElementsByTagName获取到一个元素集合,如果传入了tagname这个参数就根据传入的
tagname来获取,否则获取所有的元素,然后再一个一个元素来匹配classname是否相等..
上面这个方法很粗糙,能实现我们的基本需求,如果我们要获取的元素有多个 classname怎么办?
明显通过className==是不行了,以前的文章中我写过《js实现hasClass》,也讲述了《jQuery的hasclass的实现原理》
所以我们只要把上面两篇文章的hasclass函数搬过来就OK了,我们再次来改造下我们的getElementsByClassName函数
function getElementsByClassName(className,tagName){
var ele=[],all=document.getElementsByTagName(tagName||"*");
for(var i=0;i<all.length;i++){
if(all[i].className.match(new RegExp('(\\s|^)'+className+'(\\s|$)'))){
ele[ele.length]=all[i];
}
}
return ele;
}
这样就能处理一个元素含有多个classname的情况了
分享到:
相关推荐
下面小编就为大家带来一篇js通过classname来获取元素的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起 小编过来看看吧
以下是一个简单的示例,展示了如何通过类名获取元素: ```javascript function getElementsByClassName(n) { var classElements = [], allElements = document.getElementsByTagName('*'); for (var i = 0; i ; i...
javascript通过className获取文件元素.docx
主要介绍了JS封装通过className获取元素的函数,涉及javascript针对页面元素属性的遍历与数组相关操作技巧,需要的朋友可以参考下
在 JavaScript 中,我们可以使用多种方法来获取元素的坐标,例如使用 getBoundingClientRect() 方法可以获取元素相对于视窗的坐标,而使用 getComputedStyle() 方法可以获取元素的样式信息,包括其坐标信息。...
js 获取class的元素的方法 以及创建方法getElementsByClassName,需要的朋友可以参考一下
代码如下: function getElementsByClassName(n) { var classElements = [],... i++ ) { if (allElements[i].className == n ) { classElements[classElements.length] = allElements[i]; } } return classElements; }
代码如下:<...<head>[removed] [removed] = function(){ var topMenus = getClass(‘li’,’topMenu’);...function getClass(tagName,className) //获得标签名为tagName,类名className的元素{ if(documen
此外,`innerText`属性也是获取元素文本内容的一种方式,但它会解析HTML标签并应用内联样式,所以通常`textContent`更为推荐。在实际开发中,根据需求选择合适的方法至关重要。 压缩包中的`test.html`文件可能是...
代码如下: function getByClass(classname){ var nodes = document.getElementsByTagName(‘*’), ret=[]; for(var i=0;i<nodes.length;i++){ if(hasClass(nodes[i],classname)) ret.push(nodes[i]); } return ...
一个基本的表格由`<table>`元素作为容器,`<tr>`(行)元素来定义每一行,`<td>`(单元格)元素存放具体的数据,而`<th>`(表头)元素用于定义表头单元格。例如: ```html 姓名 年龄 张三 <td>25 ...
1.获取元素的class 属性 2. 为网页内的某个元素指定一个css样式来更改该元素的外观 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> ...
可以使用 `document.getElementById()` 方法来通过 ID 获取元素,例如: `let btn = document.getElementById('myButton');` 通过类名获取元素 可以使用 `document.getElementsByClassName()` 方法来通过类名获取...
- `children([selector])`:获取元素的子元素,可选地通过选择器进行筛选。 - `clone([withDataAndEvents], [deepWithDataAndEvents])`:创建元素的深拷贝。 - `contents()`:获取元素的所有子节点,包括文本和...
在JavaScript中,可以使用`hasClassName()`、`addClassName()`和`delClassName()`函数来管理元素的className。这些函数可以确保处理多个类名时的正确性。 3. 修改元素的style属性: 直接操作元素的`style`属性是...
在`myDOMInspector`函数中,首先通过`getElementById`获取到具有特定ID的元素,然后通过不断检查父节点的`className`是否为`colorful`或是否已到达`body`元素,来找到指定元素的最上层`div`元素。这展示了如何使用...
总的来说,JavaScript通过修改className和直接操作style属性为网页动态效果和用户交互提供了强大支持。正确理解和使用这些方法,能够帮助开发者创造出丰富、交互性强的网页应用。在实践中,应根据需求和兼容性考虑...