1.DOM對(duì)象的innerText和innerHTML有什么區(qū)別
innerText:返回元素內(nèi)包含的內(nèi)容，如果元素內(nèi)簽到多層元素則由淺到深依次拼接在一起
<body>
<ul id="list">
<p>
123
<span>456</span>
</p>
</ul>
</body>
<script>
var List=document.getElementById('list');
var output=List.innerText
console.log(output)
console.log(List.innerHTML)
console.log(List.outerHTML)
</script>
2.elem.children和elem.childNodes的區(qū)別
<body>
<ul id="list">
<p>
123
<span>456</span>
</p>
<p>第二個(gè)段落</p>
<p>第三個(gè)</p>
</ul>
</body>
<script>
var List=document.getElementById('list');
var output=List.innerText
console.log('-------這是分割線------')
console.log(List.children)
console.log(List.childNodes)
3.查詢?cè)赜袔追N常見的方法？ES5的元素選擇方法是什么？
- getElementById()
- getElementByTagName()
- getElementByClassName()
- getElementByName()
-
ES5選擇方法
- querySelector()
- querySelectorAll()
- elemenFromPoint()
4.如何創(chuàng)建一個(gè)元素？如何給元素設(shè)置屬性？如何刪除屬性？
- createElement()
var newDiv=document.creatElement('div')
//在DOM下創(chuàng)建一個(gè)div標(biāo)簽
- createTextNode()
var newDiv=document.createElement('div')
var newContent=document.createTextNode('hello world')
//用來生成文本節(jié)點(diǎn)，參數(shù)為所要生成的文本節(jié)點(diǎn)內(nèi)容
- createDocumentFragment()
var docFrangment=document.createDocumentFragment();
//用來生成一個(gè)DocumentFragment();
5.如何給頁面元素添加子元素？如何刪除頁面元素下的子元素？
- appendChild()
var newDiv =document.createElement('div')
var newContent=document.createTextNode('hello')
newDiv.appendChild(newContent)
- removeChild()
6.element.classList有哪些方法？如何判斷一個(gè)元素的class列表中包含某個(gè)class？如何刪除一個(gè)class？
element.classList的方法
- classList.add()用來增加一個(gè)class
- classListremove()用來刪除一個(gè)class
- classList.toggle('visible',i<num);增加/刪除visible,取決測(cè)試條件
- classList.contains()用來判斷一個(gè)元素的class列表中是否包含某個(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>
代碼：
<div class="mod-tabs">
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
<button class="btn">點(diǎn)我</button>
</div>
</body>
<script>
var getNode=document.querySelectorAll('li') // 選擇所有的li
var btn =docunemt.querySelector('.btn')//獲取類名為btn的元素
console.log(getNode);
console.log(btn);
</script>