摘要:新增選擇器和,參數都是選擇器,前者返回符合條件的第一個匹配的元素,如果沒有則返回,后者返回符合篩選條件的所有元素集合,如果沒有符合篩選條件的則返回空數組。它返回一個對象,可以通過的形式新增或修改。
H5新增API 選擇器
querySelector()和querySelectorAll(),參數都是css選擇器,前者返回符合條件的第一個匹配的元素,如果沒有則返回Null,后者返回符合篩選條件的所有元素集合,如果沒有符合篩選條件的則返回空數組。
getElementsByClassName()返回一個類似數組的對象,包含了所有指定 class 名稱的子元素。當調用發生在document對象上時, 整個DOM都會被搜索, 包含根節點,也可以在任意元素上調用。
document.querySelector("div"); //選擇第一個div document.body.querySelector("p")[0]; //body下第一個p標簽 document.getElementsByClassName("red test"); //獲取所有 class 同時包括 "red" 和 "test" 的元素classList屬性
length: 返回class數量。
add(class1, class2, ...):將給定的字符串值添加到列表中。如果值已經存在,就不添加了。
contains(class):表示列表中是否存在給定的value值,如果存在則返回true,不存在則返回false。
remove(class1, class2, ...):移除元素中一個或多個類名,移除不存在的類名不會報錯。
item(index):返回指定索引值的類名,index為數字(從0開始),索引不在范圍內返回null,不為數字會被轉成數字類型再取整數部分,若轉換失敗返回第一個類名。
toggle(value,true || false):將值為value的class在添加和移除之間切換。
classList 屬性返回的是一個 DOMTokenList 對象。此屬性不兼容IE10以下版本。
Object.prototype.toString.call(node.classList); //"[object DOMTokenList]"
相對應 className 屬性,可以設置或返回元素的 class 。返回的是字符串類型,設置會把原來的 class 值完全覆蓋。語法:node.className = className。
let oDiv = document.querySelector("div"); console.log(oDiv.className); //"wrap box" oDiv.className = "class1"; console.log(oDiv.className); //"class1"data屬性
新的HTML5標準允許在普通的元素標簽里,嵌入類似data-*的屬性,來實現一些簡單數據的存取。它的數量不受限制,并且也能由js動態修改,也支持CSS選擇器。
用getAttribute、setAttribute存取dataset。
通過.dataset API 存取dataset。它返回一個對象,可以通過node.dataset.name的形式新增或修改。
node.dataset.name = "test";內容可編輯
加有contenteditable屬性的元素,點擊可以編輯。此屬性為布爾屬性。
本地存儲i am editable
i am editable too
localStorage sessionStorage。Javascript本地存儲小結。
scrollIntoView()Element.scrollIntoView() 方法讓當前的元素滾動到瀏覽器窗口的可視區域內。scrollIntoView MDN
參數為一個布爾值,為true,元素的頂端將和其所在滾動區的可視區域的頂端對齊;如果為false,元素的底端將和其所在滾動區的可視區域的底端對齊。
element.scrollIntoView(); // 等同于element.scrollIntoView(true)
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/94767.html
摘要:接口管理獨立于的版本號,使用特性嗅探實現新舊的兼容,簡單直觀。其中在網易有錢上使用了年多,支持了網易有錢的不斷增長的業務需求,期間解決了很多遇到的通有的問題。目前還沒有在線上系統中使用,目前正逐步將整體接入網易嚴選和網易推手。 showImg(https://upload-images.jianshu.io/upload_images/277783-33c33da3e99a070d.p...
閱讀 1637·2021-09-26 09:55
閱讀 1371·2021-09-23 11:22
閱讀 2726·2021-09-06 15:02
閱讀 2640·2021-09-01 11:43
閱讀 3952·2021-08-27 13:10
閱讀 3676·2021-08-12 13:24
閱讀 2069·2019-08-30 12:56
閱讀 2991·2019-08-30 11:22