进阶版JavaScript学习-第三期

距离上一期更新已经过了好久，非常抱歉。因为自己的一些原因，没有能够及时更新。

博主主页：GUIDM的主页

专栏内容：进阶版JavaScript学习

一、排他思想

如果有同一组元素，我们想要某一元素实现某种样式，需要用到循环结构的排他思想算法。

1、所有元素清除样式

2、给当前元素设置样式

3、注意顺序不能颠倒。

改变按钮点击后的颜色。


<body>
    <button>1button>
    <button>2button>
    <button>3button>
    <button>4button>
    <button>5button>
    <script>
        var btns=document.getElementsByTagName('button');
        for(var i=0;ilength;i++){
            btns[i].onclick=function(){/*（1）先把所有的按钮背景颜色去掉*/
                for(var i=0;ilength;i++){
                    btns[i].style.backgroundColor='';
                }
                this.style.backgroundColor='blue';//让当前的元素背景为blue
            }
        }
    script>
body>

二、自定义属性的操作

1、获取属性值：

element.属性：获取内置属性值(元素本身自带的属性)。

element.getAttribute('属性')：主要获得自定义的属性（标准）。

2、设置属性值

element.属性='值'

element.setArribute('属性','值')：主要针对于自定义属性。

3、移出属性

element.removeAttribute('属性')


<body>
    <div id="demo" index="1" class="nav">okokdiv>
    <script>
        console.log(div.id);
        console.log(div.getAttribute("id"));
        div.id='test';
        div.setAttribute('index',2);
        div.setAttribute('class','footer');
        div.removeAttribute('index');
    script>

三、H5自定义属性

自定义属性的目的：为了保存并使用数据，有些数据可以保存到页面中而不用保存到数据库中。

H5新增自定义属性的规范和要求：

1、自定义属性以data开头作为属性并且赋值。

2、使用JS设置element.setAttribute('data-index',2）

获取H5自定义属性

1、兼容性获取：

element.getAttribute('data-index');

2、H5新增：

element.dataset.属性

只能去data-开头的属性，dataset为集合存放了所有data开头的自定义属性。

如果自定义属性里面有多个-连接的单词，我们采取驼峰命名法。


<body>
    <div getTime='20' data-index='2' data-list-name="luck">div>
    <script>
        var div=document.querySelector('div');
        console.log(div.getAttribute('getTime'));
        console.log(div.dataset.listName);
        console.log(div.dataset['listName']);
    script>
body>

相关阅读:
自动拉取和推送docker镜像到私有仓库（skopeo）
Python编程实例-Pandas快速入门
GPT与Python结合应用于遥感降水数据处理、ERA5大气再分析数据的统计分析、干旱监测及风能和太阳能资源评估
【面试题】ES6语法五之箭头函数
程序化易程序分析之后，如何进入交易程序？
Matlab程序
Segmentation-Based Deep-Learning Approach for Surface-Defect Detection-论文阅读笔记
【Elasticsearch专栏 02】深入探索：Elasticsearch为什么使用倒排索引而不是正排索引
多数元素（Java版）
Appium框架

原文地址：https://blog.csdn.net/m0_61901625/article/details/126718192