✨
Saltberry
GithubLinkedIn
  • 개요 Overview
  • 📝HTML/CSS
    • 구조 HTML
    • 스타일 CSS
      • z-index
  • 📦개발 Development
    • 개발 Implementation
    • 단어 Glosarry
    • 깃 Git
    • 해시 Hash
    • 노드 패키지 매니저 Node Package Manager
    • 브라우저 랜더링 Browser Rendering Process
    • 교차 출처 리소스 공유 CORS
    • 인터프리터 Interpreter
    • Object-oriented programming(OOP) 객체지향 프로그래밍
  • 💡CS 50
    • Computational Thinking
  • ✨자바스크립트 Javascript
    • 자바스크립트란 What is JavaScript
    • 표현식과 문 Expression Statement
    • 변수 Variable
    • 함수 Function
    • 참과 거짓 값 Truth Falsy
    • 배열 Array
    • Import Export
    • 스택과 큐 Stack Queue
    • 문서객체모델 Document Object Model
      • 개요 Overview
      • 도큐먼트 Document
      • HTMLCollection
      • getMethod
      • NodeList
      • childNodes, children
      • Event
      • live, static
      • Element
      • DOM Token
      • 속성 attribute
      • implementation
      • 노드 Node
      • HTMLElement
    • 브라우저 저장소 Cookie Web Storage
  • 🎁리액트 React
    • 리액트 톧아보기 Overview
    • Intro
      • 상태의 불변성 State Immutability
      • Props and State
      • Hooks
    • Concepts
  • 🚦타입스크립트 Typescript
    • Page 1
  • 🗃️리덕스 Redux
    • 왜 리덕스를 사용할까 Why Redux
    • 플럭스 Flux
  • 📬넥스트 Nextjs
    • Pages
  • ✅면접 Interview
    • Index
    • Implement experiences
    • Best practice for query parameter and fetch
  • 🚀TECH
    • Lists
    • Zustand
  • 🧬Algorithm
    • Types of algorithms
    • 이진수 변환 Binary Number
    • 후위 연산자 Postfix expression
    • 선택 정렬 Selection Sort
    • Find longest substring without repeating characters
    • 올바른 괄호 Valid Parentheses
  • 📔Mathematics
    • 다항식 Polynomial
  • 🗂️Database
    • 데이터베이스 Database
  • 📝Class
    • 자료구조 Data Structure
      • 배열 Array
    • C++ 프로그래밍
      • C++ 기초
    • 소프트웨어 공학 Software engineering
      • 소프트웨어 개요 Software overview
      • 소프트웨어 프로세스 Software process
    • 자바 Java
      • 자바와 객체지향 프로그래밍 Java and OOP(Object-oriented programming)
  • Java
    • 자바가 뭐지?
  • CA EI
    • CA EI
Powered by GitBook
On this page
  1. 자바스크립트 Javascript
  2. 문서객체모델 Document Object Model

속성 attribute

const id = document.getElementById("id");
const isValid = id.hasAttribute("title"); //boolean; titile이란 속성이 설정되어 있는가?
//content 속성으로 작성했는가 안했는가가 기준 <label title="title" />

const attributes = id.attributes;
const isValidAttributes = id.hasAttributes(); //속성이 있는지 없는지 boolean
console.log(attributes.item(1).nodeName); // [1]번째 속성의 값이 출력

프로퍼티 원래 있는 속성 el.title vs el["font-size"] 프로퍼티 키로 접근 IDL

커스텀인 경우에는 getAttribute로 하는 것이 좋음? content

const el = document.getElementById("id");
const list = el.getAttributeNames(); //array로 모든 속성 내용이 담겨 나옴

const node = el.getAttributeNode("title"); //속성을 Attr객체로 반환함

sequence 란?

<<"a", "b">> 값을 각 콤마로 구분 Infra?

//뭔가 만드는c는 document에서 나머지 rud는 Element 인터페이스에서

const created = document.createAttribute("isActive");
created.value = true;

const new = document.getElementById("id"); //(name, value)
new.setAttribute(created); //만든 속성을 엘리먼트에 적용 

new.ownerElement.id; //??

new.setAttributeNode(created); //????? 설정 결과과 필요할 때 이걸 사용하자?

Attr 인터페이스

new.removeAttribtue("id"); //삭제된 것을 반환하지 않음

const attr = el.getAttributeNode("category");
new.removeAttributeNode(attr); //오브젝트 attr 형태로 파라미터에 전달 삭제된 attr 객체로 반환


const result = el.toggleAttribute("id"); //결과는 boolean
el.ontoggle = () => {};
el.open //open 프로퍼티

Last updated 2 years ago

✨