題目1: dom對(duì)象的innerText和innerHTML有什么區(qū)別撕捍?
Element.innerHTML 屬性設(shè)置或獲取描述元素后代的HTML語句。Element.innerText innerText是一個(gè)可寫屬性蜕提,返回元素內(nèi)包含的文本內(nèi)容,在多層次的時(shí)候會(huì)按照元素由淺到深的順序拼接其內(nèi)容
題目2: elem.children和elem.childNodes的區(qū)別靶端?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id = 'app'>
ddd
<span>span標(biāo)簽</span>
<p><span>111</span>p標(biāo)簽</p>
</div>
</body>
</html>
通過對(duì)比我們可以發(fā)現(xiàn)
children:子元素列表(HTMLCollection)谎势,當(dāng)前元素的子元素的集合
childNodes:子元素列表(NodeList)凛膏,當(dāng)前元素的子元素以及文本(空格也算文本)的集合
題目3:查詢?cè)赜袔追N常見的方法?ES5的元素選擇方法是什么?
getElementById()getElementById方法返回匹配指定ID屬性的元素節(jié)點(diǎn)脏榆。如果沒有發(fā)現(xiàn)匹配的節(jié)點(diǎn)猖毫,則返回null。這也是獲取一個(gè)元素最快的方法
var elem = document.getElementById("test");
諸如此類的還有g(shù)etElementByClassName()须喂、getElementsByTagName()吁断、getElementsByName()、querySelector()
題目4:如何創(chuàng)建一個(gè)元素坞生?如何給元素設(shè)置屬性仔役?如何刪除屬性
通過createElement()方法創(chuàng)建元素。通過元素的setAttribute()方法給元素設(shè)置屬性是己。通過元素的removeAttribute()刪除屬性又兵。
題目5:如何給頁面元素添加子元素?如何刪除頁面元素下的子元素?
appendChild()
insertBefore()
removeChild()
題目6: element.classList有哪些方法卒废?如何判斷一個(gè)元素的 class 列表中是包含某個(gè) class沛厨?如何添加一個(gè)class?如何刪除一個(gè)class?
只支持ie10以上(一般用不了)
定義和用法
classList 屬性返回元素的類名升熊。
該屬性用于在元素中添加俄烁,移除及切換 CSS 類。
classList 屬性是只讀的级野,但你可以使用 add() 和 remove() 方法修改它页屠。
語法
element.classList
Properties
屬性 Description
length 返回類列表中類的數(shù)量 該屬性是只讀的
方法
方法 描述
add(class1, class2, ...) 在元素中添加一個(gè)或多個(gè)類名。
如果指定的類名已存在蓖柔,則不會(huì)添加
contains(class) 返回布爾值辰企,判斷指定的類名是否存在。
可能值:
true - 元素包已經(jīng)包含了該類名
false - 元素中不存在該類名
item(index) 返回類名在元素中的索引值况鸣。索引值從 0 開始牢贸。
如果索引值在區(qū)間范圍外則返回 null
remove(class1, class2, ...) 移除元素中一個(gè)或多個(gè)類名。
注意: 移除不存在的類名镐捧,不會(huì)報(bào)錯(cuò)潜索。
toggle(class, true|false) 在元素中切換類名。
第一個(gè)參數(shù)為要在元素中移除的類名懂酱,并返 回 false竹习。
如果該類名不存在則會(huì)在元素中添加類名,并返回 true列牺。
// div是具有class =“foo bar”的<div>元素的對(duì)象引用
div.classList.remove("foo");
div.classList.add("anotherclass");
// 如果visible被設(shè)置則刪除它整陌,否則添加它
div.classList.toggle("visible");
// 添加/刪除 visible,取決于測(cè)試條件,i小于10
div.classList.toggle("visible", i < 10);
//返回布爾值泌辫,判斷指定的類名是否存在随夸。
alert(div.classList.contains("foo"));
//添加或刪除多個(gè)類
div.classList.add("foo","bar");
div.classList.remove("foo", "bar");
題目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>
//選中所有的li元素
document.getElementsByTagName('li')
document.querySelectorAll('li')
//選中btn元素
document.getElementsByClassName('btn')
document.querySelector('.btn')
</script>