<DOM>

윤장원·2022년 5월 2일
0

DOM

목록 보기
1/1

DOM :
Document Object Model의 약자로, HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model이다.

  1. createElement

    document.createElement('div')
    //새로운 div 엘리먼트 생성

  2. Append - append, appendChild

    const tweetDiv = document.createElement('div')
    //변수 tweetDiv에 새로운 div 엘리먼트를 할당

    document.body.append(tweetDiv)
    //변수 tweetDiv에 담긴 새로운 div 엘리먼트를 body 엘리먼트에 append

  3. READ - querySelector, querySelectorAll
    셀렉터로는 HTML 태그("div"), id("#tweetList"), class(.tweet) 세 가지가 가장 많이 사용

    const oneTweet = document.querySelector('.tweet')
    //querySelector로 클래스 이름이 tweet인 HTML 엘리먼트 중 첫 번째 엘리먼트 조회

    const tweets = document.querySelectorAll('.tweet')
    //querySelectorAll로 클래스 이름이 tweet 인 모든 HTML 엘리먼트를 유사 배열(Array-like Object)로 받아오기

    const getOneTweet = document.getElementById('container')
    //getElementById로 아이디 이름이 container인 HTML 엘리먼트 받아오기

    const container = document.querySelector('#container')
    const tweetDiv = document.createElement('div')
    container.append(tweetDiv)
    //div엘리먼트를 생성하고 container의 마지막 자식 요소로 추가하기

  4. UPDATE - textContent, classList.add

    oneDiv.textContent = 'dev';
    //textContent를 이용해 문자열을 입력

    oneDiv.classList.add('tweet')
    //classList.add를 이용해 'tweet' 클래스를 추가

    const container = document.querySelector('#container')
    container.append(oneDiv)
    //append를 이용해 container의 자식 요소에 oneDiv를 추가

  5. setAttribute
    -선택한 요소(element)의 속성(attribute) 값을 정하기

    element.setAttribute( 'attributename', 'attributevalue' )

    ex)

    document.getElementById( 'xyz' ).setAttribute( 'title', 'This is title' )
    //id 값이 xyz인 요소의 title 속성을 This is title로 정합니다. 만약 이미 속성값이 존재한다면 그 값을 지우고 새 값을 적용합니다.

  6. DELETE - remove, removeChild

    -삭제하려는 엘리먼트의 위치를 알고 있는 경우

    const container = document.querySelector('#container')
    const tweetDiv = document.createElement('div')
    container.append(tweetDiv)
    tweetDiv.remove()
    //append 했던 엘리먼트를 삭제

    -여러 개의 자식 엘리먼트를 지우는 경우

    document.querySelector('#container').innerHTML = '';
    //id가 container인 엘리먼트 아래의 모든 엘리먼트를 지웁니다.

    -innerHTML은 보안에서 문제를 가지고 있기 때문에 removeChild 사용
    -removeChild :
    자식 엘리먼트를 지정해서 삭제하는 메소드
    모든 자식 엘리먼트를 삭제하기 위해, 반복문(while, for, etc.)을 활용

    const container = document.querySelector('#container');
    while (container.firstChild) {
    container.removeChild(container.firstChild);
    //container의 첫 번째 자식 엘리먼트가 존재하면, 첫 번째 자식 엘리먼트를 제거

    const container = document.querySelector('#container');
    while (container.children.length > 1) {
    container.removeChild(container.lastChild);
    }
    //container의 자식 엘리먼트가 1개만 남을 때까지, 마지막 자식 엘리먼트를 제거

    const tweets = document.querySelectorAll('.tweet')
    tweets.forEach(function(tweet){
    tweet.remove();
    })
    // or
    for (let tweet of tweets){
    tweet.remove()
    }
    //클래스 이름이 tweet인 엘리먼트만 찾아서 제거

0개의 댓글