久久精品中文字幕av,av.涩涩涩涩涩涩涩涩,亚洲国产日韩欧美精品成人久久久,成人福利电影免费在线观看,日产国产原创av,日韩av午夜激情,bt天堂中文字幕,超级碰人妻在线视频,欧美老熟妇久久一区二区

Element 對(duì)象提供了屬性和方法實(shí)現(xiàn)定位頁(yè)面元素功能。該對(duì)象與 Document 對(duì)象提供的屬性和方法實(shí)現(xiàn)定位頁(yè)面元素功能的區(qū)別在于，Document 對(duì)象定位的是 HTML 頁(yè)面中所有指定元素，而 Element 對(duì)象定位的是指定元素內(nèi)所有指定元素。 ## 定位頁(yè)面元素方法 目前 Document 對(duì)象提供實(shí)現(xiàn)定位頁(yè)面元素的方法具有如下幾種: - getElementsByTagName()方法：通過(guò)頁(yè)面元素的元素名定位元素。 - getElementsByClassName()方法：通過(guò)頁(yè)面元素的 class 屬性值定位元素。 - querySelector()方法：通過(guò) CSS 選擇器定位第一個(gè)匹配的元素。 - querySelectorAll()方法：通過(guò) CSS 選擇器定位所有匹配的元素。 接下來(lái)，我們就一一進(jìn)行學(xué)習(xí)。 ## 通過(guò)元素的元素名定位元素 其語(yǔ)法格式如下: ```javascript elements = document.getElementsByTagName(name); ``` 在上述語(yǔ)法中，name 是參數(shù)，表示所要定位元素的元素名，符號(hào)”*”表示所有元素。elements 是返回值，表示定位元素的集合，是一個(gè) NodeList 集合。 下面是使用 getElementsByTagName() 方法的示例代碼: ```javascript var elems = document.getElementsByTagName('button'); // 循環(huán)遍歷所有元素 for (var i=0; i<elems.length; i++) { var elem = elems[i]; var className = elem.className; className += ' animate'; elem.className = className; } ``` 上述代碼通過(guò) getElementsByTagName() 方法定位 HTML 頁(yè)面中元素名為 button 的元素，并遍歷所有得到的元素，為其元素的 class 屬性添加 animate 樣式。 ## 通過(guò)元素的 class 屬性值定位元素 其語(yǔ)法格式如下: ```javascript elements = document.getElementsByClassName(names); ``` 在上述語(yǔ)法中，names 是參數(shù)，表示所要定位元素的 class 屬性值列表，class 名稱通過(guò)空格分隔。 > **值得注意的是:** names 參數(shù)可以是一個(gè)樣式屬性名稱，也可以是多個(gè)樣式屬性名稱。 elements 是返回值，表示定位元素的集合，是一個(gè) NodeList 集合。 下面是使用 getElementsByClassName() 方法的示例代碼: ```javascript var elems = document.getElementsByClassName('btn'); // 循環(huán)遍歷所有元素 for (var i=0; i<elems.length; i++) { var elem = elems[i]; var className = elem.className; className += ' animate'; elem.className = className; } ``` 上述代碼通過(guò) getElementsByClassName() 方法定位 HTML 頁(yè)面中 class 屬性值為 btn 的元素，并遍歷所有得到的元素，為其元素的 class 屬性添加 animate 樣式。 #### 兼容 IE 8 及之前版本的瀏覽器 getElementsByClassName() 方法只支持 IE 9 版本及之后版本的瀏覽器。也就是說(shuō)，該方法并不支持 IE 8 及之前版本的瀏覽器。 下圖是不同瀏覽器的不同版本對(duì) getElementsByClassName() 方法的支持情況:  由于國(guó)內(nèi)的生產(chǎn)環(huán)境中，依舊存在使用 IE 8 及之前版本瀏覽器的情況。所以，我們需要自定義 getElementsByClassName() 方法解決瀏覽器的兼容問(wèn)題。 ```javascript function getElementsByClassName(element, names) { } ``` 上述自定義兼容方法接受兩個(gè)參數(shù)，element 參數(shù)表示調(diào)用 getElementsByClassName() 方法的對(duì)象（目前為 Document 對(duì)象），names 參數(shù)表示所要定位元素的 class 屬性值列表。 ```javascript function getElementsByClassName(element, names) { // 檢測(cè) getElementsByClassName() 是否可用 if (element.getElementsByClassName) { // 優(yōu)先使用 W3C 規(guī)范 return element.getElementsByClassName(names); }else { // 人為解決 IE 8 之前版本不兼容問(wèn)題 } } ``` 這里我們要優(yōu)先使用 W3C 規(guī)范的方法。所以，需要先判斷當(dāng)前瀏覽器環(huán)境是否存在 getElementsByClassName() 方法。 如果存在，就使用原本的 getElementsByClassName() 方法。如果不存在，就使用自定義代碼來(lái)實(shí)現(xiàn)。 ```javascript function getElementsByClassName(element, names) { // 檢測(cè) getElementsByClassName() 是否可用 if (element.getElementsByClassName) { // 優(yōu)先使用 W3C 規(guī)范 return element.getElementsByClassName(names); }else { // 人為解決 IE 8 之前版本不兼容問(wèn)題 // 獲取所有后代元素節(jié)點(diǎn) var elements = element.getElementsByTagName('*'); // 定義空數(shù)組 var result = []; var element, classNameStr, flag; // 將樣式名稱改為數(shù)組類型 names = names.split(' '); // 循環(huán)遍歷所有元素節(jié)點(diǎn) for (var i=0; element = elements[i]; i++) { // 獲取每個(gè)元素節(jié)點(diǎn)的樣式名稱 classNameStr = ' ' + element.className + ' '; // 開(kāi)啟開(kāi)關(guān) flag = true; // 循環(huán)遍歷所有的樣式名稱 for (var j=0, name; name = names[j]; j++) { // 判斷當(dāng)前元素節(jié)點(diǎn)的樣式名稱中是否包含指定的樣式名稱 if (classNameStr.indexOf(' ' + name + ' ') == -1){ // 如果不包含，則關(guān)閉開(kāi)關(guān)，并且結(jié)束循環(huán) flag = false; break; } } // 判斷當(dāng)前元素節(jié)點(diǎn)是否包含指定樣式名稱 if (flag) { // 如果包含，則將當(dāng)前元素節(jié)點(diǎn)添加到數(shù)組中 result.push(element); } } // 返回?cái)?shù)組(所有包含指定樣式名稱的元素節(jié)點(diǎn)) return result; } } ``` ## 通過(guò) CSS 選擇器定位元素 CSS 中的選擇器可以很便利地定位 HTML 頁(yè)面元素，DOM 的標(biāo)準(zhǔn)規(guī)范中也提供類似的方法。 - querySelector(): 定位匹配選擇器的第一個(gè)元素。 - querySelectorAll(): 定位匹配選擇器的所有元素。 #### querySelector() 方法 其語(yǔ)法格式如下: ```javascript element = document.querySelector(selectors); ``` 在上述語(yǔ)法中，selectors 是參數(shù)，表示選擇器，可以包含一個(gè)或多個(gè) CSS 選擇器，多個(gè)則以逗號(hào)分隔。element 是返回值，表示定位元素的集合，匹配的第一個(gè)元素。 下面是使用 querySelector() 方法的示例代碼: ```javascript var btn = document.querySelector(’#btn'); // 獲取定位元素的 class 屬性值 var className = btn.className; // 添加 animate 動(dòng)畫(huà)樣式 className += ' animate'; // 將新的 class 屬性值設(shè)置 btn.className = className; ``` 上述代碼通過(guò) querySelector() 方法定位 HTML 頁(yè)面中 id 屬性值為 btn 的元素，并為其元素的 class 屬性添加 animate 樣式。 #### querySelectorAll() 方法 其語(yǔ)法格式如下: ```javascript elements = document.querySelectorAll(selectors); ``` 在上述語(yǔ)法中，selectors 是參數(shù)，表示選擇器，可以包含一個(gè)或多個(gè) CSS 選擇器，多個(gè)則以逗號(hào)分隔。elements 是返回值，表示定位元素的集合，是一個(gè) NodeList 集合。 下面是使用 querySelectorAll() 方法的示例代碼: ```javascript var elems = document.querySelectorAll('button'); // 循環(huán)遍歷所有元素 for (var i=0; i<elems.length; i++) { var elem = elems[i]; var className = elem.className; className += ' animate'; elem.className = className; } ``` 上述代碼通過(guò) querySelectorAll() 方法定位 HTML 頁(yè)面中元素名為 button 的元素，并遍歷所有得到的元素，為其元素的 class 屬性添加 animate 樣式。