<body>
<div id= "root"></div>
<script type="text/javascript">
ele= document.querySelector('#root');
ele.innerHTML= "Hello, World!";
</script>
</body>
------------------------------------------------------
document.querySelector('#root');
root에 해당하는 div값을 ele라는 변수에 넣어라.
같은 말로
document.getElementById('root')'
가 있음.
------------------------------------------------------
*객체
()= 함수, 다른말로 매서드
'=' = 속성
'.'의 의미는 안에 있는 엘리먼트라는 뜻. 예를 들어
document.querySelector 가 있으면 document 안에 querySelector가 있는것임.
이걸 HTML 로 표현 하자면
<document>
<querySelector>
</querySelector>
</document>
어떤 엘리먼트 안에 어떤 속성값이 있는지를 많이 알수록 좋다.
---------------------------------------------------------
console.log(str.length); 라고 하면
str라는 변수의 글자 길이를 알려줌
str = 안녕하세요; 라고 하면
console.log(str.length);는 5가 나옴 ( 5글자)
---------------------------------------------------------
<body>
<div id= "root">Hello, world!</div>
<input type="button" value="press" onclick="ele= doument.querySelector('#root'); ele.style.color='blue';">
<script type="text/javascript">
ele = document.querySelector('#root');
ele.style.color='red';
</script>
</body>
버튼을 클릭했을 때 버튼 글자 색을 파란색으로 바꿔라.
원래 색은 빨간색임. 왜냐면
ele = document.querySelector('#root');
ele.style.color='red';
로 전체 div안에 있는 color를 빨간색으로 줬기 때문..
------------------------------------------------------------
함수는 쓴다고 바로 실행되는게 아니라 호출해야 실행된다. 함수를 저장해놨다가 나중에 호출시키면 그때서야 실행시킬 수 있음.
호출은
해당 함수를 한번 더 쓰고 세미콜론
changecolor();
==>체인지 컬러 함수를 호출해라는 뜻.
<body>
<div id= "root">Hello, world!</div>
<input type="button" value="버튼" onclick="changeColor()" >
<script type="text/javascript">
ele = document.querySelector('#root');
ele.style.color='red'
function changeColor(){
ele= doument.querySelector('#root');
ele.style.color='blue'
}
changeColor();
</script>
버튼을 클릭했을때 체인지컬러 함수를 호출(파란색으로 바꿔)해라.