iT邦幫忙

3

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

  • 分享至 

  • xImage

我有數個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 可以用
改了之後還是is not a function
不熟練pureJS但要快速上手的話,可以搭各大framework ..... 像vue或jquery
froce iT邦大師 1 級 ‧ 2022-12-26 10:16:14 檢舉
vue 你不熟 pureJS 也不太能寫啦,話說我也是學vue才開始熟悉 pureJS 的。
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
2
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");
}

謝謝前輩的指教

0
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

我記得當使用 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}`;
}

謝謝前輩的指教

我要發表回答

立即登入回答