JavaScript
[JS] HTML태그에 접근하기 : document.getElementByXXX()
꿈꾸는개발자maker
2022. 7. 22. 21:53
728x90
HTML 태그에 접근하기
getElementById()
아이디로 접근하기
getElementById() : 반환타입 Element
해당 아이디의 요소를 선택함. id는 단일만이라 element이고 s로 안씀
<button onclick="accessId();">아이디로 접근</button>
<script>
function accessId(){
// 아이디로 접근 누르면 웹상 파란 네모에 값이 들어가게끔 만들 것임
// 파란 네모(엘레먼트)에 접근해야하는데 id,class 등등 사용하여 접근 가능
var area = document.**getElementById**('area1'); /* 코드 의미 : 다큐먼트에서 엘리먼트를 id로 읽어오겠다 */
area.style.backgroundColor = 'pink';
area.innerHTML = '아이디 접근 성공';
area.innerHTML **+=** '아이디 접근 성공'; /* 누를 때마다 출력하게 하고 싶을 경우 : += */
}
</script>
getElementsByTagName()
태그명으로 접근하기
getElementsByTagName('태그명') : 반환타입 [] HTMLCollection
지정된 태그 이름을 가진 모든 자식 요소 컬렉션을 반환
추출할 태그명을 매개변수 넣으면 된다 li를 추출하고 싶으면 'li',ul 추출하고 싶으면 'ul'
<button onclick="accessTagName();">태그 명으로 접근</button>
<script>
function accessTagName(){
// var : 변수 선언 예약어
// .getelementsByTagName() : 지정된 태그 이름을 가진 모든 자식 요소 컬렉션을 반환
var list = document.getElementsByTagName('li'); /* 문서내부 전체 <li>태그를 카운트한다는 의미. 해당 태그를 전부 카운트*/
console.log(list);
// 태그명이 하나라는 보장 x -> 여러개 가지고 올 수 있다
// 즉, 엘리먼트가 아닌 element's' 엘리먼츠. getElementsByTagName()
// 변수 선언 var : 데이터타입 제한x
// 지금까지 str, boolean, array 등 받음
var changeColor = 50
for (var i = 0; i<list.length; i++){
list[i].style.backgroundColor = "rgb(130,220," + changeColor +")";
changeColor += 50; /* rgb(0,0,0) 색상 컬러의 매개변수를 변수처리해서 색상을 변화시킴*/
// <li>
}
}
</script>
getElementsByName()
name으로 접근하기
getElementsByName() : 반환타입 [] list
해당 name 속성값을 가지는 요소를 모두 선택함.
같은 name이 여러개일 수 있으니 엘레멘'츠' 사용
<form>
<fieldset>
<legend>취미</1egend>
<table>
<tr>
<td><input type="checkbox" name="hobby" value="game" id="game"><label>게임</label></td>
<td><input type="checkbox" name="hobby" value="music" id="music"><label>음악</label></td>
<td><input type="checkbox" name="hobby" value="movie" id="movie"><label>영화</label></td>
</tr>
<tr>
<td><input type="checkbox" name="hobby" value="book" id="book"><label>독서</label></td>
<td><input type="checkbox" name="hobby" value="travel" id="travel"><label>여행</label></td>
<td><input type="checkbox" name="hobby" value="exercise" id="exercise"><label>운동</label></td>
</tr>
</table>
</fieldset>
</form>
<br>
<div id="area2" class="area"></div><br>
<button onclick="accessName();">name으로 접근</button> <!-- 버튼 클릭하면 accessName() 실행 -->
<script>
function accessName(){
// .getelementsByName() : 지정된 태그 이름을 가진 모든 요소의 컬렉션을 반환
var hobby = document.getElementsByName ('hobby');
console.log(hobby);
var checkItem = ''; /* checkItem은 str */
// length 속성은 컬렉션의 요소 수를 반환
for (var i = 0; i < hobby.length; i++){
if(hobby[i].checked == true) { // console창에서 check항목 체크하는 조건문
checkItem += hobby[i].value + "선택함<br>";
// .value를 사용할 때는 input태그의 밸류값을 가지고 올 때만 쓰고 다른 경우에는 innerHTML사용
// input 태그 외에는 value가 없음.
}
}
getElementsByClassName()
class로 접근하기
getElementsByClassName() : 반환타입 [] HTMLCollection
해당 클래스에 속한 요소 모두를 선택
button onclick="accessClass();">classe 2</button>
<script>
function accessClass(){
var area = document.getElementsByClassName('area'); // 컬렉션타입 2가 변수로 들어감
console.log(area);
for(var i = 0; i < area.length; i++){
area[i].style.borderstyle = 'dashed';
}
// background-color ==> backgroundColor, border-style ==> borderStyle
// CSS에서의 코드들이 js에서 이런식으로 바뀜
}
</script>
728x90
반응형