[JavaScript] How to get the text value from input_getElementById().value

[input에서 텍스트값 가져오는 방법]

코드를 짜다보면 text type으로 된 input에서 값을 가져와야 하는 경우가 있다. 

특히 나는 select box의  option들을 text input에 쓴 것과 비교할 일이 있었다.

이때 바로getElementById() 함수를 이용해 셀렉터에 접근할 수 있다.

we sometimes have to get the text value from the input tag.

then, you can use getElementById() method.

look at this code :

1 2 3 4 5 6 7 8 9 10

var Opts = document.getElementById("bundle").options; var txtOpt = document.getElementById("bundleTxt").value; for(var i = 0; i < Opts.length; i++) {     if(Opts[i].value == txtOpt) {         $("#bundle").val(txtOpt).attr("selected", "selected");         break;     } else {         $("#bundle").val('').attr("selected", "selected");     } } Colored by Color Scripter

cs

1. getElementById()는 html요소의 id로 접근하는 메소드이다.

options속성은 select box의 옵션에 접근하는 해당 메소드의 속성이다.

value 속성은 input의 값을 가져온다. 따라서 텍스트창에 입력한 값을 가져온다.

2. select box의 옵션들을 반복문으로 돌려서 입력한 텍스트와 같은지 판단한다.

3. 같은 옵션이 있으면 그것을 seleted한 후, break로 for문을 빠져나온다.

(멈추는 지점이 없고 무조건 옵션을 다 돌면 이 코드의 의미가 없어짐)

4. 같은게 없었다면 내가 지정한 다른 옵션을 selected한다.

(나는 value에 공백을 주고, 내용은 '기타'인 옵션을 추가했었음)




* 참고 : 요소에 접근할 수 있는 다양한 메소드들
(by ankit31894 from stackOverflow)

Use document.getElementsByClassName('class_name')[whole_number].value which returns a Live HTMLCollection

Eg. document.getElementsByClassName("searchField")[0].value;if this is the first textbox in your page.

Method 3:

Use document.getElementsByTagName('tag_name')[whole_number].value which also returns a live HTMLCollection

Eg. document.getElementsByTagName("input")[0].value; ,if this is the first textbox in your page.

Method 4:

document.getElementsByName('name')[whole_number].value which also >returns a live NodeList

Eg. document.getElementsByName("searchTxt")[0].value; if this is the first textbox with name 'searchtext' in your page.

Method 5:

Use powerful document.querySelector('selector').value which uses CSS selector to select element

Eg. document.querySelector('#searchTxt').value; selected by iddocument.querySelector('.searchField').value; selected by classdocument.querySelector('input').value; selected by tagnamedocument.querySelector('[name="searchTxt"]').value; selected by name

Method 6:

document.querySelectorAll('selector')[whole_number].value which also uses CSS selector to select elements but it returns all elements with that selector as a static Nodelist.

Eg. document.querySelectorAll('#searchTxt')[0].value; selected by iddocument.querySelectorAll('.searchField')[0].value; selected by classdocument.querySelectorAll('input')[0].value; selected by tagname
document.querySelectorAll('[name="searchTxt"]')[0].value; selected by name