javascript-改動DOM是否可以用map或forEach邏輯

javascript foreach 程式邏輯程式碼 dom

Oo_花之舞__oO 2022-12-25 14:41:26 ‧ 956 瀏覽

分享至

我有數個DOM想要改動變換他們的CSS
全部一條一條寫起來會像是這樣


try{
document.getElementsByClassName("TOP-btn")[0].getElementsByTagName("span")[0].style.display="none"
document.getElementsByClassName("TOP-btn")[1].getElementsByTagName("span")[0].style.display="none"
document.getElementsByClassName("TOP-btn")[2].getElementsByTagName("span")[0].style.display="none"
document.getElementsByClassName("TOP-btn")[3].getElementsByTagName("span")[0].style.display="none"

document.getElementsByClassName("top_btn_recommend")[0].getElementsByTagName("span")[0].style.display="none"
document.getElementsByClassName("top_btn_notice")[0].getElementsByTagName("span")[0].style.display="none"
document.getElementsByClassName("top_btn_subscription")[0].getElementsByTagName("span")[0].style.display="none"
}catch{
console.log("ok")}

如果我想要用map或forEach邏輯來整合是否可行?
我嘗試以下:


const array = ["top_btn_subscription", "top_btn_recommend",""top_btn_notice"];
array.forEach(x => document.getElementsByClassName(x).getElementsByTagName("span")[0].style.display="none");

會發生不是function的問題請問哪邊有錯誤呢?

1.還是是要用迴圈for 2.還是說這種狀況數量不多就這樣不用統整?

看更多先前的討論...收起先前的討論...

淺水員 iT邦大師 6 級 ‧ 2022-12-25 14:56:10 檢舉

你的 x 是 string
string 沒有 getElementsByTagName 可以用

Oo_花之舞__oO iT邦新手 1 級 ‧ 2022-12-25 15:42:14 檢舉

改了之後還是is not a function

japhenchen iT邦超人 1 級 ‧ 2022-12-26 09:14:19 檢舉

不熟練pureJS但要快速上手的話，可以搭各大framework ..... 像vue或jquery

froce iT邦大師 1 級 ‧ 2022-12-26 10:16:14 檢舉

vue 你不熟 pureJS 也不太能寫啦，話說我也是學vue才開始熟悉 pureJS 的。

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

3 個回答

deh

iT邦研究生 1 級 ‧ 2022-12-25 16:19:20

最佳解答

const elements = [
  document.getElementsByClassName("TOP-btn"),
  document.getElementsByClassName("top_btn_recommend"),
  document.getElementsByClassName("top_btn_notice"),
  document.getElementsByClassName("top_btn_subscription")
];

try {
  elements.forEach((elementList) => {
    elementList.forEach((element) => {
      // Get the first span element within the element
      const span = element.getElementsByTagName("span")[0];
      // Set the display style to "none"
      span.style.display = "none";
    });
  });
} catch {
  console.log("ok");
}

回應 1
分享
檢舉

Oo_花之舞__oO iT邦新手 1 級 ‧ 2022-12-29 12:43:36 檢舉

謝謝前輩的指教

登入發表回應

froce

iT邦大師 1 級 ‧ 2022-12-26 08:18:22

try{
    Array.from(document.getElementsByClassName("TOP-btn")).forEach((elm)=>{
        elm.getElementsByTagName("span")[0].style.display="none"
    })

    // 下面三個沒辦法用簡單的selector清楚表達，建議不要放到迴圈
    document.getElementsByClassName("top_btn_recommend")[0].getElementsByTagName("span")[0].style.display="none"
    document.getElementsByClassName("top_btn_notice")[0].getElementsByTagName("span")[0].style.display="none"
    document.getElementsByClassName("top_btn_subscription")[0].getElementsByTagName("span")[0].style.display="none"
}catch{
    console.log("ok")
}

另外這幾個元素我覺得你會需要弄成一個group，建議乾脆弄個array或閉包存起來。

另外建議這幾個都加個共同沒有style的class，這樣就可以直接用selector選了。

回應 1
分享
檢舉

Oo_花之舞__oO iT邦新手 1 級 ‧ 2022-12-29 12:43:42 檢舉

謝謝前輩的指教

登入發表回應

㊣浩瀚星空㊣

iT邦大神 1 級 ‧ 2022-12-26 23:10:33

我記得當使用 document.getElementsByClassName 本身就可以取得陣列才對。
這樣可以搭配forEach或是直接用for來處理
原生JS我太久沒寫了，網路上找到一個示意的寫法給你參考。
這是用FOR來處理的。

const allOrangeJuiceByClass = document.getElementsByClassName('orange juice');
let result = "document.getElementsByClassName('orange juice')";
for (let i = 0; i < allOrangeJuiceByClass.length; i++) {
  result += `\n  ${allOrangeJuiceByClass[i].textContent}`;
}