題目1：dom對象的innerText和innerHTML有什么區(qū)別？
innerHTML獲取元素節(jié)點和文本內(nèi)容.
innerText只獲取文本內(nèi)容.
題目2：elem.children和elem.childNodes的區(qū)別？
elem.children:這是一個只讀屬性，返回一個包含當(dāng)前元素的子元素集合，HTMLCollection（live）elem.childNodes:獲取所有子節(jié)點,返回一個NodeList集合,除了HTML元素節(jié)點，該屬性返回的還包括Text節(jié)點和Comment節(jié)點。準(zhǔn)確的說
elem.children和elem.childNodes是不同的2個概念，其中elem.childNodes應(yīng)該是node.childNodes。Node包括element節(jié)點，而children是element屬性，childNode是node的屬性，所以children和node沒有直接的聯(lián)系，Node的children屬性為undefined,html中空白的部分在node.childNodes中會被當(dāng)成文本節(jié)點存放在類數(shù)組對象中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="content">
<p class="para">哈哈</p>
<span class="description">你好</span> <a class="link" href="#">hello</a>
</div>
<script>
var a=document.getElementById("content").children;
console.log(a);
var b=document.getElementById("content").childNodes;
console.log(b);
</script>
</body>
</html>
結(jié)果：
題目3：查詢元素有幾種常見的方法？ES5的元素選擇方法是什么?
*getElementById():返回匹配指定ID屬性的元素節(jié)點.如果沒有發(fā)現(xiàn)匹配的節(jié)點，則返回null.這也是獲取一個元素最快的方法;
`用setAttribute()方法設(shè)置元素屬性.
getElementsByClassName():返回一個類似數(shù)組的對象（HTMLCollection類型的對象），包括了所有class名字符合指定條件的元素（搜索范圍包括本身），元素的變化實時反映在返回結(jié)果中.這個方法不僅可以在document對象上調(diào)用，也可以在任何元素節(jié)點上調(diào)用;getElementsByTagName():返回所有指定標(biāo)簽的元素（搜索范圍包括本身）.返回值是一個HTMLCollection對象，也就是說，搜索結(jié)果是一個動態(tài)集合，任何元素的變化都會實時反映在返回的集合中.這個方法不僅可以在document對象上調(diào)用，也可以在任何元素節(jié)點上調(diào)用;getElementsByName():用于選擇擁有name屬性的HTML元素，比如form、img、frame、embed和object，返回一個NodeList格式的對象，不會實時反映元素的變化;querySelector():返回匹配指定的CSS選擇器的元素節(jié)點.如果有多個節(jié)點滿足匹配條件，則返回第一個匹配的節(jié)點.如果沒有發(fā)現(xiàn)匹配的節(jié)點，則返回null;querySelectorAll():返回匹配指定的CSS選擇器的所有節(jié)點，返回的是NodeList類型的對象.NodeList對象不是動態(tài)集合，所以元素節(jié)點的變化無法實時反映在返回結(jié)果中;
題目4：如何創(chuàng)建一個元素？如何給元素設(shè)置屬性？如何刪除屬性
- 用createElement方法用來生成HTML元素節(jié)點.
var newDiv = document.createElement(“div”);
var node = document.getElementById(“div1”);
node.setAttribute(“my_attrib”, “newVal”);
- 通過
document.createTextNode()來創(chuàng)建文本節(jié)點
//1.創(chuàng)建文本節(jié)點
var textNode = document.createTextNode('學(xué)好前端')
//2.創(chuàng)建一個元素p節(jié)點，把文本節(jié)點添加到元素p中
var p =document.createElement("p")
p.appendChild(textNode)
//3 在body中顯示出創(chuàng)建的元素節(jié)點和文本節(jié)點
document.getElementByTagName('body')[0].appendChild(p)
題目5：如何給頁面元素添加子元素？如何刪除頁面元素下的子元素?
- 用createElement添加元素,appendChild()在元素的末尾添加元素,insertBefore()在某個元素之前添加元素.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加元素</title>
</head>
<body>
<div id="container">
<ul class="content">
<li class="list">1</li>
<li class="list">2</li>
<li class="list">3</li>
</ul>
</div>
<script>
var container=document.querySelector('#container');
var contents=document.querySelector('.content');
var lists =document.querySelectorAll('.list');
var paragrah=document.createElement('p');
var description=document.createTextNode('您好')；
paragraph.appendChild(description);
containers.appendChild(paragraph);
</script>
</body>
</html>
- 替換元素replaceChild(),刪除元素removeChid().在上述的代碼后再加上
contents.removeChild(lists[1]);
題目6：element.classList有哪些方法？如何判斷一個元素的 class 列表中是包含某個 class？如何添加一個class？如何刪除一個class?
element.classList的方法包括：
- classList.add()用來添加一個class
- classList.remove()用來刪除一個class
- classList.toggle("visible", i < 10); 添加/刪除 visible，取決于測試條件，i小于10
- classList.contains()用來判斷一個元素的class列表中是否包含某個class
題目7： 如何選中如下代碼所有的li元素？ 如何選中btn元素？
<div class="mod-tabs">
<ul>
<li>list1<li>
<li>list2<li>
<li>list3<li>
</ul>
<button class="btn">點我</btn>
</div>
var li =document.querySelectorAll('.mod-tabs ul li');
console.log(li)
var btn =document.querySelector('.btn');
console.log(btn)
