yooniiverse
개발 블로그
yooniiverse
전체 방문자
오늘
어제
  • 분류 전체보기
    • 운영체제
    • 네트워크
    • ~2023.02
      • 외부교육
      • 대외활동
      • 스터디
      • 동아리
      • TIL
      • IT지식
      • 기타
      • 트러블 슈팅
      • 프로그래밍
      • Python
      • Java
      • JS
      • DB(SQL)
      • JSP
      • Spring
      • 기술면접
      • 자바
      • 코딩테스트
      • 자료구조
      • 알고리즘
      • 백준 문제풀이
      • 인공지능
      • 머신러닝
      • 프로젝트
      • 안드로이드 앱개발
      • 웹개발
      • 웹 서비스
      • 웹퍼블리싱
      • Node.js 백엔드 개발
      • CS
      • 1일 1CS지식
      • 운영체제
      • 네트워크
      • 데이터베이스
      • 정보처리기사
      • 도서 리뷰
      • 개발 관련 도서
      • 기타 도서

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
yooniiverse
~2023.02/JS

HTML 속성 다루기 예제

~2023.02/JS

HTML 속성 다루기 예제

2022. 6. 1. 16:14
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>오늘 할 일</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="main">
    <h2 class="title">오늘 할 일</h2>
    <ul id="to-do-list" class="to-do-list">
      <li>공부</li>
      <li>청소</li>
      <li>쇼핑</li>
    </ul>
  </div>
  <script src="index.js"></script>
</body>
</html>

 

1. <ul>태그의 class 속성 삭제

const main = documnet.querySelector('.main');
main.lastElementChild.removeAttribute('class');

 

2. 올바른 출력 결과 찾기

const toDoList = documnet.querySelector('#to-do-list');
const item = toDoList.firstElementChild;

const el = document.createElement('a');
el.setAttiribute('href', 'http://www.naver.com');
el.textContent = item.textContent;
item.innerHTML = el.outerHTML;

console.log(item);
  • el의 outerHTML 프로퍼티 값은 <a href="http://www.naver.com">공부</a> 이다.
  • 이 값이 item의 innerHTML 프로퍼티에 할당되기 때문에, item의 전체적인 모습은 <li><a href="http://www.naver.com">공부</a></li>이 된다.

'~2023.02 > JS' 카테고리의 다른 글

AND와 OR 연산 방식  (0) 2022.06.01
스타일 다루기  (0) 2022.06.01
자바스크립트 요소 노드 추가하기  (0) 2022.06.01
id, class, css 선택자로 태그 선택하기  (0) 2022.06.01
유사배열(Array-Like Object)  (0) 2022.06.01
    '~2023.02/JS' 카테고리의 다른 글
    • AND와 OR 연산 방식
    • 스타일 다루기
    • 자바스크립트 요소 노드 추가하기
    • id, class, css 선택자로 태그 선택하기
    yooniiverse
    yooniiverse

    티스토리툴바

    단축키

    내 블로그

    내 블로그 - 관리자 홈 전환
    Q
    Q
    새 글 쓰기
    W
    W

    블로그 게시글

    글 수정 (권한 있는 경우)
    E
    E
    댓글 영역으로 이동
    C
    C

    모든 영역

    이 페이지의 URL 복사
    S
    S
    맨 위로 이동
    T
    T
    티스토리 홈 이동
    H
    H
    단축키 안내
    Shift + /
    ⇧ + /

    * 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.