1. dom對象的innerText和innerHTML有什么區別?
innerText屬性主要用于獲取元素(nodeElement)的內部文本元素
innerHTML作用主要用于獲取當前元素節點(nodeElement)的內部元素節點
2. elem.children和elem.childNodes的區別?
elem.children返回的是元素子節點
elem.childNodes返回所有的子節點,包括HTML元素,屬性,文本.
3.查詢元素有幾種常見的方法?ES5的元素選擇方法是什么?
常見方法
getElementById() 通過ID查詢元素
getElementsByClassName() 通過class查詢元素
getElementsByTagName() 通過標簽查詢元素
getElementsByName() 通過選擇有name屬性的元素查詢元素
es5
querySelector() 通過匹配指定的CSS選擇器的元素節點查詢元素
querySelectorAll() 通過匹配指定的CSS選擇器的所有節點查詢元素
4.如何創建一個元素?如何給元素設置屬性?如何刪除屬性
創建元素
createElement()
設置元素屬性
setAttribute()
刪除屬性
romoveAttribute()
5.如何給頁面元素添加子元素?如何刪除頁面元素下的子元素?
添加子元素到元素末尾
appendChild()
刪除頁面元素下的子元素
removeChild()
6. element.classList有哪些方法?如何判斷一個元素的 class 列表中是包含某個 class?如何添加一個class?如何刪除一個class?
element.classList的方法:
- element.classList.add():添加指定的類值。如果這些類已經存在于元素屬性中,那么它們將被忽略(添加一個class)
- element.calssList.remove():刪除指定的類(刪除一個class)
- element.classList.item():按集合中的索引返回類值
- element.classList.toggle():
- 當只有一個參數時:切換class value;即如果類存在,則刪除它并返回false,如果不存在,則添加它并返回true
- 當存在第二個參數時:如果第二個參數的計算結果為true,則添加指定的類值,如果計算結果為false,則刪除它
- element.classList.contains():檢查元素的類屬性中是否存在指定的類值(判斷一個元素的class列表中是否含有某個class)
// div是具有class =“foo bar”的<div>元素的對象引用
div.classList.remove("foo");
div.classList.add("anotherclass");
// 如果visible被設置則刪除它,否則添加它
div.classList.toggle("visible");
// 添加/刪除 visible,取決于測試條件,i小于10
div.classList.toggle("visible", i < 10);
alert(div.classList.contains("foo"));
//添加或刪除多個類
div.classList.add("foo","bar");
div.classList.remove("foo", "bar");
7.如何選中如下代碼所有的li元素? 如何選中btn元素?
<div class="mod-tabs">
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
<button class="btn">點我</button>
</div>
選中所有的li元素:
1.document.querySelectorAll(".mod-tabs li")
2.document.getElementsByTagName("li")
選中btn元素:
1.document.querySelector("btn")
2.document.getElementsByClassName("btn")
【個人總結,如有錯漏,歡迎指出】
:>