DOM操作

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")

【個人總結,如有錯漏,歡迎指出】
:>

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 基本介紹 文檔對象模型 (DOM) 是HTML和XML文檔的編程接口。它給文檔(結構樹)提供了一個結構化的表述并且...
    草鞋弟閱讀 452評論 0 0
  • 題目1: dom對象的innerText和innerHTML有什么區別? innerText是一個可寫屬性,返回元...
    Taaaaaaaurus閱讀 214評論 0 1
  • 1、 dom對象的innerText和innerHTML有什么區別? innerText是一個可寫屬性,返回元素內...
    zh_yang閱讀 332評論 0 0
  • dom對象的innerText和innerHTML有什么區別? innerText返回從body元素開始所有文本內...
    Vincent_永閱讀 320評論 0 0
  • 大青山上建起了一個不入流的風景區,還起了一個俗氣的名字,最可惡的是它挖走了我有關童年的最后一點記憶。不斷新建...
    劉_d8eb閱讀 190評論 0 0