有關于DOM操作的一些題目
1.dom對象的innerText和innerHTML有什么區(qū)別？
innerText 設置或獲取位于對象起始和結(jié)束標簽內(nèi)的文本
innerHTML 設置或獲取位于對象起始和結(jié)束標簽內(nèi)的 HTML
2.elem.children和elem.childNodes的區(qū)別淀弹？
children與childNodes 兩者都是返回子節(jié)點； 前者返回的是元素節(jié)點菌赖， 后者返回所有的節(jié)點類型 包括 元素 沐序、文本 、注釋 等邑时。
（或者這么說：children屬于Element元素特姐，所以不含有其它節(jié)點類型。childNodes 返回的是 NodeList浅浮，children返回是 HTMLElement[] 數(shù)組）
3.查詢元素有幾種常見的方法捷枯？ES5的元素選擇方法是什么?
getElementById() //返回匹配指定ID屬性的元素節(jié)點
getElementsByClassName() //返回一個類似數(shù)組的對象（HTMLCollection類型的對象）
//元素的變化實時反映在返回結(jié)果中
getElementsByTagName() //返回所有指定標簽的元素（搜索范圍包括本身）淮捆。返回值是
//一個HTMLCollection對象，也就是說已艰，搜索結(jié)果是一個動態(tài)集合蚕苇，任何元素的變化都會
//實時反映在返回的集合中
getElementsByName() //用于選擇擁有name屬性的HTML元素，比如form嚼吞、img蹬碧、frame恩沽、
//embed和object，返回一個NodeList格式的對象里伯，不會實時反映元素的變化。
elementFromPoint() //返回位于頁面指定位置的元素脖镀。
ES5的元素選擇方法：
querySelector() //返回匹配指定的CSS選擇器的元素節(jié)點狼电。如果有多個節(jié)點滿足匹配條件，
//則返回第一個匹配的節(jié)點强窖。如果沒有發(fā)現(xiàn)匹配的節(jié)點腾务，則返回null削饵。
querySelectorAll() //返回匹配指定的CSS選擇器的所有節(jié)點窿撬，返回的是NodeList類型的對象。
//NodeList對象不是動態(tài)集合密末，所以元素節(jié)點的變化無法實時反映在返回結(jié)果中跛璧。
//elementList = document.querySelectorAll(selectors);
//querySelectorAll方法的參數(shù)，可以是逗號分隔的多個CSS選擇器刹碾，返回所有匹配
//其中一個選擇器的元素迷帜。
4.如何創(chuàng)建一個元素色洞？如何給元素設置屬性？如何刪除屬性
createElement() createElement方法用來生成HTML元素節(jié)點锦针。 var newDiv = document.createElement("div");
createElement方法的參數(shù)為元素的標簽名，即元素節(jié)點的tagName屬性割粮。如果傳入大寫的標簽名媚污，會被轉(zhuǎn)為小寫耗美。如果參數(shù)帶有尖括號（即<和>）或者是null，會報錯商架。
-
createTextNode()
createTextNode方法用來生成文本節(jié)點蛇摸，參數(shù)為所要生成的文本節(jié)點的內(nèi)容。下面代碼新建一個div節(jié)點和一個文本節(jié)點var newDiv = document.createElement("div"); var newContent = document.createTextNode("Hello"); -
createDocumentFragment()
createDocumentFragment方法生成一個DocumentFragment對象揽涮。var docFragment = document.createDocumentFragment();
DocumentFragment對象是一個存在于內(nèi)存的DOM片段饿肺，但是不屬于當前文檔敬辣，常常用來生成較復雜的DOM結(jié)構，然后插入當前文檔村刨。這樣做的好處在于撰茎，因為DocumentFragment不屬于當前文檔，對它的任何改動髓梅，都不會引發(fā)網(wǎng)頁的重新渲染绎签，比直接修改當前文檔的DOM有更好的性能表現(xiàn)枯饿。
- 設置元素屬性setAttribute()
var node = document.getElementById("div1");
node.setAttribute("my_attrib", "newVal"); - 刪除元素屬性romoveAttribute()
node.removeAttribute('id');
appendChild()
5.如何給頁面元素添加子元素？如何刪除頁面元素下的子元素?
（1）在元素末尾添加元素
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.appendChild(newContent);
（2）在某個元素之前插入元素
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.insertBefore(newContent, newDiv.firstChild);
-
刪除元素
刪除元素使用removeChild()方法即可
parentNode.removeChild(childNode);
6.element.classList有哪些方法诡必？如何判斷一個元素的 class 列表中是包含某個 class奢方？如何添加一個class搔扁？如何刪除一個class?
classList 屬性返回元素的類名，作為 DOMTokenList 對象蟋字。該屬性用于在元素中添加稿蹲，移除及切換 CSS 類。
classList 屬性是只讀的鹊奖，但你可以使用 add() 和 remove() 方法修改它苛聘。
//方法：
add(class1, class2, ...)
//在元素中添加一個或多個類名。如果指定的類名已存在设哗，則不會添加
contains(class)
//返回布爾值，判斷指定的類名是否存在两蟀。
item(index)
//返回類名在元素中的索引值网梢。索引值從 0 開始。如果索引值在區(qū)間范圍外則返回 null
remove(class1, class2, ...)
//移除元素中一個或多個類名赂毯。注意： 移除不存在的類名战虏，不會報錯。
toggle(class, true|false)
//在元素中切換類名
7. 如何選中如下代碼所有的li元素党涕？ 如何選中btn元素烦感？
<div class="mod-tabs">
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
<button class="btn">點我</button>
</div>
/* 代碼
<script type="text/javascript">
//選中所有的li元素
var list=document.querySelector('.mod-tabs ul')
console.log(list)
//選中btn元素
var btn=document.querySelector('.mod-tabs .btn')
console.log(btn)
</script>
*/
本文題文內(nèi)容來自于饑人谷，版權歸饑人谷_海瀚和饑人谷所有遣鼓，轉(zhuǎn)載需說明來源
