原生js 获取自定义属性

方法1 获取事件源,找到当前事件源的自定义属性节点

1, html样式 创建自定义属性

    <ul>
        <li name="text-one" lip="TEXT-ONE" class="active">text-one</li>
        <li name="text-second" lip="TEXT-SECOND">text-second</li>
        <li name="text-third" lip="TEXT-THIRD">text-third</li>
    </ul>
    <div class="cont">
        <span class="all">全部</span>
        <input type="text" name="" id="">
    </div>

2, 通过js event.target获取事件源 getAttribute获取自定义属性节点

    let ul = document.querySelector('ul');
    //给ul设置点击事件 使用事件委派获取所有内容
    ul.addEventListener('click', function (event) { 
        if (event.target.nodeName === 'LI') { //判断点击事件里面是否有li标签
            for (let i = 0; i < ul.children.length; i++) { //排他思想 点击增加下一个active样式时,删除前面增加的active样式
                ul.children[i].classList.remove('active')
            }
            event.target.classList.add('active')
            document.querySelector('.all').textContent = event.target.getAttribute('name') //获取事件源的元素节点 使用getAttribute
            document.querySelector('input').value = event.target.getAttribute('lip') 
        }
    })

3, 效果图呈现

方法2 遍历所有li,截取单个自定义属性值 

* data-* 中属性名全是小写，中间用 - 隔开
* 如果使用了大写字母，在渲染时也会被替换成小写的

    <ul>
        <li data-name="text-one" data-lip="TEXT-ONE" class="active">text-one</li>
        <li data-name="text-second" data-lip="TEXT-SECOND">text-second</li>
        <li data-name="text-third" data-lip="TEXT-THIRD">text-third</li>
    </ul>
    <div class="cont">
        <span class="all">全部</span>
        <input type="text" name="" id="">
    </div>

2, 通过js 样式dataset获取自定义属性

    //遍历所有li
    let li = document.querySelectorAll('li');
    let names = null //保存全局变量names
    let lips = null //保存全局变量lips
    li.forEach(function (item) { //遍历所有li
        item.addEventListener('click',function () { //切忌names和lips不要放在点击事件外,要不然会forEach会循环遍历完然后才返回结果
            names = item.dataset['name'] //获取到自定义的data-name
            lips = item.dataset['lip'] //获取自定义属性data-lip
            document.querySelector('.all').textContent = names //赋值names给all
            document.querySelector('input').value = lips //赋值lips给input输入框
        })
    })

3,效果图呈现