DOM第4章tab切换和自定义属性节点操作

时间:2022-09-23
本文章向大家介绍DOM第4章tab切换和自定义属性节点操作,主要内容包括tab切换和自定义属性、京东tab栏切换、自定义属性操作、节点操作、节点概述、节点层级、创建节点、添加节点、使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

tab切换和自定义属性

京东tab栏切换

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tab栏切换</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        .tab {
            width: 978px;
            margin: 100px auto;
        }

        .tab_list {
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }

        .tab_list li {
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }

        .tab_list .current {
            background-color: #c81623;
            color: #fff;
        }

        .item_info {
            padding: 20px 0 0 20px;
        }

        .item {
            display: none;
        }
    </style>
</head>

<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价(50000)</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                商品介绍模块内容
            </div>
            <div class="item">
                规格与包装模块内容
            </div>
            <div class="item">
                售后保障模块内容
            </div>
            <div class="item">
                商品评价(50000)模块内容
            </div>
            <div class="item">
                手机社区模块内容
            </div>

        </div>
    </div>
    <script>
        //获取元素
        let tab_list = document.querySelector('.tab_list');
        let list = tab_list.querySelectorAll('li');
        let items = document.querySelectorAll('.item');
        //for循环绑定点击事件
        for (let i = 0; i < list.length; i++) {
            list[i].onclick = () => {
                // 给5个li设置索引号
                list[i].setAttribute('index', i);
                //干掉所有人 其余的li清除class这个类
                for (let i = 0; i < list.length; i++) {
                    list[i].className = '';
                }
                //留下我自己
                list[i].className = 'current';
                //获取索引值
                let index = list[i].getAttribute('index');
                //干掉所有人 让items的盒子隐藏
                for (let i = 0; i < items.length; i++) {
                    items[i].style.display = "none";
                }
                items[index].style.display = "block";
            }
        }
    </script>
</body>

</html>

自定义属性操作

自定义属性目的:为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
自定义属性获取是通过getAttribute(属性')获取。
但是有些自定义属性很容易弓起歧义,不容易判断是元素的内置属性还是自定义属性。
H5给我们新增了自定义属性:

  • 1、设置H5自定义属性

H5规定自定义属性 data- 开头做为属性名并且赋值。

<div data-index="123"> html中添加 </div>
//js中添加自定义属性
Element.setAttribute('data-index',123)
  • 2、获取自定义属性(兼容性较好)
let zdy11 = div.getAttribute("dadada")
  • 3、H5新增获取自定义属性(用get获取兼容性好点)
Element.dataset.index  //H5新增获取自定义属性    data set就是获取我们自己定义data的一个集合 <div data-index="123"> html中添加 </div>
Element.dataset['index']  // ie11 才开始支持

注意:

console.log(p.dataset.listName);  //多个名字必须使用驼峰命名法来调用
 console.log(p.dataset['listName']);

节点操作

节点概述

  • 元素节点 nodeType 为 1
  • 属性节点 nodeType 为 2
  • 文本节点 nodeType 为 3 (文本节点包含文字、空格、换行等)

我们在实际开发中,节点操作主要操作的是元素节点

节点层级

利用DOM树可以把节点划分为不同的层级关系,常见的父子兄层级关系

  • 父级节点

node.parentNode //得到的是离父亲最近的父级节点 ,如果找不到父级节点就返回 null

  • 子节点

    • parentNode.childNode (标准)

parentNode.childNode 返回的包含指定的子节点的集合,该集合为及时更新的集合,是所有的子节点 包含 元素节点 文本节点

    • **parentNode . children **(非标准)

parentNode. children是-个只读属性,返回所有的子元素节点。只返回子元素节点,其余节不返回(这个是我们重点掌握的)。
虽然children是一个非标准 ,但是得到了各个浏览器的支持,因此我们可以放心使用

  • 子节点的第一个和最后一个
  1. parentNode.firstChild

firstChild返回第一个子节点,找不到则返回null。同样,也是包含所有的节点。

  1. parentNode.lastChild

lastChild返回最后一个子节点 ,找不到则返回null。同样,也是包含所有的节点。

注意:

这两个方法有兼容性问题, IE9以上才枝持。


实际开发中, firstChild和lastChild 包含其他节点,操作不方便,而firstElementChild和lastElementchild又有兼容性问题,那么我们如何获取第一个子元素节点或最后一个子元素节点呢 ?

实际开发的写法既没有 兼容性问题又返回第一个子元素写法是:

ul.children[2]

以伪数组形式来得到所需要的元素

代码仔细看

 let ul = document.querySelector('ul');
    console.log(ul.childNodes); //获取所有子节点  包含换行   空格
    console.log(ul.childNodes[0].nodeType);
    console.log(ul.childNodes[1].nodeType);
    //获取子元素节点
    console.log(ul.children);
    console.log(ul.firstChild); //第一个子节点 不管是文本节点还是节点
    console.log(ul.lastChild);
    console.log(ul.firstElementChild); // 获取第一个子节点的子元素 
    console.log(ul.lastElementChild);
    console.log(ul.children[2]); //实际开发的写法既没有 兼容性问题又返回第一个子元素写法是:
    console.log(ul.children[0]);  // 第一个子元素
    console.log(ul.children[ul.children.length - 1]); //  最后一个子元素
  • 兄弟节点
/*下一个兄弟节点*/
Node.nextSibling 
Node.nextSibling   //返回当前元素的下一个兄弟节点,找不到返回null
/*上一个兄弟节点*/
Node.previousElementSibling  //返回当前元素的下一个兄弟节点,找不到返回null

了解即可

/*下一个兄弟元素节点(有兼容性问题)*/
Node.nextElementSibling //返回当前元素的下一个兄弟元素节点,找不到返回null
/*上一个兄弟元素节点(有兼容性问题)*/
Node.previousElementSibling //返回当前元素的上一个兄弟元素节点,找不到返回null

如何解决兼容性问题:

​ 自己封装函数一个兼容性函数

   function getNextElementSibling(element) {
      var el = element;
      while (el = el.nextSibling) {
        if (el.nodeType === 1) {
            return el;
        }
      }
      return null;
    }  

创建节点

document.createElement('div')

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

添加节点

node.appendChild(child)
//node.appendChild(child) 方法将一个节点添加到指定父节点的子节点列表 末尾。类似于css里面的after伪元素
 node.insertBefore(child, 指定元素);
// node.insertBefore(child, 指定元素); 方法将一个节点添加到指定父节点的子节点列表 前面。类似于css里面的before伪元素
 <ul>
        <li>123</li>
    </ul>
    <script>
        // 1. 创建节点元素节点
        var li = document.createElement('li');
        // 2. 添加节点 node.appendChild(child)  node 父级  child 是子级 后面追加元素
        var ul = document.querySelector('ul');
        ul.appendChild(li);
        // 3. 添加节点 node.insertBefore(child, 指定元素);
        var lili = document.createElement('li');
        ul.insertBefore(lili, ul.children[0]);
        // 4. 我们想要页面添加一个新的元素 : 1. 创建元素 2. 添加元素
    </script>

原文地址:https://www.cnblogs.com/daixiaoyang/p/16721760.html