maneira correta ou eficiente de acessar o objeto DOM em páginas aspx

Question

Quero obter o valor da caixa de texto que um usuário insere.Abaixo está o trecho de código da página aspx:

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

Agora, qual é a melhor maneira de acessar o objeto DOM na 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 Online

No .NET Framework 4 foi introduzido Propriedade ClientIDMode que especifica como o ASP.NET gera o ClientID para um controle que pode ser acessado no script do cliente.

Para resumir, como o SharePoint 2013 é direcionado ao .NET Framework 4, ClientIDMode poderia ser utilizado para simplificar o acesso de controle no lado do cliente, conforme demonstrado abaixo:

Exemplo:

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

JavaScript:

var boxUserName = document.getElementById("boxUserName") 

SharePoint 2010 e versões anteriores

Pré-requisitos: biblioteca jQuery é usado que oferece um poderoso conjunto de ferramentas para combinar um conjunto de elementos em um documento.

Opção 1

Use o seletor para encontrar o elemento por Id, por exemplo:

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

opção 2

Usar CssClass para especificar a classe do elemento, por exemplo:

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

e então use o seletor de classe:

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

Referências

• Como:Controles de acesso de JavaScript por ID

Answer 2

A opção 1 é a maneira correta de fazer, mas basta alterar o nome da variável para algo diferente, pois é uma palavra-chave JavaScript

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

Mas prefiro usar jQuery que facilita muito a vida.Para isso adicione o arquivo jQuery em seu aspx ou masterpage.Então use a linha abaixo

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