기계는 거짓말하지 않는다

오브젝트 얻어오기 (getElement) 본문

Web/JS

오브젝트 얻어오기 (getElement)

KillinTime 2020. 12. 1. 20:43

JavaScript

 

id 또는 name 으로 얻기

var element = document.getElementById("id");	// get element by id
var nameElement = document.getElementsByName("name")[0];	// get elements by name

name은 중복이 가능하고 id는 unique 하기 때문에 name은 getElements 로 복수이다. 인덱스가 붙는것을 확인.

 

JQuery

var element = $("#button");	// get element by id
var nameElement = $("tag[name='tagName']")[0];	// get elements by name
// tag에는 선언한 tag가 들어가야 한다. ex) form, input, button, a, img 등
// tagName 에는 선언한 tag의 이름이 들어가야 한다.

 

 

Test

<body>
	<button name="button">Name 버튼1</button><br>
	<button name="button">Name 버튼2</button><br>
	<button id="button">ID 버튼</button><br>
	<a onclick="check()"><b style="font-size:20px; cursor:pointer; text-decoration:underline;">확인</b></a>
	
	<script>
		function check() {
			var button = document.getElementsByName("button")[0];
			console.log("JavaScript: " + button.innerHTML);
			
			button = document.getElementsByName("button")[1];
			console.log("JavaScript: " + button.innerHTML);
			
			button = document.getElementById("button");
			console.log("JavaScript: " + button.innerHTML);
			
			var button2 = $("button[name='button']")[0];
			console.log("JQuery: " + button2.innerHTML);
			
			button2 = $("button[name='button']")[1];
			console.log("JQuery: " + button2.innerHTML);
			
			button2 = $("#button");
			console.log("JQuery: " + button2.text());
		}
	</script>
</body>

HTML
Console

'Web > JS' 카테고리의 다른 글

radio 버튼 선택, 값 control  (0) 2020.12.03
select option 선택, 값 control  (0) 2020.12.03
checkbox 확인, 변경, 강제클릭  (0) 2020.12.02
'Web/JS' Related Articles more
Comments