728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<title>요소선택</title>
<meta charset="UTF-8">
</head>
<body>
<!--
id 속성 값은 스타일링 목적을 사용 x (참고로 css선택자는#)
주로 javascript에서 요소를 선택하기 위해 사용
한 문서 내에 같은 이름을 가지는 id가 중복되면 안된다.
-->
<a id="message">Hi!</a>
<br>
<a>hello?</a>
<br>
<a>Bye</a>
<script>
// window : 브라우저 그 자체
// document(혹은 window.docurment) : html 태그
// id로 요소 선택
// window.document.getelementById(id값)
// id값을 id 속성 값을 가지는 요소를 변수로 반환한다.
window.document.getElementById('message').innerText = 'Changed';
message.style.color = 'red;'
message.style.background
// null의 속성을 지정할 수 없다.('innertText'지정 중)
// something.some();// some 이라는 메서드 함수
// something.some; //some 이라는 속성
// innerText 속성: 선택된 요소의 내부 텍스트 내용을 지정한다.
// innerHTML 속성: 선택된 요소의 내부 HTML 내용을 지정한다.
// style 속성 선택된 요소의 css 속성을 변경한다. 단, 케밥 케이싱되어 있는 css 속성이름을 카멜케이싱해야한다.
// message.remove();
//remove 메서드 : 선택된 요소를 제거한다.
// css 선택자로 요소를 선택
// 어떠한 부모/선조 요소.querySelector(css선택자)
// css 선택자에 부합하는 요소를 한 개만 선택한다. 단 이때 이는 반드시 앞서 나온요소의 자식이거나 자손이다.
let second = window.document.body.querySelector('a:nth-of-type(2)');
second.innerText = 'i am second element'
// css 선택자로 요소들을 선택
// 어떠한 부모/선조 요소.querySelectorAll(css선택자)
// 이떄 반환되는 타입은 Array 아니고 NodeList임.(비슷함)
// NodeList를 Array로 바꾸기 위해서는 Array.from()를 사용한다.
let anchors = window.document.body.querySelectorAll('a');
console.log(anchors.length);
// anchors.forEach(x => {
// x.innerText = 'changed!'
// })
</script>
</body>
</html>
728x90
반응형