前言:這是筆者學習之后自己的理解與整理。如果有錯誤或者疑問的地方,請大家指正,我會持續更新!
getElementById()
obj.getElementById(id) 該方法接收一個參數(該元素的id),若找到則返回該元素對象,若不存在則返回null;
任何HTML元素可以有一個 id 屬性,在文檔中該值必須唯一;
若瀏覽器中出現多個 id 名的情況,CSS樣式對所有該 id 名的元素都生效,但 javascript 腳本僅對第一個出現該 id 名的元素生效;
getElementsByTagName()
obj.getElementsByTagName(tagName) 方法接收一個參數,即要取得元素的標簽名,而返回的是包含0或多個元素的類數組對象 HTMLCollection。可以使用方括號語法或 item() 方法來訪問類數組對象中的項,length 屬性表示對象中元素的數量;
getElementsByName()
obj.getElementsByName(name) 方法會返回帶有給定 name 特性的所有元素;
IE9及以下瀏覽器只支持在表單元素上使用 getElementsByName() 方法;
IE9及以下瀏覽器中使用 getElementsByName() 方法也會返回id屬性匹配的元素。因此,不要將 name 和 id 屬性設置為相同的值;
getElementsByClassName()
HTML5 新增了 getElementsByClassName() 方法;
在 javascript 中 class 是保留字,所以使用 className 屬性來保存 HTML 的 class 屬性值;
obj.getElementsByClassName(classaName) 方法接收一個參數,是包含一個或多個類名的字符串,返回帶有指定類的所有元素的類數組對象 HTMLCollection。傳入多個類名時,類名的先后順序不重要。與 getElementsByTagName() 類似,該方法既可以用于 HTML 文檔對象 document,也可以用于 element 元素對象;
IE8及以下瀏覽器不支持 getElementsByClassName();
在操作 class 類名時,需要通過 className 屬性添加、刪除和替換類名。因為 className 是一個字符串,所以即使只修改字符串一部分,也必須每次都設置整個字符串的值。要從 className 字符串中刪除一個類名,需要把類名拆開,刪除不想要的那個,再重新拼成一個新字符串;
classList
HTML5 為所有元素添加了 classList 屬性,這個 classList 屬性是新集合類型 DOMTokenList 的實例,它有一個表示自己包含多少元素的 length 屬性,而要取得每個元素可以使用 item() 方法,也可以使用方括號法;
IE9及以下瀏覽器不支持 classList 屬性;
classList 還有以下4個方法,我們主要用這些方法操作類名,有了 classList 屬性,className屬性基本沒有什么用武之地了:
obj.classList.add(value); 將給定的字符串值添加到列表中,沒有返回值,如果值已存在,則不添加;
obj.classList.contains(value); 表示列表中是否存在給定的值,如果存在則返回true,否則返回false;
obj.classList.remove(value); 從列表中刪除給定的字符串,沒有返回值;
新聞熱點
疑難解答
圖片精選