js通過class選擇器獲取數組的簡單介紹

本文目錄一覽:

js獲取了一個dom對象怎麼操作

js中有四種獲取dom的方法:

根據ID獲取對象:document.getElementById(ID);

根據class獲取對象數組:document.getElementsByClassName(“box”);

根據tag獲取對象數組:document.getElementsByTagName(“p”);

根據name獲取對象數組:document.getElementsByName(NAME);

用jquery選擇器就多得去了,一般都用jquery,js一大串代碼用jquery幾個符號搞定。

根據ID獲取對象:$(‘#ID’);

根據class獲取對象數組:$(“.box”);

根據tag獲取對象數組:$(“p”);;

根據name獲取對象數組:$(‘input[name=”nw”]’);

jquery 是如何通過 class 來獲取元素的?

jquery通過任何選擇器取得的對象都是jquery對象而不是JavaScript的dom對象不能用js的方法進行操作 而需要使用jquery對象支持的方法 如果是通過class的話取得的是jquery對象數組

ps 如果想把jquery對象裝換為js對象可以用以下方法

1 var obj = $(‘#xx’)[0] 獲得dom對象

2 對於數組

var obj = $(‘.xx’).each(function(){

alert(this)//這裡 this獲得的就是每一個dom對象 如果需要jquery對象 需要寫成$(this)

});

js怎麼通過class獲取元素

根據你的需求,舉例如下:

document.querySelector:獲取首個(單個)符合條件元素

document.querySelector(‘.name’); //獲取頁面上首個class屬性中包含name的元素。

document.querySelectorAll:獲取全部符合條件元素

document.querySelectorAll(‘.name’); //獲取頁面上全部class屬性中包含name的元素。

js 如何根據class獲取對象

for(var i=0;iobj.length;i++){if(obj[i].className == ‘a’)//找出span標記中class=a的那個標記{var getObj = obj[i];value = getObj.innerHTML;//獲得他的innerHTML}}//或者通過Jquery,ext,等JS插件來處理也可以。。。

源生JS通過class類名選擇元素的問題。

for(i=0;iaEle.length;i++)

{

var classes = aEle[i].className.split(/\s+/);

for(var j=0;jclasses .length;j++){

if(classes[j]==sclass)

{

aResult.push(aEle[i]); //將選出的所有元素裝入數組中

break;

}

}

}

js怎麼根據class獲取元素

非IE6,7,8可以直接用自帶的屬性 getElementsByClassName,如果需要考慮兼容,就需要自己寫了。下面是自己寫的:

function getClassName(obj,sName) //–obj是要獲取元素的父級

{ //–sName是class名字

if(document.getElementsByClassName)

{

return obj.getElementsByClassName(‘sName’);

}

else

{

var aTmp = obj.getElementsByTagName(‘*’);

var aRes=[];

var arr =[];

for(var i=0;iaTmp.length;i++)

{

arr = aTmp[i].className.split(‘ ‘);

for (var j=0;jarr.length;j++)

{

if(arr[j] == sName)

{

aRes.push(aTmp[i]);

}

}

}

return aRes;

}

}

大概思路,是將你要獲取class元素父級下的所有元素都取出來,再循環查找className,滿足的元素存到數組中,然後返回。

原創文章,作者:小藍,如若轉載,請註明出處:https://www.506064.com/zh-hant/n/245255.html

(0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
小藍的頭像小藍
上一篇 2024-12-12 13:06
下一篇 2024-12-12 13:06

相關推薦

  • JS Proxy(array)用法介紹

    JS Proxy(array)可以說是ES6中非常重要的一個特性,它可以代理一個數組,監聽數據變化並進行攔截、處理。在實際開發中,使用Proxy(array)可以方便地實現數據的監…

    編程 2025-04-29
  • Python導入數組

    本文將為您詳細闡述Python導入數組的方法、優勢、適用場景等方面,並附上代碼示例。 一、numpy庫的使用 numpy是Python中一個強大的數學庫,其中提供了非常豐富的數學函…

    編程 2025-04-29
  • Python簡單數學計算

    本文將從多個方面介紹Python的簡單數學計算,包括基礎運算符、函數、庫以及實際應用場景。 一、基礎運算符 Python提供了基礎的算術運算符,包括加(+)、減(-)、乘(*)、除…

    編程 2025-04-29
  • Python返回數組:一次性搞定多種數據類型

    Python是一種多用途的高級編程語言,具有高效性和易讀性的特點,因此被廣泛應用於數據科學、機器學習、Web開發、遊戲開發等各個領域。其中,Python返回數組也是一項非常強大的功…

    編程 2025-04-29
  • Python滿天星代碼:讓編程變得更加簡單

    本文將從多個方面詳細闡述Python滿天星代碼,為大家介紹它的優點以及如何在編程中使用。無論是剛剛接觸編程還是資深程序員,都能從中獲得一定的收穫。 一、簡介 Python滿天星代碼…

    編程 2025-04-29
  • Python去掉數組的中括號

    在Python中,被中括號包裹的數據結構是列表,列表是Python中非常常見的數據類型之一。但是,有些時候我們需要將列表展開成一維的數組,並且去掉中括號。本文將為大家詳細介紹如何用…

    編程 2025-04-29
  • Python操作數組

    本文將從多個方面詳細介紹如何使用Python操作5個數組成的列表。 一、數組的定義 數組是一種用於存儲相同類型數據的數據結構。Python中的數組是通過列表來實現的,列表中可以存放…

    編程 2025-04-29
  • Python海龜代碼簡單畫圖

    本文將介紹如何使用Python的海龜庫進行簡單畫圖,並提供相關示例代碼。 一、基礎用法 使用Python的海龜庫,我們可以控制一個小海龜在窗口中移動,並利用它的“畫筆”在窗口中繪製…

    編程 2025-04-29
  • 解析js base64並轉成unit

    本文將從多個方面詳細介紹js中如何解析base64編碼並轉成unit格式。 一、base64編碼解析 在JavaScript中解析base64編碼可以使用atob()函數,它會將b…

    編程 2025-04-29
  • Node.js使用Body-Parser處理HTTP POST請求時,特殊字符無法返回的解決方法

    本文將解決Node.js使用Body-Parser處理HTTP POST請求時,特殊字符無法返回的問題。同時,給出一些相關示例代碼,以幫助讀者更好的理解並處理這個問題。 一、問題解…

    編程 2025-04-29

發表回復

登錄後才能評論