dom對象的innerText和innerHTML有什么區別？
innerHTML:在讀模式下，innerHTML屬性返回與調用元素的所有子節點（包括元素、注釋與文本節點）對應的HTML標記；在寫模式下，innerHTML會根據指定的值創建新的DOM樹，然后用這個DOM樹完全替換調用元素原先的所有子節點。瀏覽器不同返回的innerHTML值也不一定相同。
innerText:讀模式下，innerText會按照由淺入深的順序將子文檔樹中的所有文本拼接起來；寫模式下，會刪除元素的所有子節點，插入包含相應文本值的文本節點。瀏覽器不同返回的innerText值也不一定相同。
區別：
- innerHTML已被HTML5納入規范，innerText沒有。
- innerHTML返回元素的HTML結構，innerText返回元素內包含的文本內容。
elem.children和elem.childNodes的區別？
- elem.children返回元素中的元素子節點，是HTMLCollection的實例；
- elem.childNodes返回元素中的所有子節點（包括空白文本節點），childNodes中保存著一個NodeList類數組對象（有length屬性但并不是Array的實例），可通過方括號語法來訪問NodeList的值。
大多數情況下使用children屬性，在元素只包含元素子節點時，這兩個屬性的值相同。
查詢元素有幾種常見的方法？ES5的元素選擇方法是什么?
7種查詢元素的方法，其中querySelector()和querySelectorAll()為ES5的元素選擇方法
- getElementById()：接收一個參數：要取得的元素的ID（區分大小寫，必須嚴格匹配），找到則返回該元素，沒找到返回null。
- getElementsByClassName()：接收一個參數，這個參數可以是多個空格分隔的class名字，返回同時具有這些節點的元素。
- getElementsByTagName()：接收一個參數：要取得的元素的標簽名（不區分大小寫），返回的是包含若干個元素的NodeList，在HTML中會返回一個HTMLCollection對象。
- getElementsByName()：接收一個參數：帶有給定name屬性值的元素，也會返回一個HTMLCollection對象。最常用的場景是取得單選按鈕。
- querySelector()：接收一個參數：CSS選擇器的名稱，返回匹配指定CSS選擇器的第一個元素節點（無法選中CSS偽元素），沒有發現匹配的節點則返回null。
- querySelectorAll()：接收一個參數：CSS選擇器的名稱，返回匹配指定CSS選擇器的所有節點，返回的是NodeList對象，該對象不是動態集合，元素節點的變化無法實時反映在結果中。
- elementFromPoint()：接收兩個參數：分別是相對于當前窗口左上角的橫縱坐標，單位為CSS像素，返回位于頁面指定位置的元素，如果該元素不可返回（如滾動條）則返回它的父元素，如果坐標值無意義（如負值）則返回null。
<body>
<h2 id="aa">hello</h2>
<p class="bb">world</p>
<div>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</div>
<input type="radio" name='fav-color'>red
<input type="radio" name='fav-color'>orange
<input type="radio" name='fav-color'>pink
<input type="radio" name='fav-color'>blue
<script>
var h2 = document.getElementById("aa");
console.log(h2);
var p = document.getElementsByClassName("bb");
console.log(p);
var div = document.getElementsByTagName("div");
console.log(div);
var input = document.getElementsByName("fav-color");
console.log(input);
var li = document.querySelector("li");
console.log(li);
var allLi = document.querySelectorAll("li");
console.log(allLi);
var frompoint = document.elementFromPoint(100, 100);
console.log(frompoint);
</script>
</body>
如何創建一個元素？如何給元素設置屬性？如何刪除屬性
- 創建
- 創建元素：creatElement(tagName)：用來生成HTML元素節點，參數為引號包裹的元素的標簽名。
- 創建文本節點：creatTextNode(content)：用來生成文本節點，參數為所要生成的文本節點的內容。
- 創建DOM片段：creatDocumentFragment()：生成一個DocumentFragment對象。該對象是一個存在于內存的DOM片段，不屬于當前文檔，常用來生成較復雜的DOM結構，然后插入當前文檔。這樣做的好處在于，因為DocumentFragment不屬于當前文檔，對它的任何改動，都不會引發網頁的重新渲染，比直接修改當前文檔的DOM有更好的性能表現。
<script>
var div = document.createElement("div");
div.id = "myNEWDIV";
div.className = "box";
document.body.appendChild(div);
var content = document.createTextNode("hello dolby");
div.appendChild(content);
console.log(div);
var docFrag = document.createDocumentFragment("nav");
docFrag.id = "navbar";
var a = document.createElement("a");
var a_content = document.createTextNode("導航");
a.appendChild(a_content);
docFrag.appendChild(a);
document.body.appendChild(docFrag);
</script>
- 設置屬性：setAttribute(attr,value)：接收兩個參數，引號包裹的屬性名與引號包裹的屬性值
var node = document.getElementById("div1");
node.setAttribute("my_attrib", "newVal");
等同于
var node = document.getElementById("div1");
var a = document.createAttribute("my_attrib");
a.value = "newVal";
node.setAttributeNode(a);
- 刪除屬性：removeAttribute(attr)：接收一個參數，即要刪除的屬性名
node.removeAttribute('id');
如何給頁面元素添加子元素？如何刪除頁面元素下的子元素?
- 添加元素：
appendChild():在元素末尾添加元素
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.appendChild(newContent);
- 插入元素：
insertBefore(newchild,refchild):在某個元素之前插入元素
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.insertBefore(newContent, newDiv.firstChild);
- 替換元素：
replaceChild(newEle,oldEle)接受兩個參數：要插入的元素和要替換的元素
newDiv.replaceChild(newElement, oldElement);
- 刪除元素：
removeChild()
parentNode.removeChild(childNode);
element.classList有哪些方法？如何判斷一個元素的 class 列表中是否包含某個 class？如何添加一個class？如何刪除一個class?
- 方法：
- item():取得classList中的每個元素
- add(value):將給定字符串值添加到classList類名列表中，值已經存在就不添加
- remove(value):從列表中刪除給定字符串
- contains(value):表示列表中是否存在給定的值，存在返回true，否則返回false
- toggle(value):如果列表中存在給定值，刪除它，如果不存在，添加它。
- 判斷是否包含某個class：
用contains()方法：
if(element.classList.contains("className")){
// 執行操作
}
- 添加一個class
element.classList.add("className");
- 刪除一個class
element.classList.remove("className");
- 切換一個class
element.classList.toggle('kevin')
如何選中如下代碼所有的li元素？ 如何選中btn元素？
<body>
<div class="mod-tabs">
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
<button class="btn">點我</button>
</div>
</body>
<script>
var allLi_1 = document.getElementsByTagName("li");
var allLi_2 = document.querySelectorAll(".mod-tabs ul>li");
var button = document.getElementsByClassName("btn");
console.log(allLi_1);
console.log(allLi_2);
console.log(button);
</script>
