1. dom對(duì)象的innerText和innerHTML有什么區(qū)別?
- innerText是所選dom節(jié)點(diǎn)的文本內(nèi)容,不含html結(jié)構(gòu)。
- innerHTML是所選dom節(jié)點(diǎn)的HTML結(jié)構(gòu)的文本,但不包含自身,outerHTML包含自身。
2.elem.children和elem.childNodes的區(qū)別?
- elem.childNodes返回的是所有子元素的節(jié)點(diǎn),包括HTML結(jié)構(gòu),屬性,文本。
- elem.children返回的是子元素的節(jié)點(diǎn),包括HTML結(jié)構(gòu),屬性,但是不包括文本。
3.查詢?cè)赜袔追N常見(jiàn)的方法?ES5的元素選擇方法是什么?
- document.getElementById(),查詢ID選擇器元素。
- document.getElementByClassName(),通過(guò)查詢?cè)氐倪x擇器名,查詢?cè)亍?/li>
- document.getElementByTagName(),通過(guò)查詢?cè)氐臉?biāo)簽名,查詢?cè)亍?/li>
ES5中選擇元素的方法,可以通過(guò)選擇元素的選擇器來(lái)是實(shí)現(xiàn)。
- document.querySelector(x),可以選擇有x選擇器的元素 ,比如<div class='lala'></div>
用document.querySelector('.lala')就可以選擇到這個(gè)元素,但是這個(gè)方法指揮選擇一個(gè)元素。 - document.querySelectorAll(x),選擇所有x選擇器的元素。
這兩種方法的選擇器寫(xiě)法和外聯(lián)式中css選擇器的寫(xiě)法相同
4.如何創(chuàng)建一個(gè)元素?如何給元素設(shè)置屬性?如何刪除屬性
創(chuàng)建元素用 document.createElement('元素標(biāo)簽名'),
用document.createElement().setAtrribute('屬性名','value')設(shè)置屬性。
用document.createElement().removeAtrribute('屬性名')刪除屬性。
5.如何給頁(yè)面元素添加子元素?如何刪除頁(yè)面元素下的子元素?
選中元素,然后調(diào)用元素節(jié)點(diǎn)的appendchild()的辦法,在元素末尾添加元素。
然后調(diào)用元素節(jié)點(diǎn)的insertBefore()的方法,可以插入元素。
選中元素,然后調(diào)用元素的removechild()辦法,刪除元素。
6. element.classList有哪些方法?如何判斷一個(gè)元素的 class 列表中是包含某個(gè) class?如何添加一個(gè)class?如何刪除一個(gè)class?
add(class1, class2, ...)在元素中添加一個(gè)或多個(gè)不存在的類名。
contains(class)返回布爾值,判斷指定的類名是否存在。
item(index)返回索引值對(duì)應(yīng)的元素類名。從 0 開(kāi)始,在區(qū)間范圍外則返回 null。
remove(class1, class2, ...)移除元素中一個(gè)或多個(gè)類名。移除不存在的類名,不會(huì)報(bào)錯(cuò)。
toggle(class, true|false)在元素中切換類名。
第一個(gè)參數(shù)為要在元素中移除的類名,并返回 false。 如果該類名不存在則會(huì)在元素中添加類名,并返回 true。 第二個(gè)是可選參數(shù),是個(gè)布爾值用于設(shè)置元素是否強(qiáng)制添加或移除類,不管該類名是否存在。
7.如何選中如下代碼所有的li元素? 如何選中btn元素?
<div class="mod-tabs">
<ul>
<li>list1<li>
<li>list2<li>
<li>list3<li>
</ul>
<button class="btn">點(diǎn)我</btn>
</div>
//選中所有的li元素
document.getElementsByTagName('li')(返回結(jié)果是一個(gè)類數(shù)組對(duì)象,HTMLCollection類型的對(duì)象)
document.querySelectorAll('li')
//選中btn元素
document.getElementsByClassName('btn')
document.querySelector('.btn')