Вопрос: как обратиться к элементам по class'у?...

thesupertaras · November 28, 2007

Подскажите пожалуйста, возможно ли обратиться через javascript к классу элементов...

знаю, что можно обратиться к элементу по id (например, var header = document.getElementById('header') )...

или по названию элемента (например, var div = document.getElementsByTagName('div')[0] )...

В первом случае обращаемся к 1 элементу с конкретным id, во втором - к элементу с заданным порядковым номером...

А очень часто бывает нужно обратиться именно к классу элементов... Если кто знает как это сделать, подскажите пожалуйста...

Спасибо...

AKS · November 28, 2007

getElementsByClassName

thesupertaras · November 28, 2007

Вроде правильно использую метод getElementsByClassName... Объясните, почему тогда надпись text не становиться красной??? В чем причина???

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

	<script type="text/javascript">
 window.onload = function() {
 var abc = document.getElementsByClassName('abc');
 abc.style.color = '#f00';
 }
 </script>

</head>
<body>

	<p class="abc">text text</p>
</body>
</html>

S ... (delete) · November 29, 2007

AKS, я конечно не профи в JavaScript, только мне кажется, что getElementsByClassName браузеры ещ? не поддерживают. Возможно я и ошибаюсь.

S ... (delete) · November 29, 2007

thesupertaras, я пользуюсь функцией

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

 <script type="text/javascript">
function getElementsByClass(searchClass,node,tag)
{
 var classElements = [];

 if (node == null)
 {
 node = document;
 }

 if (tag == null)
 {
 tag = '*';
 }

 var els = node.getElementsByTagName(tag);
 var elsLen = els.length;

 var pattern = new RegExp("(^|s)"+searchClass+"(s|$)");
 var i;
 for (i = 0; i < elsLen; i++)
 {
 if (pattern.test(els[i].className))
 {
 classElements[classElements.length] = els[i];
 }
 }

 return classElements;
}


 window.onload = function() {
 var abc = getElementsByClass('abc');
 abc[0].style.color = '#f00';
 }
 </script>

</head>
<body>

 <p class="abc">text text</p>
</body>
</html>

Петр · November 29, 2007

Вроде правильно использую метод getElementsByClassName... Объясните, почему тогда надпись text не становиться красной??? В чем причина???

потому что abc у тебя массив.

thesupertaras · November 29, 2007

Sectronix, спасибо огромное!.. Вот это реально работающее решение для всех браузеров!... :cool:

thesupertaras, я пользуюсь функцией

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

 <script type="text/javascript">
function getElementsByClass(searchClass,node,tag)
{
 var classElements = [];

 if (node == null)
 {
 node = document;
 }

 if (tag == null)
 {
 tag = '*';
 }

 var els = node.getElementsByTagName(tag);
 var elsLen = els.length;

 var pattern = new RegExp("(^|s)"+searchClass+"(s|$)");
 var i;
 for (i = 0; i < elsLen; i++)
 {
 if (pattern.test(els[i].className))
 {
 classElements[classElements.length] = els[i];
 }
 }

 return classElements;
}


 window.onload = function() {
 var abc = getElementsByClass('abc');
 abc[0].style.color = '#f00';
 }
 </script>

</head>
<body>

 <p class="abc">text text</p>
</body>
</html>

AKS · December 1, 2007

...мне кажется, что getElementsByClassName браузеры ещ? не поддерживают.

Во-первых, я не упоминал никаких браузеров. А во-вторых, раз уж на то пошло, в Opera 9.5 эта фича уже имеется.

S ... (delete) · December 1, 2007

AKS, если уж и давать решение, то чтобы оно работало не только в опере 9.5.

AKS · December 1, 2007

AKS, если уж и давать решение...

Опять же, первое - я не собирался давать готового решения, и второе - не пытайтесь меня вынудить писать готовые решения, т.к. это дело добровольное, будет желание - тогда и напишу.

S ... (delete) · December 2, 2007

Хорошо, давайте не готовое решение, давайте решение, которое ни где ещ? не работет.

Tokolist · December 2, 2007

Тема закрыта

Sign In

Вопрос: как обратиться к элементам по class'у?...

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Обсуждения

Important Information