JavaScript와 친해지길 바래 🙏(8) - Object Model, indexOf, document

joyfulwave·2022년 9월 23일

Coding Document Event JavaScript indexOf object model programming 자바스크립트 코딩

JavaScript와 친해지길 바래

목록 보기

9/11

재밌는 이벤트의 세계, JavaScript

💡 Object Model

웹브라우저의 구성요소들은 하나하나가 객체화되어있어요.
자바스크립트로 이 객체를 제어해서 웹브라우저를 제어할 수 있게 돼요.

📎 Window

자바스크립트의 최상위객체이자 전역객체에요. 모든 객체가 Window 객체에 소속되어있어요.

📎 DOM : document object model

객체지향 모델로써 구조화된 문서를 표현하는 형식이에요. 곧 브라우저가 웹 문서를 이해할 수 있도록 구성된 것 이에요.

📎 BOM : browser object model

자바스크립트가 브라우저와 소통하기 위해 만들어진 모델이에요.

📎 javascript

Window의 객체들을 제어하여 웹 브라우저를 제어할 수 있게 해줘요.

💡 String객체의 indexOf함수

indexOf함수는 파라미터로 전달된 문자열이 처음으로 나타나는 위치값을 리턴하지만, 만약 파라미터로 전달된 문자열을 찾지 못하였다면 -1을 리턴해요. 그러므로 indexOf 함수의 리턴값이 -1보다 크면 해당 문자열이 존재하는 것이고 그렇지 않다면 해당 문자열이 포함되지 않은것으로 판별 할 수 있어요.

<!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">
    <title>Document</title>
</head>
<body>
    <h1>JavaScript</h1>
    <script>        
        let c = [1, 2, 3, 4, 5];
        console.log(c.toString());

        console.log("indexOf() =================>");
        console.log(c.indexOf(1).toString());
        // 해당 값을 인덱스에서 찾을 수가 없음
        console.log(c.indexOf(6).toString());
        console.log(c.lastIndexOf(4).toString());
        // 해당 값을 인덱스에서 찾을 수가 없음
        console.log(c.lastIndexOf(10).toString());

    </script>
</body>
</html>

💡 document

HTML문서를 제어하는 내장 객체

📎 특정 HTML 요소를 객체 형태로 가져오기

let element = document.getElementById("id속성값");

document객체는 HTML문서를 제어하기 위하여 특정 HTML 태그 요소를 id값에 의하여 객체 형태로 가져오는 기능을 제공해요.

<!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">
    <title>Document</title>
</head>
<body>
  	<div id="box"></div>
  
    <script>
		let element = document.getElementById("box");
    </script>
</body>
</html>

📎 innerHTML

객체화된 HTML 요소의 innerHTML 속성을 사용하면 해당 태그에 속해있는 내용을 새롭게 설정 할 수 있다.

element.innerHTML = "<h1>Hello</h1>";

<!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">
    <title>Document</title>
</head>
<body>
  	<div id="box"></div>
    <script>
        document.getElementById("box").innerHTML = "<h1>Hello</h1>";
    </script>
</body>
</html>

📎 Style

JacaScript안에 객체화된 HTML요소는 style이라는 하위 객체를 내장해요.
style 객체는 CSS속성에 대응되는 변수들을 내장하고 있으며, 이 변수에 특정 값을 대입하는 것으로 JavaScript를 통한 특정 요소의 CSS제어가 가능해져요.

	element.style.CSS대응속성 = "CSS적용값";

⚫ Tag name으로 접근하기

	document.getElementsByTagName('태그');

⚫ ID name으로 접근하기

	document.getElementsById('아이디이름');

⚫ Class name으로 접근하기

	let element = document.getElementsByClassName("클래스이름");

⚫ 예제

<!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">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li class="active">CSS</li>
        <li class="active">JAVASCRIPT</li>
    </ul>

    <script>
        let lis = document.getElementsByClassName('active');

        for(let i = 0; i < lis.length; i++){
            lis[i].style.color = "tomato";
        }
    </script>
</body>
</html>