JavaScript(DOM)排他和属性

最新推荐文章于 2023-10-24 17:55:40 发布

Han_Zhou_Z

最新推荐文章于 2023-10-24 17:55:40 发布

阅读量1.8k

点赞数 1

文章标签： js es6 前端

本文链接：https://blog.csdn.net/Han_Zhou_Z/article/details/121675513

版权

一、排他思想

定义：简单理解就是排除掉其他的（包括自己），然后再给自己设置想要实现的效果。总而言之，排他思想的实现步骤就是所有元素全部清除与设置当前元素。

案例：点击任意一个按钮，其他按钮不被选择，背景颜色变回原来的颜色

<body>
    <div>
        <button>按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
        <button>按钮4</button>
        <button>按钮5</button>
    </div>
    <script>
        //1、获取所有按钮，所得到的是一个数组
        var btns = document.getElementsByTagName('button');
        //2、循环排他：给每一个按钮注册click事件
        for(var i=0;i<btns.length;i++){
            btns[i].onclick = function(){
                //循环排他:将所有按钮的背景色全部清除掉
                for(var j=0;j<btns.length;j++){
                    btns[j].style.backgroundColor = '';
                }
                //设置当前按钮的背景色
                this.style.backgroundColor='pink';
            }
        }
    </script>
</body>

1、鼠标事件

（1）鼠标经过：mouseover

（2）鼠标离开：mouseout

案例：当鼠标悬浮在某个单元格的时候，单元格的背景颜色发生改变，当鼠标从单元格上移开时，单元格背景颜色变回原来的颜色

<style>
    .bg{
        background-color: pink;
    }
</style>
<body>
    <div>
        <table border=1>
            <thead>
                <tr align="center">
                    <th width='50'>学号</th>
                    <th width='100'>姓名</th>
                    <th width='50'>性别</th>
                    <th width='50'>年龄</th>
                    <th width='200'>地址</th>
                </tr>
            </thead>
            <tbody>
                <tr align="center">
                    <td>1001</td>
                    <td>小张</td>
                    <td>男</td>
                    <td>38</td>
                    <td>武汉</td>
                </tr>
                <tr align="center">
                    <td>1002</td>
                    <td>小赵</td>
                    <td>男</td>
                    <td>21</td>
                    <td>大庆</td>
                </tr>
                <tr align="center">
                    <td>1003</td>
                    <td>小罗</td>
                    <td>男</td>
                    <td>22</td>
                    <td>重庆</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        //先获取tbody下的所有tr
        var trs = document.querySelector('tbody').querySelectorAll('tr');
        // var tds = document.querySelectorAll('td')
        //2、给每个tr绑定事件
        for(var i=0;i<trs.length;i++){
            var tds = trs[i].querySelectorAll('td');//找出下标为i的这一行的所有td
            for(let j=0;j<tds.length;j++){
                tds[j].onmouseover = function(){//当鼠标经过时，设置class属性为bg
                    this.className = 'bg';
                }
                tds[j].onmouseout = function(){//当鼠标移出时，设置class属性为空
                    this.className='';
                }
            }
        }
    </script>
</body>

二、属性操作

1、获取属性值

（1）对于元素（标签）的固有属性有两种方法：

①元素名.固有属性

②元素名.getAtrribute（‘固有属性’）

（2）对用户自定义的属性：元素名.getAttribute（‘自定义属性’）

<body>
    <div id="demo" index="1" class="nav"></div>
    <script>
        var div = document.querySelector('div');
        //对于元素标签的固有属性两种方法获取
        //1、元素名.固有属性名
        //2、元素名.getAttribute('固有属性')
        //对于用户给元素自定义的属性，只能通过第二种方式来获取
        //2、元素名.getAttribute('固有属性')
        console.log("Id:",div.id)//输出：    Id: demo
        console.log('Id:',div.getAttribute('id'))//输出：    Id: demo
        //打印出什么的属性值

        console.log("Index:",div.index)//输出：    Index: undefined
        //index不是div的固有属性
        console.log("Index:",div.getAttribute('index'))//输出：    Index: 1

        console.log("class:",div.class)//输出：    class: undefined
    </script>
</body>

2、设置属性值

（1）固有属性值的设置

①element.属性名 = 值

②element.setAttribute（'属性','值'）

（2）对于用户自定义的属性值的设置

element.setAttribute（'属性','值'）

3、移出属性值

element.removeAttribute（'属性'）

案例：在未点击移出属性按钮之前，div中含有id = 'test'，index = '1001' ，class = 'nav'；在点击移出按钮之后，div只含有id = 'test'，class = 'nav'；index = '1001'被移除了；

<body>
    <div></div>
    <button>移除属性</button>
    <script>
        var div = document.querySelector('div');
        div.id = 'test';
        // div.className = 'nav';
        div.setAttribute('index',1001);
        div.setAttribute('class','nav');

        var btn = document.querySelector('button');
        btn.onclick = function(){
            div.removeAttribute('index')
        }
    </script>
</body>

三、HTML5中自定义属性

1、自定义属性规范：data-属性名

2、实现方式

（1）在html标签中自定义：data-属性名

（2）在JS中定义：element.dataset.属性名 = '值'

3、获取自定义属性值：

（1）element.dataset.属性名

（2）element.dataset['属性名']

dataset是一个集合，里面存放了所有以data开头的自定义属性，如果自定义属性里面包含有多个连字符（-）时，获取的时候采取驼峰命名法。

案例：点击按钮获取p标签的属性值

<body>
    <div>
        <p data-index="111" data-list-phone="123456789">西安邮电大学</p><!--data-是前缀，属性名是index-->
        <button>获取属性</button>
    </div>
    <script>
        var p = document.querySelector('p');
        p.dataset.class = 'nav';
        p.setAttribute('data-name','孔明');

        var btn = document.querySelector('button');
        btn.onclick = function(){
            console.log("Name:",p.dataset.name);//输出   Name: 孔明
            console.log("index",p.dataset['index']);//输出   index 111
            console.log("Phone:",p.dataset.listPhone)//输出   Phone: 123456789
        }
    </script>
</body>

Han_Zhou_Z

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript(DOM)排他和属性

目录一、排他思想1、鼠标事件二、属性操作1、获取属性值2、设置属性值（1）固有属性值的设置（2）对于用户自定义的属性值的设置3、移出属性值三、HTML5中自定义属性1、自定义属性规范：data-属性名2、实现方式3、获取自定义属性值：一、排他思想定义：简单理解就是排除掉其他的（包括自己），然后再给自己设置想要实现的效果。总而言之，排他思想的实现步骤就是所有元素全部清除与设置当前元素。案例：点击任意一个按钮，其他按钮不被选择，背景颜色变回原来的颜..
复制链接

扫一扫