1. dom對象的innerText和innerHTML有什么區(qū)別楞泼?
innerText返回元素內(nèi)的文本內(nèi)容胧华,去除了HTML標(biāo)簽
innerHTML返回元素內(nèi)的HTML結(jié)構(gòu)读宙,包括HTML標(biāo)簽
2. elem.children和elem.childNodes的區(qū)別唇聘?
對于DOM元素砰识,children是指DOM Object類型的子對象,不包括tag之間隱形存在的TextNode块茁,而childNodes包括tag之間隱形存在的TextNode對象齿坷。
3.查詢元素有幾種常見的方法?ES5的元素選擇方法是什么?
查詢元素的常見方法:
兼容性比較好:
getElementsByTagName()方法返回所有指定標(biāo)簽的元素
getElementsByName()方法選擇擁有name屬性的HTML元素
getElementById()方法返回匹配指定ID屬性的元素節(jié)點
getElementsByClassName()方法返回一個包括了所有class名字符合指定條件的元素(類數(shù)組對象)
ES5的元素選擇方法:
querySelector()方法返回匹配指定的CSS選擇器的元素節(jié)點
querySelectorAll()方法返回匹配指定的CSS選擇器的所有節(jié)點
ES5的方法:相對來說更簡潔数焊,括號內(nèi)的可以直接像CSS選擇器一樣填寫名稱
4.如何創(chuàng)建一個元素永淌?如何給元素設(shè)置屬性?
createElement()方法用來生成HTML元素節(jié)點
getAttribute()方法用于獲取元素的屬性值
setAttribute()方法用于設(shè)置元素屬性
removeAttribute()方法用于刪除元素屬性
newDiv
<div>?</div>?
newDiv.setAttribute('class','hunger')
undefined
newDiv
<div class=?"hunger">?</div>?
newDiv.getAttribute('class')
"hunger"
newDiv.removeAttribute('class')
undefined
newDiv
<div>?</div>?
5.如何給頁面元素添加子元素佩耳?如何刪除頁面元素下的子元素遂蛀?
appendChild()方法在元素末尾添加元素
insertBefore()方法在某個元素之前插入元素
removeChild()方法可用于刪除某元素下的子元素
replaceChild()接受兩個參數(shù):要插入的元素和要替換的元素
6. element.classList有哪些方法?如何判斷一個元素的 class 列表中是包含某個 class干厚?如何添加一個class李滴?如何刪除一個class螃宙?
方法
add():添加一個類名
item(index):查找第index個類名
remove(className):刪除一個類名
contains(className):是否包含指定類名,返回布爾值
var title = document.querySelector('.title')
undefined
title.classList
DOMTokenList ["title", value: "title"]
title.classList.add('active')
undefined
title.classList.remove('active')
undefined
title.classList.contains('title')
true
7.如何選中如下代碼所有的li元素? 如何選中btn元素所坯?
<div class="mod-tabs">
<ul>
<li>list1<li>
<li>list2<li>
<li>list3<li>
</ul>
<button class="btn">點我</btn>
</div>
選中所有的li元素
document.getElementsByTagName('li')
document.querySelectorAll('li')
選中btn元素
document.getElementsByClassName('btn')
document.querySelector('.btn')