題目1: dom對象的innerText和innerHTML有什么區(qū)別党涕?
innerHtml 屬性 可以用來讀饿敲、寫某給定的html內(nèi)容。
1)區(qū)別一 讀取的時候區(qū)別從對象起始位置到終止位置的全部內(nèi)容嗤瞎,包括html標簽
<div id="ct">
<p id="p1">hello world </p>
</div>
document.getElementById('ct').innerHtml //<p id="p1">hello world </p>
返回的是id為ct的所有標簽及內(nèi)容。
document.getElementById('ct').innerText // hello world
返回的是id為ct的內(nèi)容听系,但是除去了html標簽贝奇。
2)區(qū)別二 在個給定的html內(nèi)容寫的時候區(qū)別
document.getElementById('ct').innerHtml=‘![](chrome-search://thumb/2/2)’
是將整個內(nèi)容作為html寫入文檔中。
document.getElementById('ct').innerText =‘hello’
是把hello作為文本放入指定的元素內(nèi)部靠胜。
題目2: elem.children和elem.childNodes的區(qū)別掉瞳?
children:子元素列表(HTMLCollection)返回指定元素的子元素集合,經(jīng)測試浪漠,它只返回html節(jié)點陕习,不返回文本節(jié)點。
childNodes:可以用來獲取任何一個元素的所有子元素址愿,他是一個包含這個元素全部子元素的數(shù)組该镣。包括文本節(jié)點。
<div id="ct">
![](chrome-search://thumb/2/2)
<p>1233</p>
<a href="#">提交</a>
</div>
document.getElementsByTagName('div')[0].childNodes // [text, img, text, p, text, a, text]
document.getElementsByTagName('div')[0].children //[img, p, a]
題目3:查詢元素有幾種常見的方法响谓?ES5的元素選擇方法是什么?
1)getElementById() 返回匹配指定的ID元素的節(jié)點损合。沒有匹配返回null
2)getElementsByClassName() 返回一個類數(shù)組的對象。包括所有class名字符合指定條件的元素娘纷。
3)getElementsByTagName()返回所有指定標簽的元素嫁审。
4)getElementsByName() 用于選擇擁有name屬性的html元素。
es5方法
1)querySelector() 返回匹配指定的css選擇器的元素節(jié)點失驶。如果有多個滿足土居,則返回第一個。
2)querySelectorAll()返回匹配指定的CSS選擇器的所有節(jié)點
題目4:如何創(chuàng)建一個元素?如何給元素設置屬性擦耀?如何刪除屬性
var elem= document.createElement('img'); //創(chuàng)建元素
elem.setAttribute('src','chrome-search://thumb/2/1'); // 設置屬性
elem.removeAttribute('src'); // 刪除屬性
題目5:如何給頁面元素添加子元素棉圈?如何刪除頁面元素下的子元素?
添加子元素:
<div id="ct">
</div>
var ct= document.getElementById('ct');
var node=document.createElement('p');
ct.appendChild(node); //增加子元素
ct.removeChild(node); 刪除子元素
題目6: element.classList有哪些方法?如何判斷一個元素的 class 列表中是包含某個 class分瘾?如何添加一個class?如何刪除一個class?
<h1 class="title">my title</h1>
var title=document.querySelector('.title');
title.classList.add('active') //<h1 class="title active">my title</h1> 添加class active
title.classList.remove('title'); // <h1 class="active">my title</h1> //刪除clas
title.classList.contains('active') // true 判斷是否包含某個clas
題目7: 如何選中如下代碼所有的li元素德召? 如何選中btn元素汽纤?
<div class="mod-tabs">
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
<button class="btn">點我</button>
</div>
li元素:
document.getElementsByTagName("li");
document.querySelectorAll("li")
btn元素
document.getElementsByClassName("btn")
document.querySelectorAll(".btn")