[ JavaScript ] 해당 클래스의 요소를 일괄 동작시키기 / 자주쓰이는 문법 정리

해당 클래스의 요소를 일괄 동작시키는 함수이다.

1. 임시 변수에 문서속에서 액션을 주고자 하는 부품의 클래스명을 대입.

2. 반복문을 해당 클래스 부품의 개수만큼 돌린다.

3. 임시 변수를 배열로 사용하여 임시배열변수에 액션 지정.

function myFunction() { 
  var x = document.getElementsByClassName("class-name"); 
  for (var i = 0; i < x.length; i++) { 
    x[i].style.display = "none"; 
  } 
}​

 

---

자주 쓰이는 문법을 정리해보았다.

▶내용삽입
document.getElementById("액션을 적용할 부품의 아이디 이름").innerHTML = 작성할 내용; 
document.getElementByClassName("액션을 적용할 부품의 클래스명")
※input타입 태그(ex.textarea, textfield etc.)에 삽입시 :  .value(값)
document.getElementById("아이디명").innerHTML = Date(); →날짜 삽입

※이벤트핸들러에 document.write 쓰면 해당 문서페이지의 html 내용이 전부 날라감. 
 이벤트핸들러로 JS출력이 문서에 누적되게 하려면 함수를 사용한 후 .innerHTML사용→<p>, <span>등의 부품에 

▶클래스(css) 변경
this.className = "해당 부품에 변경할 클래스 이름"; 

▶css속성 직접 변경
this.cssText = "해당 부품에 적용할 css속성-기존값에 상속 불가";

▶링크주소 변경
document.getElementById('아이디명').src='변경할 미디어 링크 주소';

▶해당 부품 숨기기/보이기 - display 속성 변경
document.getElementById('아이디명').style.display='none/inline/block/inline-block';

 

 

▶id와 class의 차이 
id는 같은 이름으로 여러 요소에 지정이 불가능. 단 하나의 요소에게만 한정.
그러나 class는 같은 이름으로 여러 요소에 지정이 가능.