在 JavaScript 內建的核心中,document 物件及 Element 物件總共可以透過三個方式來獲取其下的元素,分別是:
getElementById('id')
getElementsByName('name')
getElementsByTagName('tag')
這些方法就跟它們的名字一樣,分別是依照 id, name, tag 來獲取元素。
因在同一份文件中,id 是具有唯一性的,所以 getElementById(id) 的回傳值是單一物件可以直接使用;而其他則會傳回一個依照具有該屬性的元素在文件中出現順序排列的陣列,使用時必須指定陣列編號,如: array[0] 代表第一個元素。
可是在設計網頁時,最常常需要使用到的 class 卻沒有相對應的方法可以去獲取 className 相同的元素。
沒有沒關係,我們自己寫一個,而且代碼非常簡短只有下面幾句。
function getElementsByClassName(n) {
var el = [],
_el = document.getElementsByTagName('*');
for (var i=0; i<_el.length; i++ ) {
if (_el[i].className == n ) {
el[el.length] = _el[i];
}
}
return el;
}上面這段代碼將會傳回一個元素陣列,這些元素的共通點就是它們的 class 名稱都一樣。
下面這段代碼是 getElementsByClassName(’className’) 眾多應用的其中一種,可以將文件中所有 className 為 ‘black’ 的元素的 className 改為 ‘red’。
var classBlack = getElementsByClassName('black');
for (var i=0; i<classBlack.length; i++) {
classBlack[i].className = 'red';
}
本文出自 51CTO.COM技术博客
分享到:
相关推荐
javascript通过className获取文件元素.docx
本篇文章主要是对javascript通过className来获取元素的简单示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
下面小编就为大家带来一篇js通过classname来获取元素的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起 小编过来看看吧
主要介绍了JS封装通过className获取元素的函数,涉及javascript针对页面元素属性的遍历与数组相关操作技巧,需要的朋友可以参考下
整理的10大JavaScript函数,prototype的$函数,隐藏、显示元素函数,通过className获取DOM元素函数
代码如下:<...<head>[removed] [removed] = function(){ var topMenus = getClass(‘li’,’topMenu’);...function getClass(tagName,className) //获得标签名为tagName,类名className的元素{ if(documen
代码如下: 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 ...
代码如下: function getElementsByClassName(n) { var classElements = [],... i++ ) { if (allElements[i].className == n ) { classElements[classElements.length] = allElements[i]; } } return classElements; }
安装npm: npm install classname 或者只是在浏览器中加载classname.js ,然后直接调用它。文档 classname ( 1 , 'one' , false , 'two' ) ; // '1 one two'classname ( { one : true , two : false , three : true} ...
js 获取class的元素的方法 以及创建方法getElementsByClassName,需要的朋友可以参考一下
1.获取元素的class 属性 2. 为网页内的某个元素指定一个css样式来更改该元素的外观 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> ...
18.4.1 使用Ajax从文件中获取文本 18.4.2 使用Ajax从文件中获取XML 18.4.3 Ajax和表单 18.5 Ajax和JSON 18.5.1 JSON数据结构 18.5.2 使用JSON的步骤 18.5.3 JSON综合示例 18.5...
本文实例讲述了JavaScript实现获取dom中class的方法。分享给大家供大家参考。具体实现方法如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></...
需要注意的是: 注意大小写: javascript对大小写十分敏感,className不能够把“N”写成“n”,cssText也不能够把“T”写成“t”,否则无法实现效果。 调用方法: 如果改变className,则事先在样式表中申明类,但...
B 使用className 属性 Javascript 还可以通过className 属性灵活的更改一个标签元素的CSS 类选择器来实现样式的变化。 代码示例: 代码如下: <html> <head> <title>追加CSS类别</title
查看ClassName的小工具,能看到任意控件的ClassName和Text属性