很少用的前端基础知识---id直接在js中使用

2024-02-04 21:28:22

很少用的前端基础知识。id直接在js中使用

今天做了个模拟题，一个特别简单的程序，但是想来想去却憋了半天。越是简单的问题，越想表现一下自己。唉，不过还是想着做好吧，既然做完了，那就总结一下吧。

题目是这样的，实现一个这样的效果，如下两图。

看着很简单哈，可是写真正实现起来总是踩坑。

废话也不多说了，当时就想把那些奇奇怪怪的知识都用上，直接上代码吧。我把知识点也写在了里面。

<!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>Document</title>
</head>

<body>
    <div id="tab">
        <span class="tab_child">Tab1</span>
        <span class="tab_child">Tab2</span>
        <span class="tab_child">Tab3</span>
        <span class="tab_child">Tab4</span>
        <span class="tab_child">Tab5</span>
    </div>
    <div id="content">
        我是内容1
    </div>
    <script>
        let tabs = document.querySelectorAll(".tab_child");//获取相同类元素，返回的是数组
        tabs[0].classList.add("color_hovw");//给第一个元素添加了一个class
        document.getElementById("tab").addEventListener("click", (event) => {//监听子元素
            for (let index = 0; index < tabs.length; index++) {
                const element = tabs[index];
                element.classList.remove("color_hovw");//删除所有样式
                element.index = index;//给每个元素设置编号
            }
            event.target.classList.add("color_hovw");//给当前元素添加样式
            content.innerHTML = "我是内容" +  (event.target.index + 1);//更改内容
        });
        /**
         * 使用的知识点
         * 1、document.querySelectorAll  23行
         * 2、dom.classList.add     24、31行
         * 3、dom.classList.remove  28行
         * 4、addEventListener      25行
         * 5、浅拷贝  27行   验证行 29、32行
         * 6、id直接在js中使用 32
        */
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: chartreuse;
        }

        #tab {
            height: 60px;
            font-size: 30px;
            background-color: white;
        }

        .color_hovw {
            background-color: chartreuse;
        }

        #tab span {
            height: 60px;
            padding: 15px 20px;
            line-height: 60px;
        }
        #content{
            padding-left: 50px;
        }
    </style>
</body>

</html>

通过上面我又找了一些关于id在js中直接使用的文章。

其实不只是 id 可以这样， name 也是可以的。

答案如下：

HTML5规范文档中指出:如果一个元素符合下面两条规则中的任一条,则window对象中必须要有与之对应的一个属性,属性值就是这个对象.

如果一个元素拥有ID属性,那么ID属性的属性值就会成为window对象的属性名.
如果一个元素拥有name属性,那么name属性的属性值就会成为window对象的属性名.但这个元素的标签名必须是: a, applet, area, embed, form, frame, frameset, iframe, img, object,其中的一个.

HTML5规范文档

当然即使id能直接在上面使用，也不建议使用，容易把你的定义搞乱。

码农公寓

很少用的前端基础知识。id直接在js中使用

相关文章