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 온라인

.NET Framework 4가 clientIdMode 속성 asp.net은 클라이언트 스크립트에서 액세스 할 수있는 컨트롤에 대한 ClientID를 생성하는 방법을 지정합니다.

SharePoint 2013은 .NET Framework 4를 대상으로하기 때문에 아래에 설명 된대로 클라이언트 측에서 제어 액세스를 단순화하는 Control Access를 단순화하는 ClientIDMode가 활용 될 수 있습니다.

예 :

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

.

자바 스크립트 :

var boxUserName = document.getElementById("boxUserName") 

.

SharePoint 2010 및 이전 버전

전제 조건 : "nofollow"> 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');

.

참조

• JavaScript에서 컨트롤 액세스 id

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>

.