BOM과 DOM-22.04.12

HTML 2022. 4. 12. 17:53

728x90

·HTML 문서를 객체로 표현한 것을 DOM

·웹브라우저를 객체로 표현한 것을 BOM(Browser Object Model)

<open() 예제>

<script>
function googleOpen() {
	//window.open(url,target또는 openPageName,spece);
	window.open("http://www.google.co.kr","구글","width=300 height=300 top=100 left=100");
}
function naverOpen() {
	//window.open(url,target또는 openPageName,spece);
	window.open("http://www.naver.com","구글","width=300 height=300 top=100 left=100");
}

만약 target이 구글로 같다면 같은 창에서 덮어씌여서 나온다. ""으로 하면 따로 창이 열림

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/outStyle.css">
<script>
function googleOpen() {
	//window.open(url,target또는 openPageName,spece);
	window.open("http://www.google.co.kr","구글","width=300 height=300 top=100 left=100");
}
function naverOpen() {
	//googleOpen()에서 사용된 pageName을 target으로 지정해서 사용
	window.open("http://www.naver.com","구글","width=300 height=300 top=100 left=100");
}
var proc=function() {
	open("window_sub.html","","width=500 height=300")
}
</script>
</head>
<body>
	<input type="button" value="구글열기" onclick="googleOpen()">
	<input type="button" value="네이버열기" onclick="naverOpen()">
	
	<h4>새로운 창 (자식창)을 열고 이름을 입력해 현재 창(부모창)에 출력하기</h4>
	<input type="button" value="새창open" onclick="proc()">
	<div></div>


</body>
</html>

window_sub

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/outStyle.css">
<script>
function pass() {
	var nm = document.getElementById('name').value;
	var result =`${nm}님 환영합니다!!`;
	//부모창에 result 출력하기
	opener.document.getElementsByTagName('div')[0].textContent = result;
	
}
var cls = function () {
	window.close();
};
</script>
</head>
<body>
	<h4>입력한 이름을 부모창(opener)으로 출력</h4>
	<form>
		이름<input id="name">
		   <input type="button" value="전달" onclick="pass()">
	</form>
	<button type="button" onclick="cls()">닫기</button>
</body>
</html>

<버튼을 누르면 1초뒤에 배경색 바뀌는 예제>
두가지 방법이 있다(함수 선언방식)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/outStyle.css">
<style>
div {
   border: 1px solid;
   margin: 5px;
   padding: 10px;
   border-radius: 10px;
}
</style>
</head>
<body>
<script>
 function proc() {
   setTimeout(function() {
      var v_div = document.getElementsByTagName('div')[0];
      v_div.style.backgroundColor = "pink";
   },1000);
}
</script>
   <button type="button" onclick="proc()">setTimeout</button>
   <div>setTimeout(fn,ms) <br> : ms에 지장된 시간 경과 시 배경색 바꾸기</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/outStyle.css">
<style>
div {
   border: 1px solid;
   margin: 5px;
   padding: 10px;
   border-radius: 10px;
}
</style>
</head>
<body>
<script>
  function proc() {
//    setTimeout(function() {
//       var v_div = document.getElementsByTagName('div')[0];
//       v_div.style.backgroundColor = "pink";
//    },1000);

  
   
   var fnn = function() {
      var v_div = document.getElementsByTagName('div')[0];
      v_div.style.backgroundColor = "gold";
   };   
   setTimeout(fnn, 1000);

}

</script>
   <button type="button" onclick="proc()">setTimeout</button>
   <div>setTimeout(fn,ms) <br> : ms에 지장된 시간 경과 시 배경색 바꾸기</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/outStyle.css">
<style>
div{
	border: 1px solid;
	margin: 5px;
	padding: 10px;
	border-radius: 10px;
}
</style>
</head>
<body>
<script>
function proc() {
	setInterval(function(){
		//랜덤 색상 생성
		var cr = Math.floor(Math.random()*256);
		var cg = parseInt(Math.random()*256);
		var cb = parseInt(Math.random()*256);
		
		var v_div = document.getElementsByTagName('div')[0];
		v_div.style.backgroundColor = `rgb(${cr},${cg},${cb})`;  //rgb색상 주기 위해서 3개 만듦
		
	},1000);
		
	
}

</script>
	<button type="button" onclick="proc()">setInterval()</button>
	<div> setInterval(fn, ms) <br> : ms에 지정된 시간 경과 마다 배경 바꾸기 </div>
</body>
</html>

=>랜덤으로 변경됨

+수정

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/outStyle.css">
<style>
div{
	border: 1px solid;
	margin: 5px;
	padding: 10px;
	border-radius: 10px;
}
</style>
</head>
<body>
<script>
var a="";
var b="";
function proc(ths) {
	ths.style.display = "none"; //한번 누르면 버튼 숨김  inline과 짝꿍
	b=ths;
	 a =setInterval(function(){
		//랜덤 색상 생성 -10진수 
		var cr = Math.floor(Math.random()*256);
		var cg = parseInt(Math.random()*256);
		var cb = parseInt(Math.random()*256);
		
		//색상 16진수로 변환
		cr =cr.toString(16);
		cg =cg.toString(16);
		cb =cb.toString(16);
		
		var v_div = document.getElementsByTagName('div')[0];
		//v_div.style.backgroundColor = `rgb(${cr},${cg},${cb})`;  //rgb색상 주기 위해서 3개 만듦(10진수)
		v_div.style.backgroundColor = `#${cr}${cg}${cb}`;  //rgb색상 주기 위해서 3개 만듦(16진수)
		
	},1000);
		
	console.log(a);
}

var clr = function() {
	clearInterval(a);
	b.style.display = "inline"; //속성 다시 활성화
};

</script>
	<button type="button" onclick="proc(this)">setInterval()</button>
	<button type="button" onclick="clr()">ClearInterval()</button>
	<div> setInterval(fn, ms) <br> : ms에 지정된 시간 경과 마다 배경 바꾸기 </div>
	
	
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/outStyle.css">
<style>
div{
	border: 1px solid;
	margin: 5px;
	padding: 10px;
	border-radius: 10px;
}
</style>
</head>
<body>
<script>
var a="";
var b="";
function proc(ths) {
	ths.setAttribute('disabled',true);  //버튼 비활성화 밑 disabled와 짝꿍
	b=ths;
	 a =setInterval(function(){
		//랜덤 색상 생성 -10진수 
		var cr = Math.floor(Math.random()*256);
		var cg = parseInt(Math.random()*256);
		var cb = parseInt(Math.random()*256);
		
		//색상 16진수로 변환
		cr =cr.toString(16);
		cg =cg.toString(16);
		cb =cb.toString(16);
		
		var v_div = document.getElementsByTagName('div')[0];
		//v_div.style.backgroundColor = `rgb(${cr},${cg},${cb})`;  //rgb색상 주기 위해서 3개 만듦(10진수)
		v_div.style.backgroundColor = `#${cr}${cg}${cb}`;  //rgb색상 주기 위해서 3개 만듦(16진수)
		
	},1000);
		
	console.log(a);
}

var clr = function() {
	clearInterval(a);
	b.removeAttribute('disabled');
};

</script>
	<button type="button" onclick="proc(this)">setInterval()</button>
	<button type="button" onclick="clr()">ClearInterval()</button>
	<div> setInterval(fn, ms) <br> : ms에 지정된 시간 경과 마다 배경 바꾸기 </div>
	
	
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/outStyle.css">
</head>
<body>
<script>
  var url =document.createElement("a");
  url.href="https://developer.mozilla.org:8080/en-US/serach?q=URL#search-results-close-container";
  
  console.log(`hash:앵커반환>> ${url.hash}`);
  console.log(`host:hostname,port>> ${url.host}`);
  console.log(`hostname>> ${url.hostname}`);
  console.log(`href:전체 URL반환>> ${url.href}`);
  console.log(`pathname:경로반환>> ${url.pathname}`);
  console.log(`port>> ${url.port}`);
  console.log(`protocol>> ${url.protocol}`);
  console.log(`search:query반환>> ${url.search}`);

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/outStyle.css"/>
<style>
h4 {
  display: inline-block;
}
</style>
</head>
<body>
  <h4>https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container</h4>
<script>
  var url = document.createElement("a");
//   url.href="https://developer.mozilla.org:8080/"
//   			+ "en-US/search?q=URL#search-results-close-container";
  url.href =`https://developer.mozilla.org:8080/`;
  url.href += `en-US/search?q=URL#search-results-close-container`;
  
  console.log(`hash:앵커반환 >> ${url.hash}`);
  console.log(`host:hostname,port>> ${url.host}`);
  console.log(`hostname >> ${url.hostname}`);
  console.log(`href:전체URL반환 >> ${url.href}`);
  console.log(`pathname:경로반환 >> ${url.pathname}`);
  console.log(`port>> ${url.port}`);
  console.log(`protocol>> ${url.protocol}`);
  console.log(`search:query반환>> ${url.search}`);
  
  function proc1()
  function proc2()
  function proc3(url)
  밑에서따로구현

  </script>
  
  <h2>location : URL 정보를 갖는 객체</h2>
  
  <h4>assign() : 새 문서 로드</h4>
  <input type="button" value="assign" onclick="proc1()"> <br>
  
  <h4>reload() : 현재 문서 재 로드</h4>
  <input type="button" value="reload" onclick="proc2()"> <br>
  <div>aAAa</div>
  
  <h4>replace() : 현재 문서를 새 문서로 대체(history 초기화)</h4> 
<!--   <input type="button" value="replace" onclick="proc3()"> <br> -->
  <br>
  <a href="javascript:proc3('test.jsp?name=홍길동');">proc메소드 연결</a> 
</body>
</html>

function proc1(){
	//페이지 이동, 새문서 로드
// 	location.assign("http://ddit.or.kr");
	location.href = "http://cgv.co.kr";
  }

 function proc2(){
	//reload() : 현재 문서 재로드
	var str = ["HTML","JAVA","JAVASCRIPT","CSS","jQuery"];
	var rnd = parseInt(Math.random()*str.length);
	var result = `<h4>${str[rnd]}</h4>`;
	
// 	document.getElementsByTagName('div')[0].innerHTML = result;
// 	document.getElementsByTagName('div')[0].style.color = "purple";
// 	document.getElementsByTagName('div')[0].style.fontSize = "2em";
	var v_div = document.getElementsByTagName('div')[0];
	v_div.innerHTML = result;
	v_div.style.color = "green";
	v_div.style.fontStyle = "italic";
	
	setTimeout(function(){
		location.reload();
	},1000);
  }

function proc3(url){
	//replace() : 현재 문서를 새 문서로 대체(이전 페이지로 리턴 불가)  
    location.replace("http://naver.com");
  }

=>돌아갈 수 없음

function proc3(url){
	//replace() : 현재 문서를 새 문서로 대체(이전 페이지로 리턴 불가)  
    location.replace(url); //url = test.jsp로 이동
  }

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
  String nm = request.getParameter("name");
%>
[test.jsp] 여기로 이동햇엄 ~~ 반갑다 <%=nm %>!!

</body>
</html>

Element : 눈에 보이는 것들 접근

node: 눈에 보이지 않는 것들도 접근

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/outStyle.css"/>
<style>
pre {
  column-count: 2;
}
ul{
	border: 2px dashed orange;
	margin: 0px 20px;
}
li{
	border: 2px solid brown;
}
</style>
</head>
<body><!-- 주석이야.. -->
<pre>
  &lt;ul id="myList">Menu
    &lt;li id="li1">Coffee&lt;/li>
    &lt;li id="li2">Tea&lt;/li>
  &lt;/ul> 
  
  <br><br><br>
  <ul id="myList">Menu
    <li id="li1">Coffee</li>
    <li id="li2">Tea</li>
  </ul>
</pre>
<script>
  document.write("[Element] <br><br>"); 
  document.write("parentElement | " 
		  + document.getElementById('li1').parentElement.nodeName + "<br>");  //tagNmae으로도 접근 가능하다
  
  document.write("children | "
		  + document.body.children[1].tagName + "<br>"); //인덱스0:pre이며 인덱스1:sctipt
  
  document.write("first/lastElementChild | "
		  + document.getElementById('myList').lastElementChild.textContent + "<br>");
  
  document.write("next/previousElementSibling | "
		  + document.getElementById('li2').previousElementSibling.textContent);
  
  document.write("<hr>[Node] <br><br>");
  /////////////////////////////////////////////////////////////////////////////////////////////
  
  document.write("parentNode | " 
		  + document.getElementById('li1').parentNode.tagName + "<br>"); //부모노드를 찾아서 그 부모 노드이름을 반환해라 tagName도 접근 가능
  
  document.write("childNodes | "
		  + document.body.childNodes[0].nodeValue + "<br>");
  
  document.write("first/lastChild | "
		  + document.getElementById('myList').lastChild.nodeName + "<br>"); //노드개념으로 봤을 떄는 끝에있는 공백이므로 text가 나온다. <li id="li2">Tea</li>이 끝 부분
  
  document.write("next/previousSibling | "
		  + document.getElementById('li2').previousSibling.innerText);
  
</script>
</body>
</html>

728x90

'HTML' 카테고리의 다른 글

게시판 만들기 -22.05.06~ (0)	2022.06.09
String2 ,Math-22.04.11 (0)	2022.04.11
Date객체,String객체 -22.04.08 (0)	2022.04.08
배열2-22.04.08 (0)	2022.04.08
JDBC연결-22.04.08 (0)	2022.04.08

ABOUT ME

하루복습 하루복습

'HTML' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'HTML' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바