• #2-3 Modifying the DOM with JS

    2021. 8. 29.

    by. 고구마달랭이

     

    이전 글에서 HTML을 DOM 객체로 바꿀 수 있다는 것을 배웠습니다. 이번 글에서는 title에서 여러분이 가진 모든 가능성을 보여 주는 것을 배울겁니다. console.log(title);을 하면 title을 나타내는 html을 볼 수 있습니다. 여러분이 title로 할 수 있는 모든 걸 보여 줄건데 그러기 위해선 console.log 하는 대신에 console.dir을 할게요. attribute를 보면 base url classname 흥미롭네요.

    id
    title
    innerHTML
    innnerText
    localname
    nodevalue nodetype offsentparent 이게 모두 이벤트입니다. 

    parentNode: body
    outerHTML
    outerText
    style 이게 모두 자바스크립트 객체 표기법이에요!

    소문자, 대문자 다 섞여 있고 우린 그걸 바꿀 수 있습니다. 그 의미는 우리는 수정 할 수 있다는 거예요.

    Dallae 객체 가지고 있던거 기억나죠? male에서 female로 바꿀 수 있었어요. 같은 걸 여기서도 할 수 있습니다.
    title.style.color = 'red' 를 하면 타이틀 글씨가 빨간색으로 바뀝니다. 이렇게 우린 자바스크립트로  HTML을 조종 할 수 있어요.

     

    querySelector라는 것도 있는데 querySelector는 노드의 첫번째 자식을 반환합니다. 

    그 의미는 document로 가서 모든 자식들 중에서 찾으려고 합니다. 이 선택자는 css 선택자하고 비슷한데 id로 찾고 싶으면 "#title" 이렇게 쓰고 class로 찾고 싶으면 ".title" 라고 쓰면 됩니다.

    이제 querySelector를 엄청 많이 쓸거예요. 이번 글 되게 이상한데 대충 보세요. 아 졸리다


    다음에 보자! 바이바이!

    댓글