JavaScript가 요소 속성, 스타일 및 클래스 이름을 작동하는 방법에 대한 자세한 설명

DOM - 문서 객체 모델

문서 흐름 운영을 위한 완전한 속성 및 메소드 세트

• 작업 페이지 태그(요소)
  작업 태그 추가, 삭제, 수정 및 확인
  작업 태그 속성 (id, class, type, ...)
  태그 스타일 조작
  …

• 일부 내용 알아보기
  -document: 문서 흐름, 페이지, 루트 노드(태그)는 제외
  -html: 가장 큰 것 모든 태그를 전달하는 요소, 루트 요소 노드
  -head: 구체적으로 현재 페이지의 설명 태그를 전달하며, 여기에 있는 콘텐츠는 일반적으로 페이지에 표시되지 않습니다.
  -body: 구체적으로 현재 페이지의 표시 태그를 전달하며, 여기에 있는 콘텐츠는 실제로 웹 페이지에 표시됩니다

요소 가져오기

변수를 사용하여 페이지의 하나 또는 일부 요소를 저장하세요
요소를 가져오는 방법은 두 가지 범주로 나뉩니다
1. 색다른 요소 가져오기

• html: 문서 .documentElement
• head: document.head
• body: document.body

2. 일반 요소 가져오기

• id를 기준으로 요소 가져오기
  구문: document.getElementById
  반환 값: 페이지의 id이면 이 요소이고, 그렇지 않으면 null입니다

• 클래스 이름으로 요소 가져오기
  에 따라 구문: document.getElementsByClassName('요소 클래스 이름')
  반환 값: 가상이어야 합니다. array
  페이지에 클래스 이름에 해당하는 요소가 있으면 최대한 많이 가져와 의사 배열에 넣습니다. Return
  페이지에 클래스 이름에 해당하는 요소가 없으면 비어 있습니다. 의사 배열

• 태그 이름을 기준으로 요소 가져오기
  구문: document.getElementsByTagName('Tag Name')
  반환 값: 의사 배열이어야 함
  페이지에 태그 이름에 해당하는 요소가 있는 경우 그런 다음 있는 만큼 가져와 의사 배열에 넣고 반환합니다.
  페이지에 태그 이름에 해당하는 요소가 없으면 빈 의사 배열이 됩니다.

• 선택자 A에 따라 가져옵니다. label
  구문: document.querySelector('selector')
  반환 값: 페이지에 선택기에 해당하는 요소가 있으면 해당 선택기에 해당하는 첫 번째 요소가 반환됩니다.
  해당 선택기에 해당하는 요소가 없으면 페이지, 그러면 null입니다

• 선택기를 기반으로 태그 세트 가져오기
  구문: document.querySelectorAll('selector')
  반환 값: 의사 배열이어야 합니다
  페이지의 셀렉터는 몇 개를 얻었는지, 의사 배열에 넣고 반환
  페이지에 셀렉터에 해당하는 요소가 없으면 빈 의사 배열입니다

요소 스타일 조작하기

• JS에서 요소 스타일을 조작하는 세 가지 방법이 있습니다
  1. 요소 인라인 스타일 가져오기(인라인 스타일만 가져올 수 있음)
  2. 요소의 비인라인 스타일 가져오기(인라인 및 비인라인 포함)
  3. 요소 스타일 설정 (인라인 스타일만 설정 가능)
  참고: 밑줄 포함 스타일 이름이
  Camel Case로 변환된 경우
  배열 연관 구문

• 을 사용하여 요소의 인라인 스타일을 가져옵니다.
  구문: element.style.style 이름

console.log(ele.style.width)
console.log(ele.style.height) // 非行内样式
console.log(ele.style.fontSize)
console.log(ele.style['font-size'])

• ·요소의 인라인이 아닌 스타일 가져오기
  구문: window.getCompulatedStyle(스타일을 가져올 요소).스타일 이름

console.log(window.getComputedStyle(ele).width)
console.log(window.getComputedStyle(ele).height)
console.log(window.getComputedStyle(ele).fontSize)
console.log(window.getComputedStyle(ele)['background-color'])

• 요소 스타일 설정(인라인 스타일만 설정할 수 있음)
  구문: 요소 .style.Style 이름 = 스타일 값

ele.style.backgroundColor = 'red'

작업 요소 클래스 이름

용도: 스타일을 일괄 변경

• className
  기본 속성 작업
  JS에는 클래스라는 키가 있으므로 이름 변경을 방지하기 위해 className이라고 합니다
  참고: 클래스 이름의 값은 문자열이지만 문자열에는 여러 개가 포함될 수 있습니다. 각 클래스 이름

• classList
  각 요소 노드에는 classList라는 속성이 있습니다
  다음과 유사한 데이터 구조입니다. 요소의 모든 클래스 이름을 저장하는 그룹
  추가, 삭제, 수정 및 쿼리는 모두 classList에서 수행됩니다. 전용 API를 제공하세요
  추가: element.classList.add(클래스 이름)
  삭제: element.classList.remove (클래스 이름)
  스위치: element.classList.toggle(클래스 이름)
  - 원래 있으면 삭제하고, 이전에 없었다면 추가하세요.

관련 권장 사항: [JavaScript 비디오 튜토리얼]

위 내용은 JavaScript가 요소 속성, 스타일 및 클래스 이름을 작동하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!