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以上才兼容