getElementById.elements 没有拾取标签

Question

代码优先：

function loopForm() {

var e = document.getElementById("form1").elements;

for (var i = 0; i < e.length; i++) {
  alert('this is ' + e[i].ID + ' of type' + e[i].type);
}  

我将上面的代码放在一个 .js 中，它是从一个 .aspx 调用的，它在服务器端以一个名为 form1 的表单中的文本框、下拉列表、复选框和标签等动态创建的控件。我的问题是，

代码正在获取所有控件的 ID 和类型，除了 标签，我正在寻找一种使用标签进行操作的方法（更改 style.display、颜色等）

我尝试过使用 JQuery 代码，例如：

$("#form1 label").each(function() {  //I used "div", "label" and all sort
alert('hi');
});  

并且不起作用。请注意，虽然 document.getElementById 可能有效，但页面上存在的控件每次都不同，因此无法硬编码。

编辑：这是将标签添加到 .aspx 的方式（在我的代码隐藏中）：

private Label lbl = new Label();
System.Web.UI.HtmlControls.HtmlGenericControl NewDiv = new System.Web.UI.HtmlControls.HtmlGenericControl("DIV");  
NewDiv1.Controls.Add(lbl);
form1.Controls.Add(NewDiv);

Answer 1

当您谈论labels 时，我怀疑您指的是ASP.NET 服务器控件，例如asp:Label。如果是这种情况，那么您真的在寻找 <span> 标签，因为 ASP.NET 将 <asp:Label> 转换为 html <span>。

如果您想通过它们的 Id 来引用这些元素，您会注意到 ASP.NET 在客户端使用的 Id 与您在服务器端定义的不同。

但是，有一个解决方法。如果您希望客户端 ID 与服务器 ID 相同，请在您的服务器控件上设置以下属性：ClientIdMode="Static".

例如，在您的 .aspx 页面中，您有以下内容：

<asp:Label runat="server" Id="lblName"></asp:Label>

它会在 html 中生成类似这样的内容：

<span id="someservergeneratedid_lblName"></span>

如果你想自己控制id，可以这样做：

<asp:Label runat="server" ID="lblName" ClientIdMode="static"></asp:Label>

这将在 html 中生成：

<span id="lblName"></span>

Answer 2

代码正在获取所有控件的 ID 和类型，标签除外

这很正常。元素集合只应该包含表单控件（以及出于某种原因的字段集）。标签不应该在那里。

$("div").each(function() { alert($(this).val()); });

Div 和 label 元素没有值，所以这不起作用。

您可以轻松地选择 HTML 标签元素：

jQuery("#form1 label").each(function () {
    jQuery("body").append("<p>Appending because alert is disabled in snippets</p>");
});

label {
  display: block;
  padding: 2px;
  margin: 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1">
  <label>Hello
    <input name="hello" value="world">
  </label>
  <label>Goodbye
    <input name="hello" value="world">
  </label>
</form>

正如 Olivier 指出的那样，请确保您的 HTML 看起来符合您的预期，并且 ASP.NET 正在生成您正在寻找的具有正确类型的元素。