name 이 설정된 html 태그에 접근할 때 document 객체 또는 jquery 를 사용할 수 있다. name 속성으로 html 태그에 접근하면 배열 리스트 형태로 리턴되는 것을 볼 수 있다. 특정 태그에 접근하려면 name 속성에 지정한 이름을 작성하면 된다.
html 태그 name 선택과 접근
document 객체 jquery 비교
자바스크립트를 이용하여 html 태그로 접근할 때 여러가지 요소를 이용한다.
html 태그의 id, class 를 자주 사용하겠지만 name 속성에 접근할 수 있다.
name 속성은 서버로 데이터를 보내기 위해 html 태그에 지정해 주는 이름으로 복수개의 같은 태그에 다른 이름으로 지정하여 사용한다.
과거 form 태그 내부에 위치한 태그들에 name 속성으로 이름을 정해주고 서버로 데이터를 전송했지만 지금은 다른 여러가지 방법들이 존재한다.
그러나 id 와 같은 유일무이한 것을 사용하는 것보다 여러모로 쓸만하다.
html 태그 name 속성
html 태그를 사용할 때 태그를 특정하는 방법에는 3가지 속성을 사용한다.
id, class, name 이다.
최근의 html 강의를 보면 name 속성을 잘 사용하지 않는 경우들이 있지만, 과거에는 많이 사용했다.
데이터를 form 으로 전송하는 방법을 취했기 때문이기도 하고, 지금처럼 비동기방식이 거의 없었기 때문이기도 하다.
name 속성의 특징은 id와 class 와는 다른데, 서버에 보낸 값을 사용하기 위함이기도 하다.
name 속성이 지정된 html 태그는 데이터 전송시 name 값으로 전송되기 때문.
최근 jquery의 serialize 메서드를 사용하면 html 태그들 중 name 속성이 지정된 태그의 값을 비동기로 서버에 전달할 수 있고, 서버는 name 값을 읽어 데이터 처리를 할 수 있다.
아래는 html 태그에 name 속성을 지정한 코드이다.
<div>
<input type="text" name="txt1" />
<input type="text" name="txt2" />
<input type="text" name="txt3" />
<input type="text" name="txt4" />
</div>
<div>
<input type="checkbox" name="chk" value="chk1" />체크1
<input type="checkbox" name="chk" value="chk2" />체크2
<input type="checkbox" name="chk" value="chk3" />체크3
<input type="checkbox" name="chk" value="chk4" />체크4
</div>name 속성 접근하기 값 가져오기
name 속성을 이용해 html 태그에 접근하는 방법은 document 객체 또는 jquery 를 사용하면 된다.
name 속성을 지정할 때 같은 이름을 지정할 수도 있는데 checkbox 또는 radio 같이 그룹으로 묶어 사용할 때일 수도 있지만, 이것이 가능한 이유는 name 속성은 class 와 같은 배열리스트로 처리가 된다.
아래는 위의 코드를 접근하는 자바스크립트 코드이다.
document 객체와 jquery 를 같이 사용하고 비교해 본다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready( function() {
/* without resources */
});
$(window).on('load', function() {
/* with resources */
var htmlObj;
htmlObj = document.getElementsByName("txt1")
console.log("input text", htmlObj);
htmlObj = document.getElementsByName("chk")
console.log("input checkbox", htmlObj);
htmlObj = $("input:text[name=\"txt1\"]");
console.log("input text", htmlObj);
htmlObj = $("input:checkbox[name=\"chk\"]");
console.log("input checkbox", htmlObj);
});
</script>html 태그인 input 과 checkbox 를 name 속성을 이용하여 접근하고 있다.
F12 개발자모드의 Console 화면에서 결과를 확인해 보자.
데이터의 형태는 배열 리스트인 것을 볼 수 있다.
전체코드와 결과
위의 코드에 대한 전체코드를 살펴보자.
html 태그로 input 태그를 사용하여 text 입력과 checkbox 선택을 할 수 있도록 하고 name 속성을 지정하였다.
document 객체와 jquery 를 사용하여 name 값에 접근할 수 있도록 하였다.
<!-- html5 웹문서 명시 -->
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- 반응형 meta 명시 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="container">
<div>
<input type="text" name="txt1" />
<input type="text" name="txt2" />
<input type="text" name="txt3" />
<input type="text" name="txt4" />
</div>
<div>
<input type="checkbox" name="chk" value="chk1" />체크1
<input type="checkbox" name="chk" value="chk2" />체크2
<input type="checkbox" name="chk" value="chk3" />체크3
<input type="checkbox" name="chk" value="chk4" />체크4
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready( function() {
/* without resources */
});
$(window).on('load', function() {
/* with resources */
var htmlObj;
htmlObj = document.getElementsByName("txt1")
console.log("input text", htmlObj);
htmlObj = document.getElementsByName("chk")
console.log("input checkbox", htmlObj);
htmlObj = $("input:text[name=\"txt1\"]");
console.log("input text", htmlObj);
htmlObj = $("input:checkbox[name=\"chk\"]");
console.log("input checkbox", htmlObj);
});
</script>
</html>'programming > TroubleShootInG' 카테고리의 다른 글
| 자바스크립트 동기 비동기 동작 방식 이해 (0) | 2022.12.05 |
|---|---|
| html 입력 태그 전체 선택 ctrl + a 기능 만들기 input textarea 태그 한정 (0) | 2022.12.02 |
| TOAST UI Editor / 토스트 ui 에디터 html 설정하기 setHTML 메서드 사용하기 (0) | 2022.11.29 |
| html 태그 요소를 자바스크립트 함수 파라미터로 사용하기 함수의 인자값으로 사용하기 (0) | 2022.11.28 |
| TOAST UI Editor / 토스트 ui 에디터 html 가져오기 getHTML 메서드 사용하기 (0) | 2022.11.28 |
댓글