蒋鹏冲-20221109-DOM&BOM03

一，今日学习内容：
1.自定义属性
                data-
                        <div id="box" data-age="12" data-sex="22">

</div>

dom.dataset====>所有的自定义属性
dom.dataset.age

dom.dataset.age=新的值
        2. 排他思想
                tab切换
                        <div class="container">
    <!-- 使用索引的对应关系来进行切换 -->
    <!-- tab栏 -->
    <div id="tabs" class="tabs">
        <div class="tab" style="background-color: #f60;" data-tip="news">新闻</div>
        <div class="tab" data-tip="menu">菜单</div>
    </div>
    <!-- 子页面 -->
    <div id="items" class="items">
        <div class="item" data-tip="news">
            <ul>
                <li>相会“乌镇时间”</li>
                <li>相会“乌镇时间”</li>
                <li>相会“乌镇时间”</li>
                <li>相会“乌镇时间”</li>
                <li>相会“乌镇时间”</li>
                <li>相会“乌镇时间”</li>
                <li>相会“乌镇时间”</li>
            </ul>
        </div>
        <div class="item" style="display: none;" data-tip="menu">
            <ul>
                <li>红烧鸡翅</li>
                <li>红烧鸡翅</li>
                <li>红烧鸡翅</li>
                <li>红烧鸡翅</li>
                <li>红烧鸡翅</li>
                <li>红烧鸡翅</li>
            </ul>
        </div>
    </div>
</div>
                        * {
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    height: 100%;
}

ul,
li {
    list-style: none;
}

.container {
    width: 1200px;
    height: 100vh;
    /* overflow-y: scroll; */
    margin: 0 auto;
    /* background-color: #00f; */
}

/* tab的样式 */
.tabs {
    width: 100%;
    height: 60px;
    background-color: #ccc;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.tabs>div {
    width: 50%;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    background-color: orange;
}

.items {
    width: 100%;
    background-color: #ccc;
}
                        // 获取dom节点
const tab = document.querySelectorAll('.tab');
const item = document.querySelectorAll('.item');
const tabs = document.querySelector('#tabs');
// console.log(tab, item);

// tabs添加点击事件
tabs.addEventListener('click', function (e) {
    // console.log(e.target);
    // 自定义属性的值
    let tabTip = e.target.dataset.tip;
    // console.log(e.target.dataset.tip);
    item.forEach(function (v, i) {
        // console.log(v.dataset.tip);
        if (tabTip == v.dataset.tip) {
            // tip的值可以对应起来
            // 子元素显示
            v.style.display = "block";
        } else {
            console.log('1', i);
            // 子元素隐藏
            v.style.display = 'none';
        }
    })
    for (let i = 0; i < tab.length; i++) {
        if (tab[i].dataset.tip != e.target.dataset.tip) {
            tab[i].style.backgroundColor = "orange";
        }
    }
    e.target.style.backgroundColor = "#f60";
})
        3. 节点操作
                3.1 子找父、父找子
                        1.body:
        document.body

2.html:
        document.documentElement
                        parentNode        父节点

//  会受到空格，回车的影响---可以获取到文本节点
firstChild       
lastChild
childNodes

children // 所有的子节点--不会受到空格回车的影响

closest('选择器')  //  向上查找，查找到选择器匹配上位置，离自己最近的

// 不会受到空格回车的影响，子节点--dom节点--标签节点
firstElementChild
lastElementChild