23.02.17 (DOM 요소 만들고 추가하기, 수정하기, 없애기, 스타일, onsubmit)

😀/* vh : 현재 실행중인 스크린의 크기에 맞춰 상대적 크기 반환 */

 

😀 title="" ==> 마우스 갖다 대면 나오는거

😀let result = document.querySelector("#txt1").value; // 값을 가져올 때는 value속성을 가져오면 됨

 

😀<form action="http://www.google.com" onsubmit="return check()"> 

      ==> submit버튼을 누르면 check함수를 호출해서 true면 action페이지로 이동 

      ==> onsubmit속성은 input submit을 제어해서 retrun false면 action이 작동하지 못하게 한다!!

 

😀//let t2 = document.querySelector("#t2").value; // #t2에는 값이 없기 때문에 value로 가져올 수가 없다!!

 

😀// null은 값이 없다는 것이 주어진 상태고 undefined는 아무것도 하지 않은 상태임으로 값이 없는곳에 커서를 둘 수 있는 null은 false가 아니다???

     " " ==> undefined

 

// 현재 문서의 body부분을 읽고 난 후에 자바스크립트를 실행하라는 의미를 가진 코드
window.onload = function() {

// 태그(요소)를 만드는 방법
// 형식) createElement("태그이름");
// 형식) createTextNode("텍스트");

// 1. 태그(요소)를 만들어보자 . 현재문서에 요소를 만들어주세요
let h1_element = document.createElement("h1");

// 2. 텍스트 노드(요소)를 만들어 보자.
let text = document.createTextNode("ㅂㄱㅂㄱ");

// 3. 텍스트노드를 h1태그에 자식으로 추가
h1_element.appendChild(text);

// 4. h1태그를 문서의 body태그에 추가해주어야함
document.body.appendChild(h1_element);
}

// 1. 이미지태그를 만들어보자.
let img_element = document.createElement("img");

// 2. 속성이 필요한 경우에는 속성을 지정해 주어야 함
img_element.src = "../images/pf2.png";
img_element.width = "150";
img_element.height = "150";

// 3. DOM으로 만든 img 태그를 문서의 body에 추가해준다.
document.body.appendChild(img_element);

😀속성을 지정해주는 다른 방법 (편한거 쓰기!)

// 2. 속성을 지정해 주어야 함
// 속성을 지정하는 함수가 있음
// ==> SetAttribute("속성명", "value");

img_element.setAttribute("src", "./images/pf2.png");

img_element.setAttribute("width", "150");

 

 

// 문서에서 요소를 찾는 방법 - 첫번째
// 1. getElementById("Id이름");
//    ==> 문서에서 특정 id를 가진 요소 찾기

let title_element = document.getElementById("title");

 

// 문서에서 요소를 찾는 방법 - 2번째
// 2. getElementsByTagName(tag이름);
//   ==> tag이름과 일치하는 요소를 배열로 가져오는 함수

let p_elements = document.getElementsByTagName("p");

p_elemnts[0].innerHTML = "<b> 이름 : 홍길동</b>";

 

//문서에서 요소를 찾는 방법 - 3번째
// 3. getElementsByClassName(tag이름);
//   ==> tag이름과 일치하는 요소를 배열로 가져오는 함수

let p_elements = document.getElementsByClassName("user")[1];

for(let i=0; i<p_elements.length; i++) {
	p_elements.innerHTML = "<b style:color="red";>주소: 몰라</b>";
}

 

// 특정 요소(태그)를 삭제하는 방법
document.body.removeChild(header2);

 

//변수에 지정 안하고 바로 사용하는 방법(한번만 변경할 때)
document.querySelector("#str").style.color = "red";