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伪元素