1.dom對(duì)象的innerText和innerHTML有什么區(qū)別？
- innerText是一個(gè)可寫屬性奸腺，返回元素內(nèi)包含的文本內(nèi)容砍濒，在多層次的時(shí)候會(huì)按照元素由淺到深的順序拼接其內(nèi)容
- innerHTML屬性作用和innerText類似，但是不是返回元素的文本內(nèi)容邀桑，而是返回元素的HTML結(jié)構(gòu)祟蚀，在寫入的時(shí)候也會(huì)自動(dòng)構(gòu)建DOM
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM</title>
</head>
<body>
<div id="ct">
<p>
123
<span>456</span>
</p>
</div>
<script>
var elem = document.getElementById('ct');
console.log(elem.innerText) //123 456
console.log(elem.innerHTML) //<p>123<span>456</span></p>
</script>
</body>
</html>
2.elem.children和elem.childNodes的區(qū)別工窍？
- elem.children返回元素中的元素子節(jié)點(diǎn)；
-
elem.childNodes返回元素中的所有子節(jié)點(diǎn)（包括空白文本節(jié)點(diǎn)）前酿，childNodes中保存著一個(gè)NodeList類數(shù)組對(duì)象（有l(wèi)ength屬性但并不是Array的實(shí)例）患雏，可通過方括號(hào)語法來訪問NodeList的值。
3.查詢?cè)赜袔追N常見的方法罢维？ES5的元素選擇方法是什么?
getElementById()
getElementById方法返回匹配指定ID屬性的元素節(jié)點(diǎn)淹仑。如果沒有發(fā)現(xiàn)匹配的節(jié)點(diǎn)，則返回null肺孵。這也是獲取一個(gè)元素最快的方法.
var elem = document.getElementById("ct");getElementsByClassName()
etElementsByClassName方法返回一個(gè)類似數(shù)組的對(duì)象（HTMLCollection類型的對(duì)象）匀借，包括了所有class名字符合指定條件的元素（搜索范圍包括本身），元素的變化實(shí)時(shí)反映在返回結(jié)果中平窘。這個(gè)方法不僅可以在document對(duì)象上調(diào)用吓肋，也可以在任何元素節(jié)點(diǎn)上調(diào)用。
var elements = document.getElementsByClassName("num");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");-
getElementsByName()
getElementsByName方法用于選擇擁有name屬性的HTML元素兆龙，比如form、img敲董、frame、embed和object慰安，返回一個(gè)NodeList格式的對(duì)象腋寨，不會(huì)實(shí)時(shí)反映元素的變化。
var imgs = document.getElementsByName("image");
ES5的元素選擇方法:
-
querySelector()
querySelector方法返回匹配指定的CSS選擇器的元素節(jié)點(diǎn)化焕。如果有多個(gè)節(jié)點(diǎn)滿足匹配條件萄窜，則返回第一個(gè)匹配的節(jié)點(diǎn)。如果沒有發(fā)現(xiàn)匹配的節(jié)點(diǎn)，則返回null查刻。querySelector方法無法選中CSS偽元素键兜。
-
querySelectorAll()
querySelectorAll方法返回匹配指定的CSS選擇器的所有節(jié)點(diǎn)，返回的是NodeList類型的對(duì)象穗泵。NodeList對(duì)象不是動(dòng)態(tài)集合普气，所以元素節(jié)點(diǎn)的變化無法實(shí)時(shí)反映在返回結(jié)果中。
querySelectorAll方法的參數(shù)佃延，可以是逗號(hào)分隔的多個(gè)CSS選擇器现诀，返回所有匹配其中一個(gè)選擇器的元素。
4.如何創(chuàng)建一個(gè)元素履肃？如何給元素設(shè)置屬性仔沿？如何刪除屬性?
創(chuàng)建:
- 創(chuàng)建元素：creatElement(tagName)：用來生成HTML元素節(jié)點(diǎn)，參數(shù)為引號(hào)包裹的元素的標(biāo)簽名尺棋。
var newDiv = document.createElement("div");
- 創(chuàng)建文本節(jié)點(diǎn)：creatTextNode(content)：用來生成文本節(jié)點(diǎn)封锉，參數(shù)為所要生成的文本節(jié)點(diǎn)的內(nèi)容。
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
- 創(chuàng)建DOM片段：creatDocumentFragment()：生成一個(gè)DocumentFragment對(duì)象膘螟。該對(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)頁(yè)的重新渲染，比直接修改當(dāng)前文檔的DOM有更好的性能表現(xiàn)嘿期。
var docFragment = document.createDocumentFragment();
設(shè)置屬性:
- setAttribute(attr,value)：接收兩個(gè)參數(shù)品擎，引號(hào)包裹的屬性名與引號(hào)包裹的屬性值
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)：接收一個(gè)參數(shù)，即要?jiǎng)h除的屬性名
node.removeAttribute('id');
示例：
5.如何給頁(yè)面元素添加子元素备徐？如何刪除頁(yè)面元素下的子元素?
- 添加元素：
appendChild(): 在元素末尾添加元素
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.appendChild(newContent);
- 插入元素：
insertBefore(newchild,refchild):在某個(gè)元素之前插入元素
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.insertBefore(newContent, newDiv.firstChild);
- 替換元素
replaceChild(newEle,oldEle)接受兩個(gè)參數(shù)：要插入的元素和要替換的元素
newDiv.replaceChild(newElement, oldElement);
- 刪除元素：
removeChild()
parentNode.removeChild(childNode);
6.element.classList有哪些方法萄传？如何判斷一個(gè)元素的 class 列表中是包含某個(gè) class？如何添加一個(gè)class蜜猾？如何刪除一個(gè)class?
- add(class1,class2,…)：在元素中添加一個(gè)或多個(gè)類名秀菱。如果指定的類名已存在，則不會(huì)添加蹭睡。存在返回true衍菱，否則返回false。
- contains(class)：返回布爾值肩豁，判斷指定的類名是否存在脊串。
- item(index)：返回類名在元素中的索引值辫呻。索引值從 0 開始，在區(qū)間范圍外則返回null琼锋。
- remove(class1,class2,…)：移除元素中一個(gè)或多個(gè)類名放闺。移除不存在的類名，不會(huì)報(bào)錯(cuò)缕坎。
- toggle(class,true|false)：在元素中切換類名怖侦。第一個(gè)參數(shù)為要在元素中移除的類名，并返回 false念赶。 如果該類名不存在則會(huì)在元素中添加類名础钠，并返回 true。 第二個(gè)是可選參數(shù)叉谜，是個(gè)布爾值用于設(shè)置元素是否強(qiáng)制添加或移除類旗吁，不管該類名是否存在。
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>
<script>
var ali = document.querySelectorAll(".mod-tabs li");
var aBtn = document.querySelector(".mod-tabs .btn") //ES5
//或
var ali = document.getElementsByClassName("btn");
var aBtn = document.getElementsByTagName("li")
</script>
