dom對象的innerText和innerHTML有什么區(qū)別？
innerHTML:在讀模式下莺奸，innerHTML屬性返回與調(diào)用元素的所有子節(jié)點（包括元素冀宴、注釋與文本節(jié)點）對應(yīng)的HTML標(biāo)記；在寫模式下甚疟，innerHTML會根據(jù)指定的值創(chuàng)建新的DOM樹逃延，然后用這個DOM樹完全替換調(diào)用元素原先的所有子節(jié)點。瀏覽器不同返回的innerHTML值也不一定相同讽膏。
innerText:讀模式下拄丰，innerText會按照由淺入深的順序?qū)⒆游臋n樹中的所有文本拼接起來愈案；寫模式下，會刪除元素的所有子節(jié)點遭铺，插入包含相應(yīng)文本值的文本節(jié)點。瀏覽器不同返回的innerText值也不一定相同甫题。
區(qū)別：
- innerHTML已被HTML5納入規(guī)范涂召，innerText沒有。
- innerHTML返回元素的HTML結(jié)構(gòu)炎码，innerText返回元素內(nèi)包含的文本內(nèi)容秋泳。
elem.children和elem.childNodes的區(qū)別？
- elem.children返回元素中的元素子節(jié)點歉闰，是HTMLCollection的實例卓起；
- elem.childNodes返回元素中的所有子節(jié)點（包括空白文本節(jié)點），childNodes中保存著一個NodeList類數(shù)組對象（有l(wèi)ength屬性但并不是Array的實例）昼弟，可通過方括號語法來訪問NodeList的值饲握。
大多數(shù)情況下使用children屬性，在元素只包含元素子節(jié)點時衰粹，這兩個屬性的值相同笆怠。
查詢元素有幾種常見的方法？ES5的元素選擇方法是什么?
7種查詢元素的方法蹬刷，其中querySelector()和querySelectorAll()為ES5的元素選擇方法
- getElementById()：接收一個參數(shù)：要取得的元素的ID（區(qū)分大小寫，必須嚴(yán)格匹配）办成，找到則返回該元素泡态，沒找到返回null。
- getElementsByClassName()：接收一個參數(shù)迂卢，這個參數(shù)可以是多個空格分隔的class名字某弦，返回同時具有這些節(jié)點的元素桐汤。
- getElementsByTagName()：接收一個參數(shù)：要取得的元素的標(biāo)簽名（不區(qū)分大小寫），返回的是包含若干個元素的NodeList靶壮，在HTML中會返回一個HTMLCollection對象怔毛。
- getElementsByName()：接收一個參數(shù)：帶有給定name屬性值的元素，也會返回一個HTMLCollection對象腾降。最常用的場景是取得單選按鈕。
- querySelector()：接收一個參數(shù)：CSS選擇器的名稱螃壤，返回匹配指定CSS選擇器的第一個元素節(jié)點（無法選中CSS偽元素）抗果，沒有發(fā)現(xiàn)匹配的節(jié)點則返回null。
- querySelectorAll()：接收一個參數(shù)：CSS選擇器的名稱映穗，返回匹配指定CSS選擇器的所有節(jié)點窖张，返回的是NodeList對象，該對象不是動態(tài)集合蚁滋，元素節(jié)點的變化無法實時反映在結(jié)果中。
- elementFromPoint()：接收兩個參數(shù)：分別是相對于當(dāng)前窗口左上角的橫縱坐標(biāo)赘淮，單位為CSS像素辕录，返回位于頁面指定位置的元素，如果該元素不可返回（如滾動條）則返回它的父元素梢卸，如果坐標(biāo)值無意義（如負(fù)值）則返回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>
如何創(chuàng)建一個元素？如何給元素設(shè)置屬性蛤高？如何刪除屬性
- 創(chuàng)建
- 創(chuàng)建元素：creatElement(tagName)：用來生成HTML元素節(jié)點蚣旱，參數(shù)為引號包裹的元素的標(biāo)簽名。
- 創(chuàng)建文本節(jié)點：creatTextNode(content)：用來生成文本節(jié)點戴陡，參數(shù)為所要生成的文本節(jié)點的內(nèi)容塞绿。
- 創(chuàng)建DOM片段：creatDocumentFragment()：生成一個DocumentFragment對象。該對象是一個存在于內(nèi)存的DOM片段恤批，不屬于當(dāng)前文檔异吻，常用來生成較復(fù)雜的DOM結(jié)構(gòu)，然后插入當(dāng)前文檔喜庞。這樣做的好處在于诀浪，因為DocumentFragment不屬于當(dāng)前文檔，對它的任何改動延都，都不會引發(fā)網(wǎng)頁的重新渲染雷猪，比直接修改當(dāng)前文檔的DOM有更好的性能表現(xiàn)。
<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("導(dǎo)航");
a.appendChild(a_content);
docFrag.appendChild(a);
document.body.appendChild(docFrag);
</script>
- 設(shè)置屬性：setAttribute(attr,value)：接收兩個參數(shù)晰房，引號包裹的屬性名與引號包裹的屬性值
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)：接收一個參數(shù)求摇，即要刪除的屬性名
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)接受兩個參數(shù)：要插入的元素和要替換的元素
newDiv.replaceChild(newElement, oldElement);
- 刪除元素：
removeChild()
parentNode.removeChild(childNode);
element.classList有哪些方法？如何判斷一個元素的 class 列表中是否包含某個 class月帝？如何添加一個class躏惋？如何刪除一個class?
- 方法：
- item():取得classList中的每個元素
- add(value):將給定字符串值添加到classList類名列表中，值已經(jīng)存在就不添加
- remove(value):從列表中刪除給定字符串
- contains(value):表示列表中是否存在給定的值嚷辅，存在返回true簿姨，否則返回false
- toggle(value):如果列表中存在給定值，刪除它簸搞，如果不存在扁位，添加它。
- 判斷是否包含某個class：
用contains()方法：
if(element.classList.contains("className")){
// 執(zhí)行操作
}
- 添加一個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>
