querySelector('li')는 첫번째 li만
querySelectorAll('li')은 모든 li태그선택
<!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>JavaScript</li>
</ol>
<script>
var lis = document.querySelectorAll('li');
for(var name in lis){
lis[name].style.color = 'blue';
}
</script>
</body>
</html>opentutorials.org/module/904/6656
제어 대상을 찾기 - 웹브라우저 JavaScript
문서를 자바스크립트로 제어하려면 제어의 대상에 해당되는 객체를 찾는 것이 제일 먼저 할 일이다. 문서 내에서 객체를 찾는 방법은 document 객체의 메소드를 이용한다. document.getElementsByTagName
opentutorials.org
jquery에서는
$('li')하면 모든 li태그 선택
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
<title>Document</title>
</head>
<body>
<ul>
<li>html</li>
<li>css</li>
<li>js</li>
</ul>
<ul>
<ol>HTML</ol>
<ol>CSS</ol>
<ol>JS</ol>
</ul>
<script>
var lis = $('li');
lis.map(function (index, elem) {
// console.log(index, elem)
$(elem).css('color', 'red')
});
</script>
</body>
</html>jQuery API Documentation
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. If you're new t
api.jquery.com
제어 대상을 찾기 - 웹브라우저 JavaScript
문서를 자바스크립트로 제어하려면 제어의 대상에 해당되는 객체를 찾는 것이 제일 먼저 할 일이다. 문서 내에서 객체를 찾는 방법은 document 객체의 메소드를 이용한다. document.getElementsByTagName
opentutorials.org
'Frontend > dom' 카테고리의 다른 글
| attribute로 속성 조정하기(+jquery attr) (0) | 2021.05.09 |
|---|---|
| 클래스 제어(classList) (0) | 2021.05.09 |
| dom제어 기초(inline vs script태그)+toggle (0) | 2021.05.09 |
| insertAdjacentHtml(position, text), parentNode (0) | 2020.10.09 |
| [Node/dom] appendChild(),createElement(),removeChild() (0) | 2020.10.05 |
