Question

假设我正在通过服务器端代码生成标记。我正在生成一堆HTML标记，但我想添加自定义客户端行为。

使用JavaScript（如果我有对DOM节点的引用）我可以写：

var myDOMNode = ...
myDOMNode.myCustomAttribute = "Hi!";

现在的问题是，我不想仅使用唯一ID限定每个元素来初始化数据。对我来说真的很奇怪，没有一种更容易和不引人注意的方式来附加客户端行为。

如果我正确地记住这个，这是有效的IE内容。

<div onload="this.myCustomAttribute='Hi!'"></div>

如果我能够这样做，我应该能够通过标识符'myCustomAttribute'访问它的“数据上下文”，这正是我想要的。

Answer 1

以下内容有效但无效：

<div myattribute="myvalue"></div>

但是如果你用Javascript将它注入HTML，那么也许你不关心它。否则，您可以使用类似jQuery之类的东西来处理元素，然后再将它们添加到DOM中：

$(elements).each(function(){
     $(this).attr('myattribute','myvalue');
});

Answer 2

首先，如果您希望代码在IE以外的其他浏览器上运行，则应使用getAttribute和setAttribute方法访问自定义属性。

至于你的事件处理程序问题，这实际上取决于你如何添加事件处理程序。将函数直接分配给onXXXX属性上的元素将允许您通过this访问该元素。

如果您使用IE的attachEvent，则无法使用this，您可以使用event.srcElement访问生成事件的元素，但这可能是div的子元素。因此，您需要测试myCustomAttribute的存在并搜索祖先，直到找到它为止。

Answer 3

我确实对输入进行了评估，但我终于想出了这一点，这就是我进行初始化的方式，这一直是我身上的荆棘。

你永远不会做的是用一堆短期标识符来污染你的全局命名空间。任何时候你将id=""放在一个你正在做的元素上（对于任何顶级函数都是一样的）。通过依赖jQuery，HTML5数据和CSS，我认为这个问题非常优雅。

我所做的是为特定行为保留CSS类，然后使用HTML5数据来参数化行为。文档准备好后，我查询文档（使用Query）表示行为的CSS类并初始化客户端行为。

我一直在做很多ASP.NET，在这种情况下，id=""和name=""都属于ASP.NET，对于除了内部ASP.NET之外的任何东西都没用。您通常发现自己要做的是获取一个名为ClientID的服务器端属性，您可以从客户端JavaScript引用它，这很麻烦。他们在4.0中变得更容易，但从根本上来说，我认为它已经破了。

使用CSS的混合，HTML5数据和jQuery完全解决了这个问题。以下是使用正则表达式验证文本框输入的附加行为示例。

<input type="text" class="-input-regex" data-regex="^[a-z]+$" />

这是剧本：

$(function () {

    function checkRegex(inp) {
        if (inp.data("regex").test(inp.val()))
            inp.data("good-value", inp.val());
        else
            inp.val(inp.data("good-value"));
    }

    $(".-input-regex")
        .each(function () {
            // starting with jQuery 1.5 
            // you can get at HTML5 data like this
            var inp = $(this);
            var pattern = inp.data("regex");
            inp.data("regex", new RegExp(pattern));
            checkRegex(inp);
        })
        .keyup(function (e) {
            checkRegex($(this));
        })
        .change(function (e) {
            checkRegex($(this));
        })
        .bind("paste", undefined, function (e) {
            checkRegex($(this));
        })
        ;

});

完全干净，没有时髦id=""或突兀的依赖。

Answer 4

在HTML5中，完全针对该案例引入了HTML5 data attributes。

<!DOCTYPE html>
<div data-my-custom-attribute='Hi!'></div>

现在是corect，验证html。您可以使用任何数量的data-开头的任何名称。

有jQuery .data方法与他们互动。使用.data( key )获取.data(key, value)来设置data-key属性。例如，

$('div').each(function () {
     $(this).html($(this).data('myCustomAttribute')).data('processed', 'OK');
});

Answer 5

这个怎么样？

<script>
    function LoadElement(myDiv)
    {
        alert(this.myCustomAttribute);
    }
</script>

<div onload="LoadElement(this)"></div>

未经测试btw

Answer 6

由于您尝试对多个元素执行此操作，因此您可以尝试name属性和getElementsByName。

<div name="handleonload">...</div>

window.onload = function () {
    var divs = document.getElementsByName('handleonload');
    for (var i = 0; i < divs.length; i += 1) {
        divs[i].foo = 'bar';
    }
};

或者，您可以使用 选择器 ，使用库（例如jQuery和Prototype）及其各自的迭代器。这也允许您通过其他属性（例如class）进行搜索。

尽管如此，请谨慎使用您的术语：

obj.property = value;

<tag attribute="value">

Answer 7

<div style="width:100px;height:100px;border:solid black 1px" myCustomAttribute='Hi!' onclick="alert(myCustomAttribute);"></div>

Answer 8

onload事件用于服务器端事件。它不是标准html元素事件的一部分。

Answer 9

查看以下功能（尤其是 walk_the_dom ）：

// walk_the_DOM visits every node of the tree in HTML source order, starting
// from some given node. It invokes a function,
// passing it each node in turn. walk_the_DOM calls
// itself to process each of the child nodes.
var walk_the_DOM = function walk(node, func) {
    func(node);
    node = node.firstChild;
    while (node) {
        walk(node, func);
        node = node.nextSibling;
    }
};

// getElementsByAttribute takes an attribute name string and an optional
// matching value. It calls walk_the_DOM, passing it a
// function that looks for an attribute name in the
// node. The matching nodes are accumulated in a
// results array.
var getElementsByAttribute = function (att, value) {
    var results = [];

    walk_the_DOM(document.body, function (node) {
        var actual = node.nodeType === 1 && node.getAttribute(att);
        if (typeof actual === 'string' &&
                (actual === value || typeof value !== 'string')) {
            results.push(node);
        }
    });
    return results;
};

有了上述两个功能，现在我们可以这样做：

<a href="#" dreas="">some link</a>
<script>
var els = getElementsByAttribute('dreas');
if (els.length > 0) {
    els[0].innerHTML = 'changed text';
}
</script>

请注意我现在如何在不使用id或类名称的情况下查找特定元素（具有名为dreas的属性）...甚至是标记名称

Answer 10

根据我的搜索，看起来jQuery是最好的选择。您可以通过以下方式将对象绑定到DOM节点：

var domNode = ...
var myObject = { ... }
$(domNode).data('mydata', mymyObj);

然后您可以使用您的密钥以相同的方式重新调用数据。

var myObect = $(domNode).data('mydata');

我假设您也可以在此对象中存储对此的引用，但这可能是您真正想要的更多信息。希望我能提供帮助。

通过JavaScript设置匿名DOM元素的属性？

10 个答案: