Js查漏補缺-06

0x00 換膚

    通過點擊圖片來更換網頁的背景（參考百度）

  <script>
    let imgs = document.querySelector('.baidu').querySelectorAll('img');
    for (let i = 0;i < imgs.length;i++){
        imgs[i].onclick = () => {
            let url1 = imgs[i].src;
            document.body.style.backgroundImage = 'url(' + url1 + ')';
        }
    }
  </script>

0x01 自定義屬性

    html中允許程序員自己定義屬性，獲取自定義屬性的方法爲getAttribute();

    更改自定義屬性的方法爲setAttribute();

    刪除自定義屬性的方法爲removeAttribute();

    示例：tab欄切換

  <div>
    <div class="tab-list">
      <ul>
        <li>商品介紹</li>
        <li>規格與包裝</li>
        <li>售後保障</li>
        <li>商品評價</li>
        <li>手機社區</li>
      </ul>
    </div>
    <div class="tab-con">
      <div class="item" data-item-index="0">商品介紹內容</div>
      <div class="item" data-item-index="1">規格與包裝內容</div>
      <div class="item" data-item-index="2">售後保障內容</div>
      <div class="item" data-item-index="3">商品評價內容</div>
      <div class="item" data-item-index="4">手機社區內容</div>
    </div>
  </div>

  <script>
    let lis = document.querySelectorAll('li');
    let items = document.querySelectorAll('.item');

    for (let i = 0;i < lis.length;i++){
        lis[i].onclick = () => {
            let index = items[i].getAttribute('data-item-index');
            for(let i = 0;i < lis.length;i++){
                lis[i].className = '';
                items[i].style.display = 'none';
            }
            lis[i].className = 'active';
            items[index].style.display = 'block';
        }
    }
  </script>

    通過給div設置item-index屬性來方便獲取所需的位置信息

    自定義屬性的規範：h5中使用data-開頭的屬性自動識別爲自定義屬性

    在h5中獲取自定義屬性的新方法：items[i].dataset.itemIndex; // 多個-的數據得使用駝峯命名法

0x02 節點操作

    節點至少有三個屬性，nodeName，nodeType，nodeValue

    nodeType中，1爲元素節點，2爲屬性節點，3爲文本節點

    parentNode()可以獲取最近的父節點

    childNode()可以獲取所有的子節點（包括文本節點） // 一般不使用

    children() 可以獲取所有的子元素節點

    firstChild(),lastChild();獲取第一個/最後一個子節點 // 但是會獲取文本節點

    firstElementChild(),lastElementChild();獲取第一個/最後一個元素節點   //ie9以上才兼容