欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Dom Api之操作标签属性

程序员文章站 2022-04-10 19:25:11
标签元素的属性有两类:1.标签自带属性.2.自定义属性.一、获取属性.获取属性有两种方法:1.element.属性名.2.element.getAttribute(属性名).下面用代码看一下他们的区别:

标签元素的属性有两类:1.标签自带属性.2.自定义属性.

一、获取属性.

获取属性有两种方法:1.element.属性名.2.element.getAttribute(属性名).下面用代码看一下他们的区别:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>dom api</title>
</head>

<body>
    <header>dom api</header>
    <button>button</button>
    <div id='count' name='div'>0</div>
</body>

<script>
    //获取button标签
    let buttonEle = document.querySelector('button');
    //获取div标签
    let divEle = document.querySelector('#count');
    //为button的onclick绑定事件
    buttonEle.onclick = function() {
        console.log('divEle.id: ' + divEle.id);
        console.log('divEle.name: ' + divEle.name);

        console.log('getAttribute-id: ' + divEle.getAttribute('id'));
        console.log('getAttribute-name: ' + divEle.getAttribute('name'));
    }
</script>

</html>

Dom Api之操作标签属性

可以看到,通过element.属性值来获取的只能是标签的自带系统属性,我们自定义的属性通过这种方式是获取不到的;而element.getAttribute(属性名)则可以获取以上两种属性.

二、设置属性.

设置属性也有两种方式,与获取类似:1.element.属性名.2.element.getAttribute(属性名).通过代码看一下他们的区别:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>dom api</title>
</head>

<body>
    <header>dom api</header>
    <button>button</button>
    <div id='count'>0</div>
</body>

<script>
    //获取button标签
    let buttonEle = document.querySelector('button');
    //获取div标签
    let divEle = document.querySelector('#count');
    //为button的onclick绑定事件
    buttonEle.onclick = function() {
        divEle.name = '233';
        divEle.id = 'countEle';
        console.log('divEle.name: ' + divEle.getAttribute('name'));
        console.log('divEle.id: ' + divEle.id);
        divEle.setAttribute('name', '233');
        divEle.setAttribute('id', 'countNewId');
        console.log('divEle.setAttribute-name: ' + divEle.getAttribute('name'));
        console.log('divEle.setAttribute-id: ' + divEle.id);
        divEle.removeAttribute('id');
        divEle.removeAttribute('name');
    }
</script>

</html>

当点击按钮后:

Dom Api之操作标签属性

Dom Api之操作标签属性

阔以看到,当我们通过element.属性名设置属性时,只对自带属性有效.而element.setAttribute可以设置任何类型的属性.removeAttribute会移除任何类型的属性.

三、dataset.

dataset是h5新增的属性,它提倡我们以data-属性名的格式命名自定义属性,这么做,1是方便区分自定义属性和自带属性.2是在js中可以使用dataset来获取和设置自定义属性.

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>dom api</title>
</head>

<body>
    <header>dom api</header>
    <button>button</button>
    <div id='count'>0</div>
</body>

<script>
    //获取button标签
    let buttonEle = document.querySelector('button');
    //获取div标签
    let divEle = document.querySelector('#count');
    //为button的onclick绑定事件
    buttonEle.onclick = function() {
        divEle.dataset['name'] = 'countDiv';
        console.log(divEle);
    }
</script>

</html>

Dom Api之操作标签属性

可以看到,当我们使用dataset来设置自定义属性时,它会自动在属性名前添加'data-'前缀.

同理,我们获取的时候,也只是通过data-后面的名字来操作的:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>dom api</title>
</head>

<body>
    <header>dom api</header>
    <button>button</button>
    <div id='count'>0</div>
</body>

<script>
    //获取button标签
    let buttonEle = document.querySelector('button');
    //获取div标签
    let divEle = document.querySelector('#count');
    //为button的onclick绑定事件
    buttonEle.onclick = function() {
        divEle.dataset['countName'] = 'countDiv';
        console.log(divEle);
        console.log("divEle.dataset['countName']: " + divEle.dataset['countName']);
        console.log("divEle.dataset.countName: " + divEle.dataset.countName);
    }
</script>

</html>

Dom Api之操作标签属性

需要注意的是,当自定义属性的名字段数比较多时,如上面的data-count-name,我们需要通过驼峰命名发来获取和设置dataset中的属性值.

本文地址:https://blog.csdn.net/Wenliuyong/article/details/107320890