for Web Browser - 제어 대상을 찾기

26406 단어 JavaScriptJavaScript

제어 대상을 찾기

document.getElementsByTagName

  • 문서에서 태그의 이름을 통해 여러개의 엘리먼트를 가져온다.
  • 찾는 태그의 이름에 대한 엘리먼트를 모두 조회 하기 때문에 유의 해야함.
<!DOCTYPE html>
<html>
<body>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>javascript</li>
  </ul>
  <ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>javascript</li>  
  </ol>
  <script>
    // 태그이름이 li인 여러개의 엘리먼트를 가져온다.
    var lis = document.getElementsByTagName('li');
    // lis에 담긴 개수만큼 for문을 순회 하며 빨간색으로 바꾼다.
    for(var i=0; lis.length; i++){
      lis[i].style.color = 'red';
  }
  </script>
</body>
</html>

document.getElementsByClassName

  • 문서에서 클래스의 이름을 통해 여러개의 엘리먼트를 가져온다. 
<!DOCTYPE html>
<html>
<body>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>javascript</li>
  </ul>
  <ol>
    <li>HTML</li>
    <li class="active">CSS</li>
    <li class="active">javascript</li>  
  </ol>
  <script>
    // 클래스 이름이 active인 여러개의 엘리먼트를 가져온다.
    var lis = document.getElementsByClassName('active');
    for(var i=0; i < lis.length; i++){   
      // ol의 CSS, javascript는 빨간색으로 바뀐다. 
      lis[i].style.color = 'red';
  }
  </script>
</body>
</html>

document.getElementById

  • id 값을 기준으로 하나만 가져옴
<!DOCTYPE html>
<html>
<body>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>javascript</li>
  </ul>
  <ol>
    <li>HTML</li>
    <li id="active">CSS</li>
  </ol>
  <script>
    // id 값이 activedls 엘리먼트 한개를 가져온다.
    var li = document.getElementById('active');
      li.style.color = 'red';
  
  </script>
</body>
</html>

document.querySelector

  • CSS 선택자를 만족하는 첫 번째 엘리먼트 객체를 반환한다.
<!DOCTYPE html>
<html>
<body>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>javascript</li>
  </ul>
  <ol>
    <li class="active">HTML</li>
    <li class="active">CSS</li>
  </ol>
  <script>
  	// ol의 HTML만 빨간색으로 바뀐다.
    var li = document.querySelector('li');
      li.style.color = 'red';

  </script>
</body>
</html>
<html>
  <script defer src="./app.js"></script>
<body>

  <button class="reset">button</button>
</body>
</html>
const resetbutton = document.querySelector('.reset'); //이름이 reset인 첫번째 요소를 선택한다. 

resetbutton.addEventListener('click', () => { // resetbutton을 클릭 하면 함수 안의 이벤트가 발생한다.
  alert('안녕하세요')
})

document.querySelectorAll

  • CSS 선택자를 만족하는 모든 엘리먼트 객체를 반환한다.
<!DOCTYPE html>
<html>
<body>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>javascript</li>
  </ul>
  <ol>
    <li>HTML</li>
    <li>CSS</li>
  </ol>
  <script>
  	// 모든 li의 색이 빨간색으로 바뀐다.
    var lis = document.querySelectorAll('li');
    for (var name in lis){
      lis[name].style.color = 'red';
    }

  </script>
</body>
</html>
04.07 Numpy, 슬라이싱 Wine, Pandas
프로그래밍 언어 활용 - 3

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage