DOM 對(duì)象的innerText和innerHTML有什么區(qū)別
- innerText
innerText是一個(gè)可寫屬性，返回元素中包含的文本內(nèi)容，在多層次的時(shí)候會(huì)按照元素之間的包含順序拼接文本內(nèi)容 - innerHtml
在讀模式下，innerHtml返回調(diào)用元素的所有子節(jié)點(diǎn)對(duì)應(yīng)的HTML的標(biāo)記；在寫模式下，會(huì)根據(jù)指定的值自動(dòng)構(gòu)建DOM樹，替換原來DOM樹
elem.children和elem.childNodes的區(qū)別
- children
children屬性是一個(gè)非標(biāo)準(zhǔn)的，他返回指定元素的子元素的集合（只返回HTML節(jié)點(diǎn)） - childNodes
childNodes接口包含特定于Node對(duì)象的方法，標(biāo)準(zhǔn)的，返回指定元素的子元素集合（HTML節(jié)點(diǎn)、屬性、文本），通過nodeType判斷節(jié)點(diǎn)的類型
var message = document.getElementById('test')
console.log(message.childNodes)
console.log(message instanceof Element)
console.log(message instanceof Node)
console.log(message.nodeType == 1)
console.log(message.children)
console.log(message instanceof Element)
console.log(message instanceof Node)
結(jié)果
查詢?cè)赜袔追N常見的方法？ES5的元素選擇方法是什么
- getElementById()
返回匹配指定ID屬性的元素節(jié)點(diǎn)。匹配不到則返回null - getElementByClassName()
返回指定class名字（可以是多個(gè)class名，用空格分隔）的類數(shù)組的對(duì)象，而且遇上你素的變化同步反映在返回結(jié)果中，不僅可以在document對(duì)象上調(diào)用也可以在任何他元素節(jié)點(diǎn)上調(diào)用 - getElementByTagName()
返回指定標(biāo)簽的元素，由于返回值是一個(gè)HTMLCollection對(duì)象，所以元素的變化會(huì)實(shí)時(shí)反映在返回的集合中不僅可以在document對(duì)象上調(diào)用也可以在任何他元素節(jié)點(diǎn)上調(diào)用 - getElementByName()
匹配擁有name屬性的HTML元素，返回一個(gè)NodeLIst格式的對(duì)象，不能實(shí)時(shí)反映元素的變化（IE瀏覽器中使用該方法會(huì)返回沒有name屬性卻擁有同名id屬性的元素，所以做到name和id盡量不同名） - ES5中的元素選擇方法
- querySeletor()
返回匹配指定的css選擇器的元素節(jié)點(diǎn)（無法匹配到偽元素） - qureySeletorAll()
返回匹配到的所有指定css選擇器（當(dāng)參數(shù)是多個(gè)用，分隔的的css選擇器時(shí)，返回所有匹配其中一個(gè)的選擇器勻元素）的元素節(jié)點(diǎn)
- querySeletor()
如何創(chuàng)建一個(gè)元素？如何給元素設(shè)置屬性？如何刪除屬性
- createElement()
生成HTML元素節(jié)點(diǎn) - createTextNode()
生成文本節(jié)點(diǎn) - createDocumentFragment()
生成一個(gè)DocumentFragment對(duì)象 - 設(shè)置元素的屬性
- getAttribute()獲取元素的屬性值
- creatAttribute()生成一個(gè)新的屬性對(duì)象節(jié)點(diǎn)，并返回
- setAttribute()設(shè)置元素屬性、
- removeAttribute()刪除元素屬性
如何給頁面元素添加子元素？如何刪除頁面元素下的子元素?
- appendChild()在元素末尾添加元素
- insertBefore()在某個(gè)元素前插入元素
- removeChild()刪除元素
element.classList有哪些方法？如何判斷一個(gè)元素的 class 列表中是包含某個(gè) class？如何添加一個(gè)class？如何刪除一個(gè)class?
var nodeBt = document.querySelector('.bt')
console.log(nodeBt.classList)
nodeBt.classList.add('cn') //新增class
nodeBt.classList.remove('cn') //刪除切換
nodeBt.classList.toggle('csn') // 新增/刪除切換
console.log(nodeBt.classList.contains('csn')) //判斷是否擁有 class ‘csn’
如何選中如下代碼所有的li元素？ 如何選中btn元素
<div class="mod-tabs">
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
<button class="btn">點(diǎn)我</button>
</div>
<script>
document.querySelectorAll('li')
document.querySelector('.btn')
</script>
