1.dom對(duì)象的innnertext與innnerHTML有什么區(qū)別？
innerText 會(huì)返回一個(gè)節(jié)點(diǎn)及其后代的“渲染”文本內(nèi)容
<div>abc
<p>
123
<span>456
<span>789</span>
</span>
</p>
</div>
<script>
var div = document.getElementByTag("div")[0];
var a = div.innerText
console.log(typeof a) // string
console(a)
/*
abc
123 456 789
*/
</script>
innerHTML 設(shè)置或獲取描述元素后代的HTML語(yǔ)句
var b = div.innerHTML;
console.log(typeof b) // string
console(b)
/*
abc
<p>
123
<span>456
<span>789</span>
</span>
</p>
*/
2.elem.children與elem.childnodesd的區(qū)別？
console.log(div.children)
/*
[p] //children只返回常規(guī)dom節(jié)點(diǎn)
*/
console.log(div.childNodes)
/*
[text, p, text] childNodes還會(huì)將文本當(dāng)做節(jié)點(diǎn)返回
第一個(gè)text內(nèi)容是 abc
第二個(gè)text內(nèi)容是 換行符
*/
其次，可以通過(guò)nodeType來(lái)判斷是哪種類型的節(jié)點(diǎn)惜辑，只有當(dāng)nodeType==1時(shí)才是元素節(jié)點(diǎn)，
2是屬性節(jié)點(diǎn)，3是文本節(jié)點(diǎn)
用法
node = document.documentElement.firstChild;
node.nodeType
3.查詢?cè)赜袔追N常見的方法交排？ES5的元素選擇方法是什么？
- getElementById() 返回匹配指定ID的元素
- getElementByClassName() 返回匹配指定類名的元素類似數(shù)組的對(duì)象（HTML Collection）饵筑，搜索結(jié)果是一個(gè)動(dòng)態(tài)集合个粱，任何元素的變化都會(huì)反映在返回集合中
- getElementsByTagName() 返回所有指定標(biāo)簽的元素HTML Collection對(duì)象。
getElementsByName() 返回匹配指定name屬性的元素對(duì)象NodeList 翻翩，NodeList 對(duì)象是一個(gè)節(jié)點(diǎn)的集合都许，不會(huì)實(shí)時(shí)反映元素變化
ES5方法
- querySelector() 返回匹配指定的CSS選擇器的第一個(gè)元素
- querySelectorAll() 返回匹配指定的CSS選擇器的所有節(jié)點(diǎn)，返回一個(gè)NodeList格式對(duì)象
ParentNode.querySelectorAll()
var matches = document.querySelectorAll("div.note, div.alert");
// NodeList(2)
4.如何創(chuàng)建一個(gè)元素嫂冻？如何給元素設(shè)置屬性胶征？如何刪除屬性
var div = document.createElement("div"); //創(chuàng)建元素
div.setAttribute("class","d1") // 設(shè)置屬性 設(shè)置class為d1
console.log(div) // <div class="d1"></div>
div.removeAttribute("class") // 刪除屬性 刪除class
console.log(div) // <div></div>
5.如何給頁(yè)面元素添加子元素？如何刪除頁(yè)面元素下的子元素?
<div id="d1">
<p>123</p>
</div>
var div = document.getElementById("d1");
var p2 = document.createElement("p");
p2.setAttribute("class","p2")
var text = document.createTextNode("456");
p2.appendChild(text); //往p2中添加文本節(jié)點(diǎn)
div.appendChild(p2);
console.log(text); //往div中添加子節(jié)點(diǎn)p2
var p1 = document.createElement("p");
p1.setAttribute("class","p1")
p1.appendChild(text); //往p1中添加文本節(jié)點(diǎn)
div.insertBefore(p1,p2); //往div中添加子節(jié)點(diǎn)p1桨仿，并且插到p2前面
最后的結(jié)果是
<div>
<p>123</p>
<p class="p1">456</p>
<p class="p2"></p>
</div>
p2中并無(wú)文本睛低，看來(lái)創(chuàng)建的textNode只能添加到一個(gè)節(jié)點(diǎn)中，后添加的會(huì)覆蓋前面添加的，不能像字符串那樣重復(fù)使用钱雷。
6.element.classList有哪些方法骂铁？如何判斷一個(gè)元素的 class 列表中是包含某個(gè) class？如何添加一個(gè)class罩抗？如何刪除一個(gè)class?
<div id="d1" class="foo bar"></div>
var div = document.getElementById("d1");
div.classList.remove("foo") //刪除class
div.classList.add("anotherclass"); //添加class
div.classList.add("ac1","ac2") //添加多個(gè)class拉庵，刪除也是同樣的語(yǔ)法
// <div id="d1" class="bar anotherclass ac1 ac2"></div>
console.log(div.classList.contains("foo")) // false 檢查元素中是否存在指定的類
console.log(div.classList.contains("bar")) // true
console.log(div.classList[1]) // anotherclass 根據(jù)索引訪問到每個(gè)class
div.classList.toggle("visible"); // 如果visible類存在，則刪除它并返回false套蒂，如果
不存在钞支，則添加它并返回true
div.classList.toggle("visible",i < 10) //如果第二個(gè)參數(shù)的計(jì)算結(jié)果為true，則添加指定的
類值操刀，如果計(jì)算結(jié)果為false烁挟，則刪除它
7.如何選中如下代碼所有的li元素？ 如何選中btn元素骨坑？
<div class="mod-tabs">
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
<button class="btn">點(diǎn)我</button>
</div>
var li = document.getElementsByTagName("li");
var li2 = document.querySelectorAll(".mod-tabs>ul li");
var btn = document.getElementsByClassName("btn")[0];
var btn2 = document.querySelector(".btn");
