dom對(duì)象的innerText和innerHTML有什么區(qū)別浦辨？

• innerText是一個(gè)可寫屬性并淋，返回元素內(nèi)包含的文本內(nèi)容渐白，在多層次的時(shí)候會(huì)按照元素由淺到深的順序拼接其內(nèi)容

<div>
    <p>
        123
        <span>456</span>
    </p>
</div>

外層div的innerText返回內(nèi)容是 "123456"

• innerHTML屬性作用和innerText類似倒脓，但是不是返回元素的文本內(nèi)容斩箫，而是返回元素的HTML結(jié)構(gòu)，在寫入的時(shí)候也會(huì)自動(dòng)構(gòu)建DOM

<div>
    <p>
        123
        <span>456</span>
    </p>
</div>

外層div的innerHTML返回內(nèi)容是 "<p>123<span>456</span></p>"

elem.children和elem.childNodes的區(qū)別蝇恶？

• children：子元素列表（HTMLCollection）
• childNodes：子元素列表（NodeList）

查詢?cè)赜袔追N常見的方法悉稠？ES5的元素選擇方法是什么?

• getElementById()

getElementById方法返回匹配指定ID屬性的元素節(jié)點(diǎn)。如果沒有發(fā)現(xiàn)匹配的節(jié)點(diǎn)艘包，則返回null。這也是獲取一個(gè)元素最快的方法

var elem = document.getElementById("test");

• getElementsByClassName()

getElementsByClassName方法返回一個(gè)類似數(shù)組的對(duì)象（HTMLCollection類型的對(duì)象）耀盗，包括了所有class名字符合指定條件的元素（搜索范圍包括本身）想虎，元素的變化實(shí)時(shí)反映在返回結(jié)果中。這個(gè)方法不僅可以在document對(duì)象上調(diào)用叛拷，也可以在任何元素節(jié)點(diǎn)上調(diào)用舌厨。

var elements = document.getElementsByClassName(names);

getElementsByClassName方法的參數(shù)，可以是多個(gè)空格分隔的class名字忿薇，返回同時(shí)具有這些節(jié)點(diǎn)的元素裙椭。

document.getElementsByClassName('red test');

• getElementsByTagName()

getElementsByTagName方法返回所有指定標(biāo)簽的元素（搜索范圍包括本身）。返回值是一個(gè)HTMLCollection對(duì)象署浩，也就是說揉燃，搜索結(jié)果是一個(gè)動(dòng)態(tài)集合，任何元素的變化都會(huì)實(shí)時(shí)反映在返回的集合中筋栋。這個(gè)方法不僅可以在document對(duì)象上調(diào)用炊汤，也可以在任何元素節(jié)點(diǎn)上調(diào)用。

var paras = document.getElementsByTagName("p");

上面代碼返回當(dāng)前文檔的所有p元素節(jié)點(diǎn)弊攘。注意抢腐，getElementsByTagName方法會(huì)將參數(shù)轉(zhuǎn)為小寫后，再進(jìn)行搜索襟交。

• getElementsByName()

getElementsByName方法用于選擇擁有name屬性的HTML元素迈倍，比如form、img捣域、frame啼染、embed和object宴合，返回一個(gè)NodeList格式的對(duì)象，不會(huì)實(shí)時(shí)反映元素的變化提完。

// 假定有一個(gè)表單是<form name="x"></form>
var forms = document.getElementsByName("x");
forms[0].tagName // "FORM"

注意形纺，在IE瀏覽器使用這個(gè)方法，會(huì)將沒有name屬性徒欣、但有同名id屬性的元素也返回逐样，所以name和id屬性最好設(shè)為不一樣的值。

• querySelector()

querySelector方法返回匹配指定的CSS選擇器的元素節(jié)點(diǎn)打肝。如果有多個(gè)節(jié)點(diǎn)滿足匹配條件脂新，則返回第一個(gè)匹配的節(jié)點(diǎn)。如果沒有發(fā)現(xiàn)匹配的節(jié)點(diǎn)粗梭，則返回null争便。

var el1 = document.querySelector(".myclass");
var el2 = document.querySelector('#myParent > [ng-click]');

querySelector方法無法選中CSS偽元素。

• querySelectorAll()

querySelectorAll方法返回匹配指定的CSS選擇器的所有節(jié)點(diǎn)断医，返回的是NodeList類型的對(duì)象滞乙。NodeList對(duì)象不是動(dòng)態(tài)集合，所以元素節(jié)點(diǎn)的變化無法實(shí)時(shí)反映在返回結(jié)果中鉴嗤。

elementList = document.querySelectorAll(selectors);

querySelectorAll方法的參數(shù)斩启，可以是逗號(hào)分隔的多個(gè)CSS選擇器，返回所有匹配其中一個(gè)選擇器的元素醉锅。

var matches = document.querySelectorAll("div.note, div.alert");

上面代碼返回class屬性是note或alert的div元素兔簇。

• elementFromPoint()

elementFromPoint方法返回位于頁面指定位置的元素。

var element = document.elementFromPoint(x, y);

上面代碼中硬耍，elementFromPoint方法的參數(shù)x和y垄琐，分別是相對(duì)于當(dāng)前窗口左上角的橫坐標(biāo)和縱坐標(biāo)，單位是CSS像素经柴。

elementFromPoint方法返回位于這個(gè)位置的DOM元素狸窘，如果該元素不可返回（比如文本框的滾動(dòng)條），則返回它的父元素（比如文本框）口锭。如果坐標(biāo)值無意義（比如負(fù)值）朦前，則返回null。

如何創(chuàng)建一個(gè)元素鹃操？如何給元素設(shè)置屬性韭寸？如何刪除屬性

• 創(chuàng)建一個(gè)元素
• createElement()

createElement方法用來生成HTML元素節(jié)點(diǎn)。

var newDiv = document.createElement("div");

createElement方法的參數(shù)為元素的標(biāo)簽名荆隘，即元素節(jié)點(diǎn)的tagName屬性恩伺。如果傳入大寫的標(biāo)簽名，會(huì)被轉(zhuǎn)為小寫椰拒。如果參數(shù)帶有尖括號(hào)（即<和>）或者是null晶渠，會(huì)報(bào)錯(cuò)凰荚。

• createTextNode()

createTextNode方法用來生成文本節(jié)點(diǎn)，參數(shù)為所要生成的文本節(jié)點(diǎn)的內(nèi)容褒脯。

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");

上面代碼新建一個(gè)div節(jié)點(diǎn)和一個(gè)文本節(jié)點(diǎn)

• createDocumentFragment()

createDocumentFragment方法生成一個(gè)DocumentFragment對(duì)象便瑟。

var docFragment = document.createDocumentFragment();

DocumentFragment對(duì)象是一個(gè)存在于內(nèi)存的DOM片段，但是不屬于當(dāng)前文檔番川，常常用來生成較復(fù)雜的DOM結(jié)構(gòu)到涂，然后插入當(dāng)前文檔。這樣做的好處在于颁督，因?yàn)镈ocumentFragment不屬于當(dāng)前文檔践啄，對(duì)它的任何改動(dòng)，都不會(huì)引發(fā)網(wǎng)頁的重新渲染沉御，比直接修改當(dāng)前文檔的DOM有更好的性能表現(xiàn)屿讽。

• 給元素設(shè)置屬性
• appendChild()

在元素末尾添加元素

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.appendChild(newContent);

• insertBefore()

在某個(gè)元素之前插入元素

 var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.insertBefore(newContent, newDiv.firstChild);

• replaceChild()

replaceChild()接受兩個(gè)參數(shù)：要插入的元素和要替換的元素

 newDiv.replaceChild(newElement, oldElement);

• 刪除屬性
• 刪除元素使用removeChild()方法即可

 parentNode.removeChild(childNode);

如何給頁面元素添加子元素？如何刪除頁面元素下的子元素?

1吠裆、獲取元素：
var node = document.getElementById("nav");
2伐谈、給元素添加子元素：
node.appendChild('img');
3、刪除頁面元素下的子元素：
div.removeChild("img");

element.classList有哪些方法试疙？如何判斷一個(gè)元素的 class 列表中是包含某個(gè) class衩婚？如何添加一個(gè)class？如何刪除一個(gè)class?

//添加
element.classList.add(className);
//刪除
element.classList.remove(className);
//判斷是否包含某個(gè)class
element.classList.contains(className);
//切換
element.classList.toggle(className);
//按集合中的索引返回類值
element.classList.item(number);

如何選中如下代碼所有的li元素效斑？ 如何選中btn元素？

<div class="mod-tabs">
   <ul>
       <li>list1</li>
       <li>list2</li>
       <li>list3</li>
   </ul>
   <button class="btn">點(diǎn)我</button>
</div>

<script>
    var aLi = document.querySelectorAll("li");
    var oBtn = document.querySelector(".btn");
</script>