디지털 컨버전스/Java Script

[Javascript] getElementById() / 줄바꿈

gimyeondong 2020. 4. 13. 10:43

자바스크립트는 제3자의 입장에서 문서와 브라우저를 모두 접근 가능

 

이미 만들어진 엘리먼트를 조작 할수 있다.

자바스크립트로 접근하기 위해서는 엘레먼트별 이름 ( id ) 필요

 

getElementById()

스크립트에서 엘리먼트에 값을 넣어줄수도

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="text" id="ID">
    <input type="password" id="PW">
    
    <script>
        document.getElementById("ID").value="ABC";        
    </script>

</body>
</html>

엘리먼트의 값을 스크립트로 가져올수도 있음

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="text" id="ID" value="ABC">
    <input type="password" id="PW">
    
    <script>
//        document.getElementById("ID").value="ABC";
        
        var result = document.getElementById("ID").value;
        console.log(result);
        
    </script>

</body>
</html>

위에서부터 아래로 실행

따라서 순서를 바꾼다면

속성값을 읽을 수가 없습니다

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
    <script>
//        document.getElementById("ID").value="ABC";
        
        var result = document.getElementById("ID").value;
        console.log(result);
        
    </script>

    <input type="text" id="ID" value="ABC">
    <input type="password" id="PW">
    
</body>
</html>

스크립트에서 줄바꿈

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>

        <script>
            document.write("ABC<br>DEF");
        </script>

    </body>
</html>