1: dom對(duì)象的innerText和innerHTML有什么區(qū)別辕棚?
以<p id="p1">hello world <span>hello</span> </p>為例
var content = document.getElementById("p1");
console.log(content.innerHTML);//hello world <span>hello</span>
console.log(content.innerText) //hello world hello
innerHTML指的是從對(duì)象的起始位置到終止位置的全部?jī)?nèi)容,包括Html標(biāo)簽熬丧。
innerText 指的是從起始位置到終止位置的內(nèi)容,去除Html標(biāo)簽臊泌。
innerHTML是符合W3C標(biāo)準(zhǔn)的屬性妻怎,而innerText只適用于IE瀏覽器(現(xiàn)在也適應(yīng)chrome瀏覽器)箫锤,因此逛钻,盡可能地去使用 innerHTML僚焦,而少用innerText,如果要輸出不含HTML標(biāo)簽的內(nèi)容曙痘,可以使用innerHTML取得包含HTML標(biāo)簽的內(nèi)容后芳悲,再用正則表達(dá)式去除HTML標(biāo)簽
2: elem.children和elem.childNodes的區(qū)別?
childNodes 屬性边坤,標(biāo)準(zhǔn)的名扛,它返回指定元素的子元素集合,包括HTML節(jié)點(diǎn)茧痒,所有屬性肮韧,文本。
children 屬性旺订,非標(biāo)準(zhǔn)的弄企,它返回指定元素的子元素集合。
3:查詢(xún)?cè)赜袔追N常見(jiàn)的方法耸峭?ES5的元素選擇方法是什么?
查詢(xún)?cè)氐某R?jiàn)方法:
getElementsByTagName()方法返回所有指定標(biāo)簽的元素
getElementsByName()方法選擇擁有name屬性的HTML元素
getElementById()方法返回匹配指定ID屬性的元素節(jié)點(diǎn)
getElementsByClassName()方法返回一個(gè)包括了所有class名字符合指定條件的元素(類(lèi)數(shù)組對(duì)象)
ES5的元素選擇方法:
querySelector()方法返回匹配指定的CSS選擇器的元素節(jié)點(diǎn)
querySelectorAll()方法返回匹配指定的CSS選擇器的所有節(jié)點(diǎn)
4:如何創(chuàng)建一個(gè)元素桩蓉?如何給元素設(shè)置屬性?如何刪除屬性
createElement()方法用來(lái)生成HTML元素節(jié)點(diǎn)
getAttribute()方法用于獲取元素的屬性值
setAttribute()方法用于設(shè)置元素屬性
removeAttribute()方法用于刪除元素屬性
5:如何給頁(yè)面元素添加子元素劳闹?如何刪除頁(yè)面元素下的子元素院究?
appendChild()方法在元素末尾添加元素
insertBefore()方法在某個(gè)元素之前插入元素
removeChild()方法可用于刪除某元素下的子元素
replaceChild()接受兩個(gè)參數(shù):要插入的元素和要替換的元素
6: element.classList有哪些方法洽瞬?如何判斷一個(gè)元素的 class 列表中是包含某個(gè) class?如何添加一個(gè)class业汰?如何刪除一個(gè)class伙窃?
* add(class1, class2, ...) //在元素中添加一個(gè)或多個(gè)類(lèi)名。如果指定的類(lèi)名已存在样漆,則不會(huì)添加
* contains(class) //返回布爾值为障,判斷指定的類(lèi)名是否存在。
//true - 元素包已經(jīng)包含了該類(lèi)名
//false - 元素中不存在該類(lèi)名
* item(index) //返回類(lèi)名在元素中的索引值放祟。索引值從 0 開(kāi)始鳍怨。如果索引值在區(qū)間范圍外則返回 null
* remove(class1, class2, ...) //移除元素中一個(gè)或多個(gè)類(lèi)名。**注意**: 移除不存在的類(lèi)名,不會(huì)報(bào)錯(cuò)。
* toggle(class, true|false) //在元素中切換類(lèi)名垒探。
/*第一個(gè)參數(shù)為要在元素中移除的類(lèi)名,并返回 false侦香。
如果該類(lèi)名不存在則會(huì)在元素中添加類(lèi)名,并返回 true纽疟。
第二個(gè)是可選參數(shù)罐韩,是個(gè)布爾值用于設(shè)置元素是否強(qiáng)制添加或移除類(lèi),不管該類(lèi)名是否存在污朽。例如:
移除一個(gè) class: element.classList.toggle("classToRemove", false);
添加一個(gè) class: element.classList.toggle("classToAdd", true);
*/
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')或document.querySelectorAll('li')
//選中btn元素
document.getElementsByClassName('btn')或document.querySelector('.btn')