Daily coding
Java Script : id / class / name - 아이디, 클래스, 네임으로 태그 데이터 받아오기 본문
Java Script : id / class / name - 아이디, 클래스, 네임으로 태그 데이터 받아오기
sunnnkim 2020. 1. 7. 18:02* Javascript에서 id, class, name
id : 객체의 이름을 부여할 때 중복값을 허용하지 않는다(하나의 파일에는 반드시 1개의 아이디만 인식)
Javascript에서 html 태그의 값을 가져오거나 내보낼 때 이용한다.
class : 객체의 이름을 부여할 때 중복값을 허용한다.
css에서 주로 사용한다.
name : jsp 등 외부로 값을 던질 때 사용한다.
* id, name : input 태그에서 많이 사용함
* 특징
- class 와 name은 중복이 가능하다
- id는 자바스크립트에서 확인용, name은 jsp 전송용으로,
같은 이름을 주고 _등의 기호로 구분하여 사용함
- id 처리 : getElementById
var text = document.getElementById("pid").innerHTML;
document.getElementById("_str").value = text;
- class 처리 : getElementsByClassName("classname")[index]
var text = document.getElementsByClassName("pclass")[0].innerHTML;
alert(text); --> 정상작동
- 클래스는 중복값이 있을 수 있기 때문에 getElements로 받고, 한개 뿐이라도 반드시 배열인덱스를 지정해주어야 한다.
- name 처리 : getElementsByName("name")[index];
var text = document.getElementsByName("pname")[0].innerHTML;
document.getElementsByName("str")[0].value = text;
- name도 중복값을 허용하기 때문에 반드시 배열로 데이터가 넘어온다.
마찬가지로 배열인덱스를 지정하여 받아야한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- id, class, name -->
<p id="pid">p id pid</p>
<br><br>
<p class="pclass">p class pclass</p>
<br><br>
<h3 class="pclass">class는 중복값이 허용된다.</h3>
<br><br>
<p name="pname">p name pname</p>
<br><br>
id, name : input 태그에서 많이 사용함
<!-- class는 중복값을 허용한다 -->
<button type="button" onclick="func()">button</button>
<br><br>
<input type="text" id="_str" name="str">
<script type="text/javascript">
// class 와 name은 중복이 가능하다
// id는 자바스크립트에서 확인용,
// name은 jsp 전송용으로,
// 같은 이름을 주고 _등의 기호로 구분하여 사용함
function func() {
/* alert("func()"); 함수 동작 확인용*/
// id 처리
// var text = document.getElementById("pid").innerHTML;
// document.getElementById("_str").value = text;
// class 처리 : document.getElementsByClassName("classname")[index]
// var text = document.getElementsByClassName("pclass")[0].innerHTML;
// alert(text); --> 정상작동
// name 처리 : getElementsByName("name")[index];
var text = document.getElementsByName("pname")[0].innerHTML;
document.getElementsByName("str")[0].value = text;
}
</script>
</body>
</html>'Front-end > Java Script' 카테고리의 다른 글
| JavaScript : String 변수와 Number변수 (0) | 2020.01.08 |
|---|---|
| JavaScript : setInterval() 이용하여 타이머 만들기 (0) | 2020.01.07 |
| JavaScript : checkBox 누르면 금액 추가되는 예제 (0) | 2020.01.06 |
| JavaScript : Date()함수로 날짜구하기 (0) | 2020.01.06 |
| JavaScript : Timer ( setInterval ) 타이머 (0) | 2020.01.06 |
