js第九天

排他思想(算法)

　　如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法。

　　　　1、所有元素全部清除样式

　　　　2、给当前元素设置样式

　　　　3、注意顺序不能颠倒，首先清除其他元素的样式，然后再设置当前元素的样式

  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
  <button>按钮4</button>
  <button>按钮5</button>
  <script>
    // 获取所有按钮
    let btns = document.querySelectorAll('button')
    // 给每个按钮依次添加点击事件
    for (let i = 0; i < btns.length; i++) {
      // 添加点击事件
      btns[i].onclick = () => {
        // 首先清除所有按钮的样式
        for (let j = 0; j < btns.length; j++) {
          // 背景色变为空
          btns[j].style.backgroundColor = ''
        }
        // 然后再给当前按钮添加背景色
        btns[i].style.backgroundColor = 'cyan'
      }
    }
  </script>

自定义属性

　　获取自定义属性

　　　　　　获取属性值的方法：

　　　　　　　　1、element.属性：主要用于获取内置属性(元素本身自带的属性)。

　　　　　　　　2、element.getAttribute('属性')：主要获得自定义的属性(标准)，自己定义的属性。

　　　　　　　　　　

　　设置自定义属性值

　　　　　　设置属性值的方法：

　　　　　　　　1、element.属性 = '值'：设置内置属性值。

　　　　　　　　2、element.setAttribute('属性', '值')：主要针对自定义属性。

　　　　　　　　　　

 

 

 　　移除属性

　　　　　　移除属性需要用到element.removeAtrribute('属性')。

　　　　　　　　

 

 

 H5自定义属性

　　自定义属性的目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

　　设置 H5 自定义属性

　　　　H5 规定自定义属性需要以 data- 开头做为属性名并且赋值。比如：<div data-index=" 2 "> </div>。

　　获取 H5 自定义属性

　　　　1、兼容性获取：element.getAttribute('data-index')。

　　　　2、H5 新增 element.dataset.index 或 element.dataset['index'] ie11 才开始支持。dataset 里存放所有以 data 开头的自定义属性。如果出现多个 - 那么获取时采用的是驼峰命名法。

　　　　

 

 

 节点操作

　　获取元素通常有两种方式

　　　　1、利用 DOM 提供的方法获取元素

　　　　2、利用节点层级关系获取元素

　　节点概述

　　　　一般节点至少拥有 nodeType(节点类型)、nodeName(节点名称) 和 nodeValue(节点值) 这三个基本属性。

　　　　　元素节点的 nodeType 为 1。

　　　　　属性节点的 nodeType 为 2。

　　　　　文本节点的 nodeType 为 3。

 　　父级节点

　　　　　　node.parentNode。返回的是离元素最近的父节点，如果没有返回 null。

　　　　　　

 

 

　　子节点 

　　　　　1、parentNode.childNodes。返回包含指定节点的子节点的集合，该集合为即时更新的集合。注意：获取的是所有的子节点，包括文本节点。

　　　　　2、parentNode.children。它是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回。

　　　　　　　　

 

 

 　　　　　3、parentNode.firstChild：返回第一个子节点，找不到返回 null，同样也是包含所有节点。

　　　　　 4、parentNode.lastChild：返回最后一个子节点，找不到返回 null，同样也是包含所有节点。

　　　　　 5、parentNode.firstElementChild：返回第一个子元素节点。

　　　　　 6、parentNode.lastElementChild：返回最后一个子元素节点。方法 5 和 6 有兼容问题，IE9 以上支持。

　　　　　　　　

　　兄弟节点

　　　　1、node.nextSibling：获取下一个兄弟节点，包括文字节点。

　　　　2、node.nextElementSibling：获取下一个兄弟元素节点。

　　　　3、node.previousSibling：获取上一个兄弟节点，包括文字节点。

　　　　4、node.previousElementSibling：获取上一个兄弟元素节点。

　　　　5、以上方法找不到都会返回 null。

　　　　　　

 

 　　创建节点

　　　　　　document.createElement('tagName')：这个方法创建由 tagName 指定 HTML 元素，因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。

　　添加节点

　　　　　　node.appendChild(child)：这个方法将一个节点添加到指定父节点的子节点列表末尾。

　　　　　　node.inserBefore(child，指定元素)：这个方法将一个节点添加到父节点的指定子节点前面。

　　　　　　

 

 

 　　删除节点

　　　　　　node.removeChild()：这个方法用于从 DOM 中删除一个子节点，返回删除的节点。

  <button>删除</button>
  <ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
  </ul>
  <script>
    let ul = document.querySelector('ul')
    let btn = document.querySelector('button')
    btn.onclick = () => {
      if (ul.children.length == 0) {
        btn.disabled = true
      } else {
        ul.removeChild(ul.children[0])
      }
    }
  </script>

　　克隆节点

　　　　　　node.cloneNode()：这个方法返回调用该方法的节点的一个副本。

　　　　　　注意：如果括号参数是空或是 false，则只会克隆节点本身，不克隆里面的子节点。如果是 true，则会克隆里面的子节点。

  <ul>
    <li>1
      <span>22</span>
    </li>
    <li>2</li>
    <li>3</li>
  </ul>
  <button>克隆</button>
  <script>
    let ul = document.querySelector('ul')
    let btn = document.querySelector('button')
    btn.onclick = () => {
      // let li = ul.children[0].cloneNode()
      let li = ul.children[0].cloneNode(true)
      ul.appendChild(li)
    }
  </script>