Form객체/Document 객체 등

1. Form 객체

자바스크립트에서 form 객체는 웹 페이지의 HTML 폼 엘리먼트를 다루는 데 사용되는 객체입니다. 폼 엘리먼트는 사용자로부터 입력을 받기 위한 요소로, 텍스트 입력 필드, 라디오 버튼, 체크 박스, 드롭다운 목록, 버튼 등을 포함할 수 있습니다. form 객체를 사용하여 폼 엘리먼트의 값을 읽고 제출할 수 있으며, 이를 통해 웹 페이지에서 사용자와 상호작용할 수 있습니다.

<form name='myform' id='regform' method ='post' action='#'>
    아이디: <input type='text' name= 'userid' id='id'><br>
    비밀번호: <input type='password' name= 'userpw' id='pw'><br>
</form>

<폼에 접근하기>

const frm = document.myform;  //document는 body  .은 name
const frm = document.forms['myform'];  // 폼 name이 'myform'
const frm = document.forms[0];         // 폼 중에서 첫번째 폼
const frm = document.getElementById('regform'); // ✔️iD로 접근하기

 

<아이디 입력상자에 접근하기>

const userid = frm.userid;  // input 내용을 가져올 수 있음
const userid = document.forms['myform'].elements[0];   // p태그가 있으면 p태그가 첫번째
const userid = document.forms['myform'].elements['userid'];
const userid = document.form[0][0]; // 첫번째 Form의 첫번째 요소.

⭐⭐⭐
✔ const userid = document.getElementById('id')  
// form을 통하지 않고 아이디를 통해 바로 찾기 가능

⭐2. document 객체

- 웹 페이지 자체(body)를 의미하는 객체입니다.
- 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때 반드시 document 객체로부터 시작합니다.

getElementById(): 해당 아이디의 요소를 선택
getElementsByTagName(): 해당 태그 이름의 요소를 모두 선택
getElementsByClassName(): 해당 클래스에 속한 요소를 모두 선택
getElementsByName(): 해당 name 속성값을 가지는 요소를 모두 선택 
			(라디오 박스 등 동일 name으로 묶어놓은 것들 모두 선택)
querySelectorAll(): 선택자로 선택되는 요소를 모두 선택
querySelector(): 선택자로 선택되는 요소를 선택

    <h2>문서 객체 모델1</h2>
    <ul>
        <li name="markup">HTML</li>
        <li>CSS</li>
        <li id="javascript" class="js">javascript</li>
        <li class="js">jQuery</li>
        <li class="backend">Apache</li>
        <li class="backend">NgineX</li>
        <li id="nodejs" class="js">Node.js</li>
        <li id="react" class="js">React</li>
    </ul>

const tagName = document.getElementsByTagName('li');
for(let i=0; i<tagName.length; i++){
    console.log(tagName[i]);
    tagName[i].style.color = 'gold';
}

li 태그인 모든 요소가 출력

li 태그 안의 모든 요소의 컬러가 gold로 바뀜

 

 

 

 

 

 

        const className = document.getElementsByClassName('js');
        for(let i=0; i<className.length; i++){
            console.log(className[i]);
            className[i].style.color = 'deeppink';
        }

class name이 js인 모든 요소 출력

class name이 js인 요소들은 deeppink로 바뀜.

 

 

        const id = document.getElementById('javascript');
        console.log(id);
        id.style.color = 'deepskyblue';

아이디가 자바스크립트인 요소가 출력되고 색상은 deepskyblue로 바뀜.

        const qsa = document.querySelectorAll('li.backend');
        for(let i=0; i<qsa.length; i++){
            console.log(qsa[i]);
            qsa[i].style.color = 'navy';
        }

선택자 생성과 마찬가지로 li 태그의 classname이 backend인 요소가 출력되고 색상은 navy로 변경된다.

모두 적용된 모습.

3. Location 객체

현재 브라우저에 표시된 HTML문서의 주소를 얻거나, 브라우저에 새 문서를 불러올 때 사용합니다.

 

URI (물음표를 기준으로 뒤에 정보가 더 추가되어있음)
https://school.programmers.co.kr/learn/challenges?order=recent&levels=0

URL
URL은 프로토콜(예: HTTP, FTP), 호스트(서버 주소), 리소스 경로(파일 경로 또는 웹 페이지 경로)로 구성됩니다. https://www.example.com/index.html

Protocol: 콜론을 포함하는 http, https, ftp 등 프로토콜 정보를 반환(https://)
hostname: 호스트의 이름과 포트번호를 반환 (https://junyealim.tistory.com/)
pathname: URl 경로부분 반환

        <button onclick="pageInfo()">페이지 정보</button>
        <button onclick="sendit()">이동하기</button>
        <button onclick="location.reload()">새로고침</button>

        function pageInfo() {
            console.log(`현재 문서의 URL주소: ${location.href}`)
            console.log(`현재 문서의 Protocol: ${location.protocol}`)
            console.log(`현재 문서의 hostname: ${location.hostname}`)
            console.log(`현재 문서의 pathname: ${location.pathname}`)
        }

        function sendit(){
            location.href = "<a href=https://www.python.org/>https://www.python.org/</a>"
        }

    

4. history 객체

- 브라우저의 히스토리 정보를 문서와 문서상태 목록으로 저장하는 객체입니다.
- 사용자의 개인 정보를 보호하기 위해 이 객체의 대부분의 기능은 제한되었습니다.

    <button onclick="history.back()">뒤로</button>
    <button onclick="history.forward()">앞으로</button>
    <button onclick="history.go(0)">새로고침</button>
    // location.reload()와 같은 기능

5. navigator 객체

브라우저 공급자 및 버전 정보 등을 포함한 브라우저에 대한 정보를 저장하는 객체입니다.

getlocation: GPS정보를 수신하는 프로퍼티

        const success = function(loc){
            console.log(loc.coords.latitude);  // 위도를 콘솔에 출력
            console.log(loc.coords.longitude); // 경도를 콘솔에 출력
        }

        const fail = function(msg) {
            console.log(msg.code);
        }

        navigator.geolocation.getCurrentPosition(success,fail);  

getCurrentPosition이라는 함수는 세 개의 매개변수를 받습니다. 첫 번째 매개변수는 위치 정보를 성공적으로 가져왔을 때 호출되는 콜백 함수 (success 함수)이며, 두 번째 매개변수는 위치 정보를 가져오는 데 실패했을 때 호출되는 콜백 함수 (fail 함수)입니다. 세 번째 매개변수는 옵션 객체로, 위치 정보 요청을 설정합니다.