1.dom對(duì)象的innerText和innerHTML有什么區(qū)別琼了？
- innerText:得到dom對(duì)象(元素)內(nèi)部的文本內(nèi)容,如果dom對(duì)象內(nèi)部嵌套多層元素,則會(huì)按照由淺到深的順序,將各元素內(nèi)的文本連接起來(lái)
- innerHTML:得到dom對(duì)象(元素)內(nèi)部的HTML結(jié)構(gòu)
2.elem.children和elem.childNodes的區(qū)別？
<!DOCTYPE HTML>
<html>
<head>
<title>test dom</title>
</head>
<body>
<div id="test">
<h1>aaaaaa</h1>
aaaaaa
<a href="www.baidu.com">baidu</a>
<p class="testclass">bbbbbb</p>
</div>
</body>
</html>
-
elem.children:返回子HTML元素列表(不包含elem內(nèi)部的文本節(jié)點(diǎn)),是HTMLCollection類(lèi)型的對(duì)象
-
elem.childNodes:返回子元素列表(包含elem內(nèi)部的文本節(jié)點(diǎn)),是NodeList類(lèi)型的對(duì)象
- 其中第2個(gè)文本節(jié)點(diǎn)的內(nèi)容為:
換行 aaaaaa 換行
- 其中第2個(gè)文本節(jié)點(diǎn)的內(nèi)容為:
- HTMLCollection和NodeList:
- 相似:
- 都是類(lèi)數(shù)組對(duì)象迹炼，都有l(wèi)ength屬性号杏，可以通過(guò)for循環(huán)迭代
- 都是只讀的
- 都是實(shí)時(shí)的,即文檔的更改會(huì)立即反映到相關(guān)對(duì)象上面(有一個(gè)例外石挂，document.querySelectorAll返回的NodeList不是實(shí)時(shí)的)
- 都有item()方法古沥，可以通過(guò)item(index)獲取元素
- 區(qū)別:
- HTMLCollection對(duì)象具有namedItem()方法(根據(jù) Id 返回指定節(jié)點(diǎn)麻削，或者作為備用，根據(jù)字符串所表示的 name 屬性來(lái)匹配僻爽。根據(jù) name 匹配只能作為最后的依賴(lài)虫碉，并且只有當(dāng)被引用的元素支持 name 屬性時(shí)才能被匹配。)
- HTMLCollection通過(guò)屬性獲取元素可以支持id和name胸梆，而NodeList對(duì)象只支持id
- 相似:
var elem1, elem2;
// 假定在文檔中有一個(gè) <form> 元素敦捧，且它的 id 是 "myForm"：document.forms 是一個(gè) HTMLCollection
elem1 = document.forms[0];
elem2 = document.forms.item(0);
alert(elem1 === elem2); // 顯示 "true"
elem1 = document.forms["myForm"];
elem2 = document.forms.namedItem("myForm");
alert(elem1 === elem2); // 顯示 "true"
而NodeList只支持id
var divs = document.getElementsByTagName( 'div' );
var firstDiv = divs[ 0 ];
3.查詢(xún)?cè)赜袔追N常見(jiàn)的方法？ES5的元素選擇方法是什么?
- 查詢(xún)?cè)赜袔追N常見(jiàn)的方法
- getElementsById():返回匹配指定ID屬性的元素節(jié)點(diǎn)
- getElementsByClassName():返回一個(gè)類(lèi)似數(shù)組的對(duì)象（NodeList類(lèi)型的對(duì)象）碰镜，包括了所有class名字符合指定條件的元素（搜索范圍包括本身）
- getElementsByTagName():返回所有指定標(biāo)簽的元素（搜索范圍包括本身）,返回值是一個(gè)NodeList對(duì)象
- getElementsByName():用于選擇擁有name屬性的HTML元素兢卵，比如form、img绪颖、frame秽荤、embed和object，返回一個(gè)NodeList格式的對(duì)象
- ES5的元素選擇方
- querySelector():返回匹配指定的CSS選擇器的元素節(jié)點(diǎn),如果有多個(gè)節(jié)點(diǎn)滿(mǎn)足匹配條件柠横，則返回第一個(gè)匹配的節(jié)點(diǎn)
- querySelectorAll():返回匹配指定的CSS選擇器的所有節(jié)點(diǎn)窃款，返回的是NodeList類(lèi)型的對(duì)象
4.如何創(chuàng)建一個(gè)元素？如何給元素設(shè)置屬性牍氛？如何刪除屬性
-
創(chuàng)建一個(gè)元素:
- 使用createELement方法創(chuàng)建HTML元素節(jié)點(diǎn)
var newDiv = document.createELement("div");- 使用createTestNode方法創(chuàng)建文本節(jié)點(diǎn)
var newContent = document.createTextNode("Hello");- 使用createDocumentFragment方法生成一個(gè)DocumentFragment對(duì)象晨继。
var docFragment = document.createDocumentFragment(); -
給元素設(shè)置屬性
- setAttribute()方法用于設(shè)置元素屬性
//為id = div1的元素設(shè)置class=container的屬性 var node = document.getElementsById("div1"); node.setAttribute("class","container"); -
刪除屬性
- romoveAttribute()方法用于刪除元素屬性
var node = document.getElementsById("div1");
5.如何給頁(yè)面元素添加子元素？如何刪除頁(yè)面元素下的子元素?
-
添加子元素
- appendChild()用于在元素末尾添加元素
var bodylist = document.getElementsByTagName("body"); var body = bodylist[0]; var newNode = document.createElement("h2"); var newContent = document.createTextNode("zzzzzzzzzzzzzzz"); newNode.appendChild(newContent); body.appendChild(newNode);- insertBefore()在某個(gè)元素之前插入元素
body.insertBefore(newNode, body.firstChild); -
刪除子元素
- removeChild()用于刪除元素
parentNode.removeChild(childNode);
6.element.classList有哪些方法搬俊？如何判斷一個(gè)元素的 class 列表中是包含某個(gè) class紊扬？如何添加一個(gè)class蜒茄？如何刪除一個(gè)class?
-
element.classList有以下幾種方法
使用element.classList.contains()判斷一個(gè)元素的 class 列表中是包含某個(gè) class
使用element.classList.add()添加一個(gè)class
使用element.classList.remove()刪除一個(gè)class
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>
- 選中l(wèi)i元素:
querySelectorAll(".mod-tabs li")querySelectorAll("li")document.getElementsByTagName("li")
- 選中btn元素:
querySelector(".btn")document.getElementsByTagName("button")[0]document.getElementsByClassName("button")[0]
