在 aspx 页面中访问 DOM 对象的正确或有效的方法

Question

我想获取用户输入的文本框的值。下面是aspx页面的代码片段：

<asp:TextBox id="txtUserName" runat="server" />

现在在 aspx 页面中访问 DOM 对象的最佳方式是什么

1.

<script type="text/javascript">
var value= document.getElementById(<%= txtUserName.ClientID %>).value;
alert(value);
</script>

2.

<script type="text/javascript">
var value= document.getElementById("txtUserName").value;
alert(value);
</script>

Answer 1

SharePoint 2013/SharePoint Online

在.NET Framework 4中引入 ClientIDMode 属性 指定 ASP.NET 如何生成 ClientID 用于可以在客户端脚本中访问的控件。

总而言之，由于 SharePoint 2013 以 .NET Framework 4 为目标， ClientIDMode 可以用来简化客户端的控制访问，如下所示：

例子：

<asp:TextBox id="boxUserName" runat="server" ClientIDMode="Static" />

JavaScript：

var boxUserName = document.getElementById("boxUserName") 

SharePoint 2010 及更早版本

先决条件： jQuery 库 使用的是提供一组强大的工具，用于匹配文档中的一组元素。

选项1

使用选择器根据Id查找元素，例如：

var quickLaunch = $('[id$=V4QuickLaunchMenu]'); // find element with id which ends with the text 'V4QuickLaunchMenu'

选项2

使用 CssClass 指定元素类，例如：

<asp:TextBox id="boxUserName" runat="server" CssClass="text-box" />

然后使用类选择器：

var boxUserName = $('input.text-box');

参考

• 如何：通过 ID 从 JavaScript 进行访问控制

Answer 2

选项1是正确的方法，但只需将变量名更改为与JavaScript关键字

不同的东西

<script type="text/javascript">
 var _value= document.getElementById(<%= txtUserName.ClientID %>).value;
 alert(value);
</script>

.

但我更愿意使用jquery，使生活变得更加容易。在您的ASPX或MasterPage中添加jQuery文件。然后使用以下行

<script type="text/javascript">
 $(document).ready(function(){     
   var _value= $(<%= txtUserName.ClientID %>).val();
   alert(value);
 });
</script>

.