forma correcta o eficiente de acceder al objeto DOM en páginas aspx

Question

Quiero obtener el valor del cuadro de texto que ingresa un usuario.A continuación se muestra el fragmento de código de la página aspx:

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

Ahora, ¿cuál es la mejor manera de acceder al objeto DOM en la página aspx?

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 en línea

En .NET Framework 4 se introdujo Propiedad ClientIDMode que especifica cómo ASP.NET genera el ClientID para un control al que se puede acceder en el script del cliente.

En resumen, dado que SharePoint 2013 apunta a .NET Framework 4, ClientIDMode Se podría utilizar para simplificar el acceso al control en el lado del cliente como se demuestra a continuación:

Ejemplo:

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

JavaScript:

var boxUserName = document.getElementById("boxUserName") 

SharePoint 2010 y versiones anteriores

Requisitos previos: biblioteca jQuery se usa que ofrece un poderoso conjunto de herramientas para hacer coincidir un conjunto de elementos en un documento.

Opción 1

Utilice el selector para buscar elementos por ID, por ejemplo:

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

opcion 2

Usar CssClass para especificar la clase de elemento, por ejemplo:

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

y luego usar el selector de clases:

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

Referencias

• Cómo:Controles de acceso desde JavaScript por ID

Answer 2

La opción 1 es la forma correcta de hacerlo, pero simplemente cambia el nombre de la variable a algo diferente, ya que es JavaScript Palabra clave

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

Pero prefiero usar jquery que hace que la vida sea mucho más fácil.Para eso, agregue el archivo jquery en su ASPX o Masterpage.Luego usa debajo de la línea

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