1.DOM對象的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>第二個段落</p>
<p>第三個</p>
</ul>
</body>
<script>
var List=document.getElementById('list');
var output=List.innerText
console.log('-------這是分割線------')
console.log(List.children)
console.log(List.childNodes)
3.查詢元素有幾種常見的方法推溃?ES5的元素選擇方法是什么垮刹?
- getElementById()
- getElementByTagName()
- getElementByClassName()
- getElementByName()
-
ES5選擇方法
- querySelector()
- querySelectorAll()
- elemenFromPoint()
4.如何創(chuàng)建一個元素疫稿?如何給元素設(shè)置屬性蟋定?如何刪除屬性粉臊?
- createElement()
var newDiv=document.creatElement('div')
//在DOM下創(chuàng)建一個div標(biāo)簽
- createTextNode()
var newDiv=document.createElement('div')
var newContent=document.createTextNode('hello world')
//用來生成文本節(jié)點,參數(shù)為所要生成的文本節(jié)點內(nèi)容
- createDocumentFragment()
var docFrangment=document.createDocumentFragment();
//用來生成一個DocumentFragment();
5.如何給頁面元素添加子元素驶兜?如何刪除頁面元素下的子元素扼仲?
- appendChild()
var newDiv =document.createElement('div')
var newContent=document.createTextNode('hello')
newDiv.appendChild(newContent)
- removeChild()
6.element.classList有哪些方法?如何判斷一個元素的class列表中包含某個class抄淑?如何刪除一個class屠凶?
element.classList的方法
- classList.add()用來增加一個class
- classListremove()用來刪除一個class
- classList.toggle('visible',i<num);增加/刪除visible,取決測試條件
- classList.contains()用來判斷一個元素的class列表中是否包含某個class
7.如何選中如下代碼所有的li元素?如何選擇btn元素肆资?
<div class="mod-tabs">
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
<button class="btn">點我</button>
</div>
代碼:
<div class="mod-tabs">
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
<button class="btn">點我</button>
</div>
</body>
<script>
var getNode=document.querySelectorAll('li') // 選擇所有的li
var btn =docunemt.querySelector('.btn')//獲取類名為btn的元素
console.log(getNode);
console.log(btn);
</script>