Question

我正在尝试使用dojo.query向元素添加id。我不确定它是否可能。我尝试使用下面的代码添加id，但它不起作用。

dojo.query('div[style=""]').attr("id","main-body");

<div style="">
  content
</div>

如果无法做到这一点，还有其他办法吗？使用javascript或jquery？感谢。

Answer 1

你在元素中添加id的方法是正确的。

在Firefox 17和Chrome 23中，代码运行正常但我在IE9中遇到了问题。我怀疑你可能有同样的问题。

在IE9中，查询div[style=""]不返回任何结果。有趣的是，它在兼容模式下工作正常！

如果HTML元素具有内联空样式属性，则正常模式下的 IE9 似乎在将元素添加到DOM时保留。

因此，解决方案是使用不同的查询来查找所需的div。您可以尝试查找具有空样式属性 OR 且完全没有样式属性的div。

这样的查询应该有效：

div[style=""], div:not([style])

看看下面的例子：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test Page</title>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.8.2/dojo/dojo.js"></script>
    <script type="text/javascript">
        dojo.require("dojo.NodeList-manipulate");//just for the innerHTML() function

        dojo.addOnLoad(function () {
            var nodeListByAttr = dojo.query('div[style=""], div:not([style])');
            alert('Search by attribute nodeList length:' + nodeListByAttr.length);
            nodeListByAttr.attr("id", "main-body");

            var nodeListByID = dojo.query('#main-body');
            alert('Search by id nodeList length:' + nodeListByID.length);
            nodeListByID.innerHTML('Content set after finding the element by ID');
        });
    </script>
</head>
<body>
    <div style="">
    </div>
</body>
</html>

希望这有帮助

Answer 2

@Nikanos'的回答涵盖了查询问题，我想补充说，任何查询都会返回一个元素数组，如果是Dojo则是dojo/NodeList。

问题是您要将相同的id分配给多个DOM节点，尤其是包含div:not([style])的查询。我建议使用更具体的查询，例如 div 的body孩子：

var nodes = dojo.query('body > div:first-child');    
nodes.attr("id", "main-body");

为了使其更加健壮，不要操纵所有节点，只需要操作第一个节点（即使应该只有一个节点）：

dojo.query('body > div:first-child')[0].id = "main-body";

这项工作也在IE9中，请参阅实际操作：http://jsfiddle.net/phusick/JN4cz/

Modern Dojo中写的相同示例：http://jsfiddle.net/phusick/BReda/

如何使用dojo.query向搜索元素添加id

2 个答案: