Javascript 클래스 선택기 메소드에 대한 자세한 설명-JS 튜토리얼-php.cn

이 글은 Javascript 클래스 선택기 방법을 소개합니다. 도움이 필요한 친구들에게 도움이 되길 바랍니다!

Javascript 클래스 선택기 메서드

생태계이자 플랫폼으로서 브라우저는 프로그래밍 언어로 호출하고 제어할 수 있는 일련의 함수 메서드를 제공합니다. 브라우저의 경우 브라우저에 내장된 메서드를 호출하는 것이 당연합니다. Javascript 언어를 통한 메소드, 운영 체제의 경우 대부분의 언어에서 해당 API를 호출할 수 있습니다.

CSS는 ID 선택기 또는 클래스 선택기를 통해 HTML 요소에 스타일을 추가할 수 있습니다. CSS와 마찬가지로 브라우저 플랫폼도 Javascript 언어에서 호출할 수 있는 ID 선택기 및 클래스 선택기 메소드를 제공합니다. code>getElementById(). 본 글에서 설명할 클래스 선택기 메소드는 getElementsByClassName()이다. 이를 이름으로 표현하고자 하는 내용을 알 수 있다. 표준은 이름에서 알 수 있듯이 이름을 그대로 유지하려고 노력합니다. 물론 이는 이름에서 알 수 있듯이 영어에 대한 것입니다. getElementById()，本文要讲解的类选择器方法是getElementsByClassName()，通过名字你都可以看出他们要表达的意思，标准委员会制定这些标准也不是心血来潮随意命名，都尽量做到顾其名思其义，当然这是针对英语语言的顾名思义。

ID的特点是选择一个，class的点特点批量选择，比如通过Javascript动态地给一些元素批量添加样式属性，就主要用到getElementsByClassName()方法。【相关推荐：JavaScript视频教程】

案例

在一个已经写好的HTML和css的文件基础上添加Javascript代码，实现用户可以在网页上批量自定义元素的样式。

48   <body style="background-color: #777777">
49   <!--自定义颜色功能按钮-->
50   <button style="background-color: #00aaff" id="button1" onclick="fun1()"></button>
51   <button style="background-color: #1abc9c" id="button2" onclick="fun2()"></button>
52   <!--Web应用界面命令-->
53   <div class="command">
54       <!--注释空格-->
55       <div class="bottom padding radius left-radius div">圆弧</div><!--
56       --><div class="bottom padding div">直线</div><!--
57       --><div class="bottom padding div">矩形</div><!--
58       --><div class="bottom padding div">曲线</div><!--
59       --><div class="padding right-radius div">倒角</div>
60   </div>
61   <script>
62   //    批量选中类属性名为div的所有元素，返回所有元素对象组成的数组
63       let arr = document.getElementsByClassName("div");
64   //    定义两个更改颜色的函数fun1和fun2
65       function fun1() {
66   //        遍历所有元素对象
67           for(let i = 0; i<arr.length;i++){
68   //            更改背景颜色
69               arr[i].style.backgroundColor="#00aaff";
70           }
71       }
72       function fun2() {
73           for(let i = 0; i<arr.length;i++){
74               arr[i].style.backgroundColor="#1abc9c";
75           }
76       }
77   </script>
78   </body>

로그인 후 복사

代码解析

第53行到第60行代码定义的是一系列应用界面的命令按钮，第50和第51行代码定义的是两个具有自定义其它元素样式的功能按钮button，当你单击其中一个功能按钮button时候，会调用 script标签中的函数fun1()或fun2(),比如执行fun1函数后，第53行到第60行代码定义的元素背景元素颜色会批量修改，由灰色变为#00aaff色。

第63行代码通过类选择器方法getElementsByClassName()选中类属性名是“div”的所有元素，getElementById()方法返回的一个对象，也就是元素本身，getElementsByClassName()方法返回的是所有元素对象组成的数组。这也就是说，如果你想更改一个元素的属性值，通过数组下标的方式访问元素，比如arr[0]表示第55行代码定义的div元素。如果直接写arr.style.backgroundColor="#00aaff";更改arr全部元素的背景颜色是不合法的，arr是一个数组，它没有.style样式属性，要通过arr[i].style.backgroundColor="#00aaff这样的形式来重置元素背景颜色。

要更改的元素比较多，而元素要更改的颜色也一致，所以可以通过for循环结构程序来完成，代码第67行到第70行的作用就是遍历数组arr中的所有div元素，然后更改他们的背景颜色。

第65行和第72行分别定义了函数fun1和fun2，可以通过鼠标单击事件调用，fun1的功能是批量把元素的背景颜色更改为#00aaff，fun1的功能是批量把元素的背景颜色更改为#1abc9c。

<strong>getElementsByTagName()</strong>

getElementsByTagName()方法和getElementsByClassName()

ID의 특징은 하나를 선택하고 클래스의 특성을 일괄적으로 선택하는 것입니다. 예를 들어 Javascript를 통해 일부 요소에 스타일 속성을 일괄적으로 동적으로 추가하려면 getElementsByClassName() 메서드가 주로 사용됩니다. 사용된. [관련 권장사항: JavaScript 동영상 튜토리얼]

Case

in one 이미 작성된 HTML 및 CSS 파일을 기반으로 Javascript 코드를 추가하면 사용자가 웹 페이지의 요소 스타일을 일괄적으로 사용자 정의할 수 있습니다.

rrreee코드 분석

코드의 53~60행은 애플리케이션 인터페이스에 대한 일련의 명령 버튼을 정의합니다. 코드의 50~51행은 다른 요소를 클릭할 때 사용자 정의 스타일이 있는 두 개의 기능 버튼 버튼을 정의합니다. 함수 버튼을 사용하면 스크립트 태그의 fun1() 또는 fun2() 함수가 호출됩니다. 예를 들어 fun1 함수가 실행된 후 코드의 53~60번째 줄에 정의된 요소의 배경 요소 색상이 수정됩니다. 일괄적으로 회색이 #00aaff 색상으로 변경됩니다. 🎜🎜코드의 63번째 줄은 클래스 선택기 메소드 getElementsByClassName()을 통해 클래스 속성 이름이 "div"인 모든 요소를 선택합니다. getElementById() 메소드에 의해 반환된 객체는 요소 자체인 입니다. > getElementsByClassName() 메소드는 모든 요소 객체로 구성된 배열을 반환합니다. 즉, 요소의 속성 값을 변경하려면 배열 첨자를 통해 요소에 액세스해야 합니다. 예를 들어 arr[0]은 코드의 55행에 정의된 div 요소를 나타냅니다. arr에 있는 모든 요소의 배경색을 변경하기 위해 arr.style.BackgroundColor="#00aaff";를 직접 작성하는 것은 불법입니다. arr은 배열이며 .style 속성이 없습니다. arr[i].style.BackgroundColor="#00aaff를 전달해야 합니다. 이 양식은 요소의 배경색을 재설정하는 데 사용됩니다. 🎜🎜변경할 요소가 많고 색상도 변경됩니다. 변경할 요소도 동일하므로 for 루프 구조를 사용할 수 있습니다. 프로그램을 완료하려면 코드의 67~70행 기능은 배열 arr의 모든 div 요소를 순회한 다음 배경색을 변경하는 것입니다. 🎜🎜 65행과 72행은 각각 전달할 수 있는 fun1 및 fun2 함수를 정의합니다. fun1의 함수는 요소의 배경색을 일괄적으로 #00aaff로 변경하는 것입니다. 일괄적으로 요소의 배경색을 #1abc9c로 변경합니다. 🎜🎜🎜getElementsByTagName()🎜 🎜🎜getElementsByTagName() 메서드를 사용하면 다음과 같은 요소를 일괄적으로 선택할 수 있습니다. getElementsByClassName() 메소드. 반환된 결과는 데이터 유형의 관점에서 모두 배열 객체입니다. getElementsByTagName() 메소드는 태그 이름을 통해 요소를 선택합니다. getElementsByTagName() 메소드 이름의 영어 태그는 태그를 의미합니다. 🎜🎜🎜Application🎜🎜🎜몇 가지 선택 항목을 알아보고 해당 요소의 특성을 아는 것은 응용 프로그램을 위한 것입니다. CSS에서는 일반적으로 요소 선택기와 ID 선택기를 사용하고, 전체 페이지에서 요소를 선택하는 경우에는 getElementsByTagName()을 참조하십시오. 여러 위치에 특정 요소가 있고 이러한 요소에는 서로 다른 배경색이 필요합니다. 예를 들어 getElementsByTagName() 메서드를 사용하면 실수로 손상될 수 있습니다. getElementsByClassName()의 장점은 클래스 속성 이름을 직접 붙여넣을 수 있다는 것입니다. 요소에는 여러 클래스 이름이 있을 수 있습니다. 실제 프로젝트에서는 코드 재사용이 강조되는 경우가 많습니다. 웹사이트에는 테마 배경색만 있으면 됩니다. 색상 클래스 스타일을 정의한 다음 각 페이지에 이 클래스 이름을 소개합니다. 🎜🎜🎜요약🎜🎜

이 글에서는 getElementsByClassName() 메소드에 대해서 설명할 뿐만 아니라, CSS의 요소 선택자, ID 선택자, 클래스 선택자에 해당하는 비교를 통해 Javascript에서 요소를 선택하는 세 가지 방법을 CSS 선택자와 Javascript 선택자를 비교하여 설명합니다. (DOM 방식)은 학습에 따른 메모리 부담을 줄이기 위해 시스템 관점에서 기술을 학습하고, 표준 위원회 개발자 관점에서 기술 표준을 이해합니다.

위 내용은 Javascript 클래스 선택기 메소드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!