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