자바스크립트 14 - 객체 조작하기

BOM()객체 연습

1. window.open() : 새창 열기

첫번째 인자 : 주소값,

두번째 인자 : 새창 이름

세번째 인자 : 크기, 위치 등 기타 정보

window.open('https://www.naver.com/','pop1','width=450, height=550');

 

---

2. 새창을 열고, screen 객체의 width, height 정보를 담아, 새창의 size를 재지정하고, 위치를 이동시킬 수 있다 

screen.width : 화면의 가로크기값을 반환

screen.height : 화면의 세로크기값을 반환

moveTop(0,0) : 새창의 위치를 지정

resizeBy(w,h) : width, height를 재지정할 수 있다. 

let child = window.open('','','width=450 height=550');
let width = screen.width;
let height = screen.height;


setInterval(function(){
    child.resizeBy(-20,-20);
    child.moveBy(10,10);
}, 1000);

---

 

3. DOM객체의 속성을 지정하는 방법 1 => 객체.속성 = 값

let img = document.createElement('img');
img.src='img/1.png';
img.width=300;
img.height=300;

document.body.appendChild(img);

 

4. DOM객체의 속성을 지정하는 방법 2 => 객체.setattribute(속성명, 속성값) 메서드

img.setAttribute('src', 'img/1.png');
img.setAttribute('width', 300);
img.setAttribute('height', 300);

document.body.appendChild(img);

 

---

5. 문서 안에 추가 속성활용 : innerText, innerHTML

var something = '<p>추가문자열</p>';
document.body.innerHTML = something;//HTML요소(tag, text)로 추가
document.body.innerText = something;//text로 추가

 

---

6. body안의 H요소 객체의 글씨 조작

let header1 = document.getElementById('header');
let header4 = document.getElementById('h4');
let header1 = document.querySelector('#header')
let header4 = document.querySelector('#h4');

header1.style.color = 'red';
header1.style.border = '1px solid #000';
header1.style.fontSize = '20px';

header4.innerHTML ="글자가 바뀌나요";

//h3요소에 "여기도 바꿨어요"라고 출력
document.getElementById('h3').innerHTML ="여기도 바꿨어요";
document.querySelector('.h3').innerHTML ="여기도 바꿨어요";

<h1 id="header">HEADER1</h1>
<h2 id="h2">HEADER2</h2>
<h3 class="h3">HEADER3</h3>
<h4 id="h4">HEADER4</h4>

 

7. body안의 li객체의 글씨 조작

let list = document.querySelectorAll('li');
console.log(list);
list[1].style.color='red';

<ul>
  <li>test0</li>
  <li>test1</li>
  <li>test2</li>
  <li>test3</li>
  <li>test4</li>
</ul>

 

---