window 객체의 속성과 메서드(스크롤,새로운 창)

속성

• innerwidth : 웹브라우저 화면의 넓의

<button onclick="btn">윈도우 객체의 속성</button>

function btn(){
  console.log(`이 웹브라우저 화면의 넓이는 : ${window.innerwidth} 입니다.`)  
}

• innergeight : 웹브라우저 화면의 높이
• outerwidth : 웹브라우저 창의 높이
• outerheight : 웹브라우저 화면의 높이
  메서드
• alert()
• open() :새로운 웹 브라우저 창을 엽니다

function btn(){
  window.open("url", "이름","width= ","height= ")
	
}

• close()
• scrollTo() : 스크롤을 특정위치만큼 이동 합니다(한번만)

function btn(){
  window.scroolTo(가로, 세로)
	
}

• scrollBy() : 현재 위치에서 상대적 위치로 이동 합니다.

문서객체모델

• 문서 객체 모델은 나무를 뒤집에 놓은 형태의 자료구조인 트리 구조를 가집니다. 이를 dom트리 라고 합니다.

• 돔 트리는 document객체 하위에 html요소, 속성, 텍스트, 주석 등이 트리 형태로 구성되는데 이를 노드 (node) 라고 합니다.

• 돔 트리 가장에ㅜ에 위치한 노드는 루트노드 라고 합니다.

• 각 노드는 부모, 자식 , 형제 관계가 형성 됩니다.

노드 선택하기

• query 메서드
• querySelector("css 선택자")- 매개변수로 넘어오는 css 선택자에 해당하는 노드를 1개만 선택
• querySelectorAll("css 선택자") - 모두 선택

const el = document.querySelector("button")
console.log(el)

노드 조작하기

• document 객체의 속성이나 메서드로 문서 객체 모델의 노드를 선택하면 선택한 노드에 여러 조작 가능

콘텐츠 조작하기

text.Content - 요소 노드의 모든 텍스트에 접근
innerText - 웹 브라우저에 표시되는 텍스트에만 접근(눈에 보이는 텍스트)
innerHtml - html 태그를 포함한 텍스트에만 접근

const el = document.querySeletor("p").innerHtml = `<strong>진하게 표시함</strong>` (내용을 지우고 내용 추가)

const el = document.querySeletor("p").innerHtml += `<strong>진하게 표시함</strong>` ( 유지하고  내용 추가)

스타일 추가

<p>이것은 텍스트 입니다!!!</p>
<button>안녕하세요</button>
<button>저의 이름은 뭉치 입니다.</button>

• 하나의 엘리먼트 일때

const btn = document.querySelector("p")
	btn.style.backgroundColor = "pink"

-엘리먼트가 여러개 일때

const btn_1 = document.querySelectorAll("button")
	btn_1.forEach((el)=>{
	el.style.backgroundColor = "yellow"

})

클래스 속성 조작 하기

<button id = "this_id"></button>

.red_color {
background-color : #pink

	
const this_id_1 = document.queryselector("button")
	(클래스 추가)
	this_id_1.classList.add("red_color")
	(클래스 삭제)
	this_id_1.classList.remove("red_color")
	
	

데이터 속성 조작하기

• html5 에서 새로 추가된 data-* 속성은 속성 외에 사용자가 원하는 속성을 추가할 수 있게 한 사용자 정의 속성입니다. dataset 속성을 사용해 조작할 수 있다. 속성을 가져오거나 지정한다.

• data-* 속성이 적용된 노드를 선택해 data 속성값을 출력해보기

<button data-cnt="안녕하세용">안녕안녕</button>
<button data-cnt="반가워용">방가방가</button>

==== querySelectorAll 는 forEach를 사용 할 수 있다.단일 엘리먼트에는 사용 x =====

const cnt = document.querySelectorAll("button")
	cnt.forEach((el)=>{
    	console.log(el.dataset.cnt)
    })

-DOMStringMap 객체에 담겨 반환 된다.

• 속성에 값을 할당하면 단순하게 값을 가져오는 것이 아니라 .data-cnt속성의 값을 바꿀 수도 있다.

const cnt = document.querySelector("button")
	cnt.forEach((el)=>{
    	el.dataset.cnt = "값이 바뀝니다"
    })

메서드로 속성 조작하기

• 메서드 를 사용하면 모든 속성을 전체적으로 조작할 수 있습니다.
  <노드>.getAttribute("속성명") = 속성 값을 가져온다
  <노드>.setAttribute("속성명, "속성값") = 속성값을 설정한다
  <노드>.remove.Attribute("속성명") = 삭제

<a href="https://www.naver.com">네이버</a>   

(속성 값을 가져오기)
const el = document.querySelctor("a")
const href = el.getAttribute("href")
console.log(href)

(속성 값 새로 설정하기)
const el = document.querySelctor("a")
const href = el.getAttribute("href")
el.setAttribute("href","https://www.nate.com")  => 새로운 값을 설정
el.innerText = ("네이트")  => 텍스트를 바꾸기 위하여  innerText 사용
el.setAttribute("target","_blank") =>새창으로 뜨게 하기 위한 설정