DOM_2

1. 속성 (id 바꾸기)

- id가 banner인 이미지가 있다고 하면 아래와 같이 된다.

<body>
    <h1>Silkie Chickens</h1>
    <img id="banner"
        src="https://images.unsplash.com/photo-1563281577-a7be47e20db9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80"
        alt="">
</body>

위 id를 변경해서 완전히 다른 id를 부여할수 있다.(예시로 loui3을 id로 해본다.)

그러면 아래와 같이 loui3이 id인 이미지가 있다라는것을 알 수 있다.

2. getAttribute, setAttribute

getAttribute은 HTML 자체에서 직접 가져오게 한다.(해당요소에 지정된 값)

-제목,id,class등을 갖고 오게 할 수 있다

setAttribute은 선택한 요소에 선택한 값을 넣는것이다.

-type을 바꿀수 있다.

3. 스타일 변경하기

마크업을 직접 변경하지 않고 자바스크립트를 통해 스타일을 변경할수 있다.

<!DOCTYPE html>

<head>
    <title>loui3</title>
    <script src="node_modules/babel-polyfill/dist/polyfill.js" type="text/javascript"> </script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

</head>

<body>
   <div id="container">
        <h1>I &hearts; Trees</h1>
        <img src="https://images.unsplash.com/photo-1596328546171-77e37b5e8b3d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80" alt="">
    </div>
</body>

</html>

위그림을 html 파일을 건드리지 않고 자바스크립트로만 변경이 가능하다.

이를 너비 150px, 테두리를 둥글게 하고 그림을 가운데에 둔다고 가정하면

document.querySelector('#container').style.textAlign = 'center'
document.querySelector('img').style.width ='150px'
document.querySelector('img').style.borderRadius = '50%'

위 코드를 입력시 아래와 같이 바뀌는 것을 알 수 있다.