題目1： dom對象的innerText和innerHTML有什么區(qū)別黍判？
- innerText返回元素內(nèi)的的文本內(nèi)容，innerHTML返回元素內(nèi)的HTML結(jié)構(gòu)（不包括元素本身）蒙畴。
<div id="box">
<a href="#">alianjie</a>
<p class='title'>my p tag</p>
<h1 id='title'>my h1</h1>
</div>
<script type="text/javascript">
var a= document.getElementById("box");
console.log(a.innerText);
console.log(a.innerHTML);
</script>
圖片.png
題目2： elem.children和elem.childNodes的區(qū)別胁附？
- elem.children:獲取指定元素的子元素列表酪耕，包含HTML元素節(jié)點(diǎn)导梆。
- elem.childNodes：獲取指定元素的子元素列表，包含HTML元素節(jié)迂烁、文本節(jié)點(diǎn)看尼、注釋節(jié)點(diǎn)。
<div id="box">
<a href="#">alianjie</a>
<p class='title'>my p tag</p>
<h1 id='title'>my h1</h1>
</div>
<script>
var a= document.getElementById("box");
console.log(a.children);
console.log(a.childNodes);
</script>
圖片.png
題目3：查詢元素有幾種常見的方法盟步？ES5的元素選擇方法是什么?
- 常見方法有g(shù)etElementById()狡忙、getElementByClassName()、getElementsByTagName()址芯、getElementsByName()灾茁。
分別通過ID、類名谷炸、標(biāo)簽名北专、name屬性名來查詢元素。 - ES5的元素選擇方法是querySelector()和querySelectorAll()旬陡，通過css選擇器查詢元素拓颓。
<div id="box">
<a href="#">alianjie</a>
<p class='title'>my p tag</p>
<h1 id='title'>my h1</h1>
</div>
<script>
document.getElementById("box");
document.getElementByClassName("title");
document.getElementByTagName("a");
document.getElementByName();
document.querySelector('#box a');//
document.querySelectorAll('#box a')
</script>
圖片.png
題目4：如何創(chuàng)建一個(gè)元素？如何給元素設(shè)置屬性描孟？如何刪除屬性
- 通過createElement()方法創(chuàng)建元素驶睦。通過元素的setAttribute()方法給元素設(shè)置屬性。通過元素的removeAttribute()刪除屬性匿醒。
<div id="box" class="box">
<a href="#">alianjie</a>
<p class='title'>my p tag</p>
<h1 id='title'>my h1</h1>
</div>
<script >
var header=document.querySelector('h1');
var link= document.createElement('a');
header.appendChild(link);
link.setAttribute('href','#','alt');
link.removeAttribute('alt');
</script>
題目5：如何給頁面元素添加子元素场航？如何刪除頁面元素下的子元素?
-通過元素的appendChild()方法給元素添加子元素，添加到元素末尾廉羔。通過元素的removeChild()方法刪除元素的子元素溉痢。
<div id="box" class="box">
<a href="#">alianjie</a>
<p class='title'>my p tag</p>
<p id='hello'>hello</p>
<h1 id='title'>my h1</h1>
</div>
<script>
var box=document.querySelector('div');
//添加子元素
var link= document.createElement('a');
box.appendChild(link);
//刪除子元素
var p=document.getElementById('hello');
box.removeChild(p);
</script>
題目6： element.classList有哪些方法？如何判斷一個(gè)元素的 class 列表中是包含某個(gè)######
class憋他？如何添加一個(gè)class孩饼？如何刪除一個(gè)class?
- 有add(添加指定的類值)、remove(刪除指定的)竹挡、item (按索引返回類值)镀娶、toggle ()、contains(檢查元素中是否有指定的類值)揪罕。
- 使用contains方法判斷一個(gè)元素的class中是否包含某個(gè)class梯码。
- add添加一個(gè)class
- remove刪除一個(gè)class宝泵。
圖片.png
題目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>
//選中所有的li元素
document.getElementsByTagName('li')
document.querySelectorAll('li')
//選中btn元素
document.getElementsByClassName('btn')
document.querySelector('.btn')
