javascript - html dom 编辑/添加属性/功能

Question

我在html中有这样的东西

<div class="change"><div>
<div class="change"><div>
<div class="change"><div>
<div class="change"><div>

现在我们来看看java脚本

var base = document.getElementsByClassName("change");
base[0].setAttribute();
console.log(base[0]);

从控制台我可以看到我正在获取一个对象，但我不能以这种方式编辑它，是否还有其他可能性来编辑/添加属性（我需要添加一个 onclick 函数来喜欢 100 个元素）。这非常困难通过 document.getElementById 获取更高的对象，所以...有人对此有解决方案吗？^^

Answer 1

只需使用jQuery。然后只需执行以下操作即可：

$(document).ready(function () {
    $('.change').click(function () {
        $(this).attr('class', 'new-value');
    });
});

JSFiddle 演示在这里。

Answer 2

您可以添加这样的属性

var element = document.getElementByClassName('change')[0];
element.setAttribute(attributeName,attributeValue);

Answer 3

您可以使用以下代码完成此操作：

var nodes = document.querySelectorAll('.change'),
    length = nodes.length,
    counter = 0;

for (; counter < length; counter += 1) {
    // set an attribute.
    nodes[counter].setAttribute('data-test', 'test' + counter);
    // add a click event.
    nodes[counter].addEventListener('click', function () {
        alert('Yep, you clicked me');
    }, false);
}

演示在这里

Answer 4

使用 jQuery：

 $('.change').on('click', function() {
    // Action
});

setAttribute 的语法：

Object.setAttributte(attribute, value);