原生js:使用map處理getElementsByTagName返回值,並且操作dom時使“!important“生效
為什麼document.getElementsByTagName返回的值無法使用陣列方法map,因為
getElementsByTagName返回的是一個類陣列物件NodeList
類js陣列無法直接使用陣列的方法map,需要通過Array.from轉換成js陣列。
【不知出於何種原因】無法直接Array.from(document.getElementsByTagName('img'));
需要拆分成兩步
例子:
let a = document.getElementsByTagName('img');
let all_img_dom = Array.from(a);
all_img_dom.map(item=>{
item.setAttribute('style', 'display:none!important')
})
如果直接使用Element.style.display = "none!important"則後面的!important是不會生效的,所以需要使用setAttribute
相關文章
- 原生JS 操作 DOMJS
- 原生JS DOM方法JS
- js的dom操作JS
- js原生dom物件和jQuery物件可以混合使用嗎?JS物件jQuery
- 前端面試(原生js篇) – DOM前端面試JS
- 【vue系列】Virtual DOM 真的比操作原生 DOM 快嗎?Vue
- JS中DOM操作總結JS
- Calcite 使用原生的RDD 處理SparkSpark
- js原生節點操作JS
- vue js事件方法呼叫api並返回值VueJS事件API
- JS錯誤記錄 – dom操作 – 排序JS排序
- JS知識總結之DOM操作JS
- JS中的DOM— —節點以及操作JS
- Rollup處理並打包JS檔案專案例項JS
- 表格資料處理的2種寫法,偽元素和操作dom
- LocalDateTime替代Date操作處理日期時間LDA
- 原生JS中DOM節點相關API合集JSAPI
- Linux下使用Ansible處理批量操作Linux
- 0.1、JS-時間處理積累JS
- JS 操作 DOM 改變方塊顏色JS
- js中為什麼dom操作消耗效能JS
- 原生JS獲取日期段及時間比較的騷操作(基本操作)JS
- 處理可能超時的非同步操作非同步
- getElementsByTagName()
- JS21. 使用原生JS封裝一個公共的Alert外掛(HTML5: Shadow Dom)JS封裝HTML
- [譯] 探索 Angular 使用 ViewContainerRef 操作 DOMAngularViewAI
- Web全棧20201128-js的dom操作1Web全棧JS
- DOM在Ahooks中的處理過程Hook
- 原生JS--DOM怎麼玩(事件繫結相關)?JS事件
- DOM操作
- DOM 操作
- Ajax 處理時進度條使用
- js複製連結並且選中文字JS
- JS時間操作JS
- 利用 JS 進行圖片處理並生成對應粒子圖JS
- JavaScript getElementsByTagName()JavaScript
- BOM與DOM之DOM操作
- DOM0、DOM2、DOM3事件處理方式的區別是什麼?事件