-
DOM對(duì)象的innerText和innerHTML有什么區(qū)別疫蔓？
共同點(diǎn)：innerHTML和innerText是doctument對(duì)象的屬性，都可以用來(lái)讀取一個(gè)元素的內(nèi)容结借。
區(qū)別1：對(duì)于一個(gè)單行無(wú)嵌套的元素筐摘，innerHTML和innerText得到的結(jié)果是相同的；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<p>A test!</p>
</body>
</html> //innerText映跟、innerHTML獲取<p>,結(jié)果都是相同的蓄拣；
區(qū)別2：對(duì)于多行或有嵌套的元素，innerHTML會(huì)獲取從開(kāi)始標(biāo)簽到結(jié)束標(biāo)簽中的所有內(nèi)容努隙，包括子元素標(biāo)簽球恤，返回整個(gè)HTML結(jié)構(gòu)；innerText會(huì)獲取從開(kāi)始標(biāo)簽到結(jié)束標(biāo)簽中的所有內(nèi)容荸镊，但不包括子元素標(biāo)簽咽斧，并把內(nèi)容拼湊在一行；
<div>
<p>
123
<span>456</span>
</p>
</div>
<!--
<div>innerHTML返回：
"
<p>
123
<span>456</span>
</p>
" -->
<!--
<div>innerText返回：
"123 456"
-->
-
elem.children和elem.childNodes的區(qū)別躬存？
相同點(diǎn)：elem.children和elem.childNodes都可以以類(lèi)數(shù)組的形式返回子元素節(jié)點(diǎn)张惹；
區(qū)別1：elem.children返回的類(lèi)數(shù)組是HTMLCollection，elem.childNodes返回的類(lèi)數(shù)組是NodeList岭洲；
區(qū)別2：elem.children只包含元素節(jié)點(diǎn)宛逗，elem.childNodes包含元素節(jié)點(diǎn)、文本節(jié)點(diǎn)盾剩、注釋節(jié)點(diǎn)等雷激。
-
查詢(xún)?cè)赜袔追N常見(jiàn)的方法？ES5的元素選擇方法是什么?
1.getElementById()：通過(guò)元素的id屬性查詢(xún)?cè)馗嫠剑舨淮嬖谑合荆瑒t返回null；
<p id="test">aa<p>
var a = document.getElementById("test") //獲取到id="test"的p元素驻粟；
2.getElementsByClassName()：返回一個(gè)類(lèi)數(shù)組的對(duì)象HTMLCollection根悼，包括了所有class名字符合指定條件的元素（搜索范圍包括本身），參數(shù)可以是多個(gè)空格分隔的class名字，返回同時(shí)具有這些節(jié)點(diǎn)的元素挤巡，元素的變化實(shí)時(shí)反映在返回結(jié)果中剩彬。：
document.getElementsByClassName('nav layout'); //獲取擁有class為nav、layout的所有元素
3.getElementsByTagName()：返回所有指定標(biāo)簽的元素（搜索范圍包括本身）玄柏。返回值是一個(gè)HTMLCollection類(lèi)數(shù)組襟衰，搜索結(jié)果是一個(gè)動(dòng)態(tài)集合，任何元素的變化都會(huì)實(shí)時(shí)反映在返回的集合中：
var paras = document.getElementsByTagName("h1"); //匹配所有的h1元素粪摘；
4.getElementsByName()：用于選擇擁有name屬性的HTML元素，比如img绍坝、form等徘意，返回一個(gè)NodeList格式的對(duì)象，不會(huì)實(shí)時(shí)反映元素的變化轩褐；
var img = document.getElementsByName("pic");
5.querySelector()：ES5新增方法椎咧，返回匹配指定的CSS選擇器的元素節(jié)點(diǎn)。如果有多個(gè)節(jié)點(diǎn)滿(mǎn)足匹配條件把介，則返回第一個(gè)匹配的節(jié)點(diǎn)勤讽。如果沒(méi)有發(fā)現(xiàn)匹配的節(jié)點(diǎn)，則返回null拗踢；
document.querySelector(".box1") //匹配class為box1的元素（若有多個(gè)脚牍，返回第一個(gè)）；
6.querySelectorAll()：與querySelector()類(lèi)似巢墅，返回匹配指定的CSS選擇器的所有節(jié)點(diǎn)诸狭，返回的是NodeList類(lèi)型的對(duì)象。NodeList對(duì)象不是動(dòng)態(tài)集合君纫，所以元素節(jié)點(diǎn)的變化無(wú)法實(shí)時(shí)反映在返回結(jié)果中驯遇；
document.querySelector(".box1") //匹配class為box1的所有元素；
-
如何創(chuàng)建一個(gè)元素蓄髓？如何給元素設(shè)置屬性叉庐？如何刪除屬性？
創(chuàng)建元素：
createElement()：可以生成HTML元素節(jié)點(diǎn)会喝；
var newDiv = document.createElement("div"); //創(chuàng)建了一個(gè)div陡叠；
設(shè)置元素屬性：
setAttribute()：為一個(gè)元素設(shè)定屬性值，若屬性不存在好乐，則創(chuàng)建這個(gè)屬性匾竿，并設(shè)值；
var p = document.getElementById("title")
p.setAttribute("class","layout") //第一個(gè)參數(shù)是屬性名蔚万，第二個(gè)為屬性值岭妖，用逗號(hào)分隔；
刪除屬性：
removeAttribute()： 刪除一個(gè)元素的指定屬性；
var p = document.getElementById("title");
p.removeAttribute("id"); // 刪除p元素的id屬性昵慌；
-
如何給頁(yè)面元素添加子元素假夺？如何刪除頁(yè)面元素下的子元素?
給頁(yè)面元素添加子元素：
1.appendChild()：在父元素的末尾添加子元素；
<div id="box"></div> //已知一個(gè)div元素斋攀；
var p = createElement("p"); //創(chuàng)建一個(gè)p元素已卷；
var div = getElementById("box"); // 通過(guò)id獲取div元素；
div.appendChild(p); //將p元素添加到div中淳蔼；
2.insertBefore()：在某個(gè)元素之前插入元素侧蘸；
<div id="box">
<a href=""></a>
</div>
var p = createElement("p");
var div = getElementById("box");
div.insertBefore(p,div.firstchid); //在div第一個(gè)子元素前插入p元素；
3.replaceChild()：用于替換元素鹉梨，參數(shù)為要插入的元素和要替換的元素讳癌，逗號(hào)分隔；
刪除頁(yè)面元素下的子元素：
removeChild()：刪除參數(shù)指定的子元素存皂，參數(shù)為子元素的節(jié)點(diǎn)對(duì)象（childNode）晌坤；
var list=document.getElementById("myList");
list.removeChild(list.childNodes[0]); //刪除list下第一個(gè)子元素；
-
element.classList有哪些方法旦袋？如何判斷一個(gè)元素的 class 列表中是包含某個(gè) class骤菠？如何添加一個(gè)class？如何刪除一個(gè)class?
element.classList返回屬性的類(lèi)名疤孕，有這么幾個(gè)屬性和方法：
1.length：返回元素類(lèi)名的個(gè)數(shù)商乎，只讀；
2.item()：支持一個(gè)參數(shù)胰柑，為類(lèi)名的索引截亦，返回對(duì)應(yīng)的類(lèi)名；
<body class="a b c"></body>
document.body.classList.item(0) // 得到a柬讨；
3.add()：接受一個(gè)class名字符串作為參數(shù)崩瓤，把該class名添加到元素上，若已存在踩官，則忽略却桶；
document.body.classList.add("d")
document.body.classList.contains("d") // ture；
4.remove() ：接受一個(gè)class名字符串作為參數(shù)蔗牡，把該class從元素上移除颖系；
document.body.classList.remove("c");
document.body.classList.contains("c"); // false；
5.contains()：接受一個(gè)class名字符串作為參數(shù)辩越，驗(yàn)證元素的class列表中是否包含該class嘁扼，返回布爾值；
document.body.classList.contains("a") // ture黔攒；
6.toggle()：接受2個(gè)參數(shù)趁啸，第一個(gè)為class名字符串强缘，第二個(gè)為布爾值，如果為true表示添加該class不傅，如果為false則表示移除該class旅掂，并返回該Boolean值。
-
如何選中如下代碼所有的li元素访娶？ 如何選中btn元素商虐？
<div class="mod-tabs">
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
<button class="btn">點(diǎn)我</button>
</div>
//獲取li
//方法1
document.querySelectorAll('li');
//方法2
document.getElementsByTagName('li');
//獲取btn
//方法1
document.getElementsByClassName('btn');
//方法2
document.querySelector('.btn')
//方法3
document.getElementsByTagName('button');
