1、 dom對象的innerText和innerHTML有什么區(qū)別？
- innerText 指的是從起始位置到終止位置的內(nèi)容,但它去除html標(biāo)簽夭谤。
- innerHTML指的是從對象的起始位置到終止位置的全部內(nèi)容,包括Html標(biāo)簽。
2、elem.children和elem.childNodes的區(qū)別缕题？
- elem.children 它返回指定元素的子元素集合。但只返回HTML節(jié)點胖腾，甚至不返回文本節(jié)點烟零。
- elem.childNodes 它返回指定元素的子元素集合，包括HTML節(jié)點和所有屬性咸作，文本锨阿。
3、查詢元素有幾種常見的方法记罚？ES5的元素選擇方法是什么?
- 查詢元素常見方法
- getElementById()——返回匹配指定ID屬性的元素節(jié)點墅诡。
- getElementsByClassName()——返回一個類似數(shù)組的對象，包括了所有 class名字符合指定條件的元素桐智。
- getElementsByTagName()——返回所有指定標(biāo)簽的元素末早。
- getElementsByName()——用于選擇擁有name屬性的HTML元素，比如form酵使、img荐吉、frame等
- ES5元素選擇方式
- querySelector()——返回匹配指定的CSS選擇器的元素節(jié)點(一個)。
- querySelectorAll()——返回匹配指定的CSS選擇器的所有節(jié)點口渔。
4样屠、如何創(chuàng)建一個元素？如何給元素設(shè)置屬性缺脉？如何刪除屬性
創(chuàng)建元素：createElement()
設(shè)置元素屬性：setAttribute(attributeName,attributeValue)
刪除元素屬性：removeAttribute(attributeName)
document.createElement('div')
document.getElementsByTagName('h1')[0].setAttribute('class','haha')
document.getElementsByTagName('h1')[0].removeAttribute('class','haha')
5痪欲、如何給頁面元素添加子元素？如何刪除頁面元素下的子元素?
appendChild() //在元素末尾添加元素
insertBefore() //在某個元素之前插入元素
removeChild()方法可用于刪除某元素下的子元素
replaceChild()接受兩個參數(shù)：要插入的元素和要替換的元素
var newDiv = document.createElement('div')
var newText = document.createTextNode('hello')
newDiv.appendChild(newText)
document.body.appendChild(newDiv)
document.body.removeChild(newDiv)
document.body.insertBefore(newDiv,document.body.firstChild)
document.body.replaceChild(newText,newDiv)
6攻礼、element.classList有哪些方法业踢？如何判斷一個元素的 class 列表中是包含某個 class？如何添加一個class礁扮？如何刪除一個class?
element.classList.add()//添加class
element.classList.item()//返回類名在元素中的索引值
element.classList.remove('')//刪除class
element.classList.contains('')// 包含就是true / 沒有則返回flase
element.classList.toggle('')// 有則刪除返回false知举，沒有則加上返回true
document.body.classList.add('ct','ct-1','ct-2')
document.body.classList.item(1)
document.body.classList.contains('ct-1')
document.body.classList.toggle('ct-2')
document.body.classList.remove('ct','ct-1')
7瞬沦、如何選中如下代碼所有的li元素？ 如何選中btn元素雇锡？
<div class="mod-tabs">
<ul>
<li>list1<li>
<li>list2<li>
<li>list3<li>
</ul>
<button class="btn">點我</button>
</div>
/*
document.querySelectorAll('li')
document.querySelectorAll('.btn')
document.getElementsByTagName('li')
document.getElementsByClassName('btn')
*/
