DOM “ 토큰목록 ”에는 최종 사용자가 요구 사항에 따라 액세스할 수 있는 많은 속성이나 메서드가 포함되어 있습니다. 이 목록에서 제공하는 속성과 메서드는 제공된 데이터 세트에 대해 특정 작업을 수행하고 그에 따라 결과를 반환합니다. 인덱스로 선택할 수 있는 다양한 멤버가 있고 배열과 마찬가지로 첫 번째 인덱스는 ' 0 '. 하지만 “ pop()”, “push()” 또는 “join() '.
이 블로그에서는 JavaScript를 통한 HTML DOMTokenList 개체의 작동을 설명합니다.
JavaScript HTML DOMTokenList 개체를 사용하는 방법은 무엇입니까?
HTML DOMTokenList는 그 자체로는 아무 것도 아니며 그 값은 단지 그 안에 있는 속성과 메서드로 인해 발생합니다. 적절한 구현과 함께 이러한 속성과 메서드를 자세히 살펴보겠습니다.
방법 1: Add() 메서드
“ 추가하다 ()”는 선택한 요소에 새 클래스, 속성 또는 단순 토큰을 연결하거나 할당합니다. 구문은 다음과 같습니다.
htmlElement. 추가하다 ( oneOrMoreToken )
구현은 다음 코드를 통해 수행됩니다.
< 머리 >
< 스타일 >
.글꼴크기{
글꼴 크기: 대형;
}
.색상{
배경색: cadetblue;
색상: 화이트스모크;
}
< / 스타일 >
< / 머리 >
< 몸 >
< h1 스타일 = '색상: 생도블루;' > 리눅스 < / h1 >
< 단추 클릭하면 = '행동()' > 가산기 < / 단추 >
< 피 > 스타일링을 적용하려면 위 버튼을 누르세요. < / 피 >
< div ID = '선택된' >
< 피 > 나는 선택된 텍스트입니다. < / 피 >
< / div >
< 스크립트 >
함수 액션() {
document.getElementById('selected').classList.add('fontSize', 'color');
}
< / 스크립트 >
< / 몸 >
위 코드에 대한 설명은 다음과 같습니다.
- 먼저 두 개의 CSS 클래스를 선택합니다. 글꼴 크기 ” 및 “color”를 선택하고 “와 같은 임의의 CSS 속성을 할당합니다. 글꼴 크기”, “배경색” 및 “색상” '.
- 다음으로 “<를 사용하여 버튼을 만듭니다. 단추 >' 태그는 '를 호출합니다. 행동 ()” 기능을 사용하여 “ 클릭하면 ” 이벤트 리스너.
- 또한 상위 ' div ” 요소를 선택하고 “의 ID를 할당합니다. 선택된 ”를 입력하고 그 안에 더미 데이터를 삽입합니다.
- 그 후에는 “ 행동 ()” 함수를 사용하고 고유 ID에 액세스하여 선택한 요소의 참조를 저장합니다.
- 마지막으로 “ 클래스 목록 ” 속성을 사용하여 클래스를 할당하고 “ 추가하다 ()' 방법. 그런 다음 이 메서드 괄호 안에 CSS 클래스를 전달하면 이 클래스가 선택한 요소에 적용됩니다.
위 코드를 컴파일한 후의 출력은 다음과 같이 생성됩니다.
위 gif는 CSS 클래스가 '를 통해 선택된 요소에 할당되었음을 확인합니다. 추가하다 ()' 방법.
방법 2: Remove() 메서드
이 메소드는 아래 코드에서 수행된 것처럼 하나 이상의 선택된 요소에서 특정 클래스 또는 ID를 제거합니다.
< 머리 >< 스타일 >
.글꼴크기 {
폰트- 크기 : 크기가 큰;
}
. 색상 {
배경- 색상 : 생도블루;
색상 : 흰 연기;
}
< / 스타일 >
< / 머리 >
< 몸 >
< h1 스타일 = '색상: 생도블루;' > 리눅스힌트 < / h1 >
< 단추 클릭하면 = '행동()' >가산기< / 단추 >
< 피 >위 버튼을 눌러 스타일링을 적용하세요< / 피 >
< div ID = '선택된' 수업 = '글꼴 크기 색상' >
< 피 >나는 선택된 텍스트 .< / 피 >
< / div >
< 스크립트 >
기능 행동 ( ) {
document.getElementById ( '선택된' ) .classList.제거 ( '색상' ) ;
}
< / 스크립트 >
< / 몸 >
위 코드에 대한 설명은 다음과 같습니다.
- 처음에는 위 코드에서 설명된 코드가 여기서는 예로 사용되었습니다.
- 여기서는 둘 다 “ 색상 ' 그리고 ' 글꼴 크기 ” 클래스는 선택한 요소에 직접 할당됩니다.
- 그 후, ' 행동 ()” 함수는 “에 의해 호출됩니다. 클릭하면 ” 이벤트 리스너 “ 제거하다 ()” 토큰 방식을 사용합니다.
- 이 메서드는 선택한 요소에서 제거될 하나 이상의 클래스를 사용합니다. 우리의 경우 ' 색상 ” 클래스가 선택한 HTML 요소에서 제거됩니다.
위 코드의 출력은 다음과 같이 표시됩니다.
위 출력은 'remove()' 메서드를 사용하여 선택한 요소에서 특정 CSS 클래스가 제거되었음을 보여줍니다.
방법 3: Toggle() 메서드
“ 비녀장 ()” 방식은 “ 추가하다 ()' 그리고 ' 제거하다 ()” 방법. 먼저 제공된 CSS 클래스를 선택한 HTML 요소에 할당한 다음 사용자의 작업에 따라 제거합니다.
< HTML >< 머리 >
< 스타일 >
.글꼴크기 {
폰트- 크기 : xx-대형;
}
. 색상 {
배경- 색상 : 생도블루;
색상 : 흰 연기;
}
< / 스타일 >
< / 머리 >
< 몸 >
< h1 스타일 = '색상: 생도블루;' > 리눅스힌트 < / h1 >
< 단추 클릭하면 = '행동()' >가산기< / 단추 >
< 피 >위 버튼을 눌러 스타일링을 적용하세요< / 피 >
< div ID = '선택된' >
< 피 >나는 선택된 텍스트 .< / 피 >
< / div >
< 스크립트 >
기능 행동 ( ) {
document.getElementById ( '선택된' ) .classList.toggle ( '글꼴크기' ) ;
}
< / 스크립트 >
< / 몸 >
< / HTML >
위 코드에 대한 설명은 다음과 같습니다.
- 위 섹션에서 사용된 것과 동일한 프로그램이 사용됩니다. 비녀장 ()” 메소드는 “ 제거하다 ()' 방법.
컴파일 단계가 끝나면 출력은 다음과 같습니다.
출력에는 사용자의 작업에 따라 특정 CSS 클래스가 추가 및 제거되고 있음이 표시됩니다.
방법 4: Contains() 메서드
“ 포함 ()” 메소드는 HTML 요소에 대한 특정 CSS 클래스의 가용성을 확인하는 데 사용되며 해당 구현은 아래에 설명되어 있습니다.
< 스크립트 >기능 행동 ( ) {
x하자 = 문서. getElementById ( '선택된' ) . 클래스 목록 . 포함 ( '글꼴크기' ) ;
문서. getElementById ( '시험' ) . 내부HTML = 엑스 ;
}
스크립트 >
HTML과 CSS 부분은 동일하게 유지됩니다. “<에서만 스크립트 >' 태그를 사용하면 선택한 요소에 'contains()' 메소드가 적용되어 ' 글꼴 크기 ”가 해당 요소에 적용되는지 여부입니다. 그런 다음 결과는 ID가 '인 HTML 요소의 웹 페이지에 표시됩니다. 시험 '.
위의 코드를 컴파일하면 웹페이지가 다음과 같이 나타납니다.
출력에는 ' 진실 ”가 반환되는데 이는 특정 CSS 클래스가 선택한 HTML 요소 위에 적용되었음을 의미합니다.
방법 5: Item() 메서드
“ 안건 ()' 메소드는 '부터 시작하는 인덱스 번호에 따라 토큰 또는 CSS 클래스를 선택합니다. 0 ', 아래 그림과 같이:
< 몸 >< h1 스타일 = '색상: 생도블루;' > 리눅스 h1 >
< 버튼 클릭 = '행동()' > 체커 단추 >
< 피 > CSS 수업 처음에 할당된 것은 , 회수된다 : 피 >
< h3 아이디 = '사용 사례' 수업 = 'firstCls secondCls thirdCls' > h3 >
< 스크립트 >
기능 행동 ( ) {
데모리스트하자 = 문서. getElementById ( '사용 사례' ) . 클래스 목록 . 안건 ( 0 ) ;
문서. getElementById ( '사용 사례' ) . 내부HTML = 데모목록 ;
}
스크립트 >
몸 >
위 코드에 대한 설명:
- 먼저, 선택한 요소에 ID가 ''인 여러 CSS 클래스가 할당됩니다. 사용 사례 ” 및 “를 통해 호출되는 “action()” 메서드 클릭하면 ' 이벤트.
- 이 함수에서는 “ 안건 ()' 인덱스가 있는 메소드 0 ”가 선택한 요소에 첨부됩니다. 결과는 '라는 변수에 저장됩니다. 데모목록 '라는 메시지가 '를 사용하여 웹페이지 위에 인쇄됩니다. 내부 HTML ' 재산.
컴파일이 끝나면 다음과 같이 출력됩니다.
출력에는 처음에 선택한 요소에 적용되고 검색되는 CSS 클래스의 이름이 표시됩니다.
방법 6: 길이 속성
“ 길이 ” tokenList의 속성은 선택한 요소에 적용되는 요소 또는 할당된 클래스의 수를 반환합니다. 구현 프로세스는 다음과 같습니다.
< 스크립트 >기능 행동 ( ) {
그들이 철거하게 놔두세요 = 문서. getElementById ( '사용 사례' ) . 클래스 목록 . 길이 ;
문서. getElementById ( '사용 사례' ) . 내부HTML = 헐다 ;
}
스크립트 >
위의 코드 블록에서:
- 먼저 “ 길이 ” 속성이 “에 첨부됩니다. 클래스 목록 ” 속성을 사용하여 선택한 요소에 할당된 클래스 수를 검색합니다.
- 다음으로, 속성의 결과는 변수 “ 헐다 ” ID가 “인 요소의 웹페이지 위에 표시됩니다. 사용 사례 '.
- 나머지 코드는 위 섹션과 동일하게 유지됩니다.
컴파일 후 생성된 출력은 다음과 같습니다.
출력은 요소에 적용된 클래스를 반환합니다.
방법 7: 바꾸기() 메서드
“ 바꾸다 ()” 메소드는 아래와 같이 최소 2개의 매개변수를 사용하고 선택한 요소에 대한 첫 번째 매개변수를 두 번째 매개변수로 바꾸는 방법입니다.
< 스크립트 >기능 행동 ( ) {
데모리스트하자 = 문서. getElementById ( '사용 사례' ) . 클래스 목록 . 바꾸다 ( '글꼴크기' , '색상' ) ;
}
스크립트 >
여기서 CSS는 “ 글꼴 크기 ” 클래스는 CSS로 대체됩니다. “ 색상 ” ID가 “인 요소에 대한 클래스 사용 사례 '. 나머지 HTML 및 CSS 코드는 위 섹션과 동일하게 유지됩니다.
'를 수정한 후 스크립트 ” 부분을 편집하고 기본 HTML 파일을 컴파일하면 출력은 다음과 같습니다.
출력에는 특정 CSS 클래스가 다른 클래스로 대체되었음을 보여줍니다.
방법 8: 값 속성
“ 값 ” 토큰 목록 속성은 선택한 HTML 요소에 할당된 필수 값을 검색합니다. ' 옆에 붙으면 클래스 목록 ” 속성을 사용하면 선택한 요소에 할당된 클래스가 아래와 같이 검색됩니다.
< 스크립트 >기능 행동 ( ) {
데모발하자 = 문서. getElementById ( '사용 사례' ) . 클래스 목록 . 값 ;
문서. getElementById ( '인쇄' ) . 내부HTML = 데모발 ;
}
스크립트 >
위에 언급된 코드 조각에 대한 설명:
- “ 안에 행동 ()” 함수 본문, “ 값 ' 속성은 ' 옆에 첨부됩니다. 클래스 목록 ” 속성을 사용하여 선택한 HTML 요소에 할당된 모든 클래스를 검색합니다.
- 다음으로, 위 속성의 결과는 '라는 변수에 저장됩니다. 데모발 ”를 입력하고 ID가 “print”인 요소 위에 삽입됩니다.
컴파일 단계가 끝나면 웹페이지의 출력이 다음과 같이 생성됩니다.
출력에는 선택한 요소에 적용되는 CSS 클래스의 이름이 표시됩니다.
결론
HTML DOM TokenList 객체는 제공된 HTML 요소에 특정 기능을 적용하는 데 사용되는 여러 메서드와 속성을 저장하는 배열과 같습니다. TokenList가 제공하는 가장 중요하고 널리 사용되는 방법 중 일부는 다음과 같습니다. add()”, “remove()”, “toggle()”, “contains()”, “item()” 및 “replace() '. TokenList가 제공하는 속성은 다음과 같습니다. 길이 ' 그리고 ' 값 '. 이 문서에서는 JavaScript HTML DOMTokenList 개체를 사용하는 절차를 설명했습니다.