webAPI編程-02

3.操做元素

• 排他思想：

  • 若是有同一組元素，咱們想要某一個元素實現某種樣式，須要用到循環的排他思想算法：
    • 1.全部元素所有清楚樣式
    • 2.給當前元素設置樣式
    • 注意順序不能顛倒

• 自定義屬性的操做

  • 獲取屬性值

    • element.屬性 //獲取屬性值 （獲取內置屬性值——元素自己自帶的屬性）
    • element.getAttribute('屬性') （主要獲取自定義的屬性（標準） 程序員自定義的屬性）

  • 設置元素屬性值

    • element.屬性 = '值'
    • element.setAttribute('屬性','值') //自定義屬性

  • 移除屬性

    • element.removeAttribute(屬性)

  • H5自定義屬性

    • H5規定自定義屬性data-開頭作爲屬性名而且賦值

      • eg:<div data-index = "1" ></div>;

      • eg:element.setAttribute('data-index',2);

    • 獲取H5自定義屬性

      • 1.兼容性獲取element.getAttribute('data-index')
      • 2.H5新增element.dataset.index或者element.dataset['index'] ie11才支持(只能獲取data-開頭的)
        • 若是自定義屬性裏面有多個-連接的單詞,獲取的時候採起駝峯命名法
          • eg:data-list-name——listName

4.節點操做

• 網頁中全部的內容都是節點（標籤、屬性、文本、標籤等），在DOM中，節點使用node來表示

• 節點的三個基本屬性：nodeType(節點類型)、nodeName(節點名稱)、`nodeValue(節點值)

• 父級節點：node.parentNode

  • parentNode屬性可返回某節點的父節點，注意是最近的一個父節點
  • 若是指定的節點沒有父節點則返回null

• 子節點：

  • parentNode.childNodes（標準）

    • 返回包含指定節點的子節點的集合，該集合爲即時更新的集合

  • parentNode.children(非標準)

    • 是一個只讀屬性，返回全部的子元素節點，它只返回子元素節點，其他節點不返回

  • parentNode.firstElementChild //返回第一個子元素節點，找不到則返回null（ie9才支持）

  • parentNode.lastElementChild //返回最後一個子元素節點，找不到則返回null（ie9才支持）

  • parentNode.children[0] //既沒有兼容性問題又返回第一個子元素

  • `parentNode.children[parentNode.children.length - 1] // 返回最後一個子元素

• 兄弟節點

  1.node.nextSibling;

  • nextSibling返回當前元素的下一個兄弟節點，包含元素節點、文本節點等等，找不到則返回null;包含全部節點

  2.node.previousSibling;

  • previousSilbing返回當前元素上一個兄弟節點，找不到則返回null;包含全部的節點

  3.node.nextElementSibling;

  • nextElementSibling返回當前元素下一個兄弟元素節點，找不到則返回null

  4.node.previousElemnetSibling;

  • previousElementSibling返回當前元素上一個兄弟元素節點，找不到返回null (ie9以上才支持)

• 建立節點

  document.createElement('tagName');

  • document.creatElement()方法建立由tagName指定的html元素。由於這些元素原先不存在，是根據咱們的需求動態生成的，因此也成爲動態建立元素節點

• 添加節點

  1.node.appendChild(child);

  • node.appendChild()方法將一個節點添加到指定父節點的子節點列表末尾，相似於CSS裏面after僞元素

  2.node.insertBefore(child,指定元素);

  • node.insertBefore()方法將一個節點添加到父節點的指定子節點前面，相似於CSS裏面的before僞元素