Sign in to follow this  
thesupertaras

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

Recommended Posts

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

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

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

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

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

Спасибо...

Share this post


Link to post
Share on other sites

Вроде правильно использую метод 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>

Share this post


Link to post
Share on other sites

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>

Share this post


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

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

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites
...мне кажется, что getElementsByClassName браузеры ещ? не поддерживают.

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

Share this post


Link to post
Share on other sites
AKS, если уж и давать решение...

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

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.
Sign in to follow this  

  • Member Statistics

    46,530
    Total Members
    3,128
    Most Online
    6eJlbIu
    Newest Member
    6eJlbIu
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Спрашивают сейчас

  • Пишут сейчас

    • Ну, как я понял, это для динамичных сайтов, и все товары должны быть в какой то базе данных?
      А как через javascript обратиться к базе данных?
       
    • начнем с того, что данные ваших товарных позиций должны быть структурированы, например если они хранятся в SQL, то в вашем случае это может выглядеть:

      table
      date_start | date_stop | type | color | capacity | carrying

      одна строка - одна позиция
      SQL запрос к данной таблице вернет массив объектов с данными свойствами из таблицы (table)
      Без каких либо условий - это будут все записи. Если вам нужен фильтр по какой-либо колонке/колонкам или сортировка, то для этого в SQL запрос добавляются условия которые передаются в скрипт через POST или GET запрос с помощью формы
      например:

      <form method="post">
      <input name="date_start">
      <input name="date_stop">
      ....
      type и color логично сделать через select чтобы выбирать из существующих возможных вариантов
      capacity и carrying возможно потребуется возможность указания диапазона (от и до)
      ....
      </form>

      все выше перечисленное только в рамках возможных вариантов которых можно еще придумать
      если мы например укажем date_start то в скрипте используя $_POST['date_start'] можно будет добавить условие в SQL запрос
      ... WHERE `table`.`date_start` = $_POST['date_start']
      в этом случае на странице вывода позиций будут присутствовать только с Дата начала аренды указанной в фильтре

      в целом данная система - это большой комплекс разных механизмов в котором очень много нюансов, но если задаться целью, то можно сделать простенький фильтр на сайте
       
    • Здравствуйте. До сегодняшнего дня, я только занимался версткой макетов, и не совсем понимаю как в принципе после верстки сайты оживают и начинают работать. 

      Вот например, я сверстал карточки товаров, и там есть сортировка, но понятия не имею как его делать.

      Там есть формы: 
      - Дата начала аренды
      - Дата конца аренды
      - Тип транспорта
      - Цвет
      - Вместимость
      - Грузоподъемность Буду очень благодарен тому кто распишет как все это работает, а то понять не могу, что-то для меня это совсем темное и туманное.... 
  • Popular Contributors