- dom對(duì)象的innerText和innerHTML有什么區(qū)別氓鄙?
innerText返回元素內(nèi)的的文本內(nèi)容寝志,innerHTML返回元素內(nèi)容包括標(biāo)簽
- elem.children和elem.childNodes的區(qū)別幌氮?
childNodes是子節(jié)點(diǎn)列表集合(包括空白字符等非元素類型的節(jié)點(diǎn)如文本節(jié)點(diǎn)),children是只獲取元素類型的節(jié)點(diǎn),(但在IE中纸兔,children包含注釋節(jié)點(diǎn))誓沸。這樣通過數(shù)組的下標(biāo)更能精準(zhǔn)的訪問每一個(gè)子節(jié)點(diǎn).
3.查詢?cè)赜袔追N常見的方法?ES5的元素選擇方法是什么?
4種
getElementById() 匹配指定ID屬性的元素節(jié)點(diǎn)
getElementsByClassName() 匹配一個(gè)類似數(shù)組的對(duì)象(HTMLCollection類型的對(duì)象)塔鳍,包括了所有class名字符合指定條件的元素(搜索范圍包括本身)
getElementsByName() 用于選擇擁有name屬性的HTML元素伯铣,比如form、img轮纫、frame腔寡、embed和object,返回一個(gè)NodeList格式的對(duì)象掌唾,不會(huì)實(shí)時(shí)反映元素的變化放前。
getElementsByTagName() 匹配有指定標(biāo)簽的元素(搜索范圍包括本身)。返回值是一個(gè)HTMLCollection對(duì)象
ES5的方法:
querySelector() 匹配指定的CSS選擇器的元素節(jié)點(diǎn)糯彬。如果有多個(gè)節(jié)點(diǎn)滿足匹配條件凭语,則返回第一個(gè)匹配的節(jié)點(diǎn)。
querySelectorAll() 匹配指定的CSS選擇器的所有節(jié)點(diǎn)撩扒,返回的是NodeList類型的對(duì)象叽粹。
封裝一個(gè)選擇器函數(shù)
function $(str) {
if (str.length > 0 && str[0] === '#') {
return document.querySelector(str);
}else {
return document.querySelectorAll(str);
}
}
4.如何創(chuàng)建一個(gè)元素?如何給元素設(shè)置屬性却舀?如何刪除屬性?
首先創(chuàng)建一個(gè)元素,document.createElement();
然后設(shè)置一個(gè)屬性,setAttribute(attributeName,attributeValue);
刪除一個(gè)屬性,removeAttribute(attributeName);
5.如何給頁面元素添加子元素虫几?如何刪除頁面元素下的子元素?
appendChild()方法在元素末尾添加元素
removeChild()方法可用于刪除某元素下的子元素
insertBefore(newelem,oldelem)方法在某個(gè)元素之前插入元素
當(dāng)然這些是基于父級(jí)節(jié)點(diǎn)元素的應(yīng)用.
6.element.classList有哪些方法?如何判斷一個(gè)元素的 class 列表中是包含某個(gè) class挽拔?如何添加一個(gè)class辆脸?如何刪除一個(gè)class?
>>
classList這個(gè)屬性用于返回元素的類名,作為 DOMTokenList 對(duì)象螃诅,該屬性用于在元素中添加啡氢,移除及切換 CSS 類状囱,classList 屬性是只讀的,但你可以使用 add() 和 remove() 方法修改它倘是。
如何判斷一個(gè)元素的class是否包含某個(gè)class,classList.contains('xxx');
添加一個(gè),classList.add('');
如何刪除一個(gè),classList.remove('')亭枷;
當(dāng)然還可以切換者用,classList.toggle('');
當(dāng)然還有,item()索引.
var ele = document.createElement('div');
ele.setAttribute('class','leftbar first');
ele.classList //['left','first']
ele.classList.add('float') //添加一個(gè)類
ele.classList.contains('leftbar') //是否包含leftbar返回true
ele.classList.remove('leftbar') //刪除類
ele.classList.toString() //將類數(shù)組對(duì)象轉(zhuǎn)為字符串
判斷class列表中是否包含某個(gè)class:利用contains方法搀崭。
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>
var li = document.getElementsByTagName('li');
或者 var li = document.querySelectorAll('li'),
當(dāng)然這樣返回的是NodeList對(duì)象的一個(gè)實(shí)例瘤睹。
var btn = document.getElementsByClassName('btn');
var btn = document.querySelector('.btn')