Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.07.2012, 01:02
Новичок на форуме
Отправить личное сообщение для potato Посмотреть профиль Найти все сообщения от potato
 
Регистрация: 07.07.2012
Сообщений: 9

Функция для выборки html элементов
Изучаю JS. И решил закрепить знание.
Написал маленькую функцию для выборки элементов по id, class или по tagname.

файл lib.js
function x(obj) {
	var regId = /^#[a-z0-9\-\w\s]+/gi,
		regClass = /^\.[a-z0-9\-\_\w\s]+/gi;

	if(obj.constructor == String) {
		if(regId.test(obj)) {
			var id = obj.substr(1, obj.length);
			var element = document.getElementById(id);
		} else if (regClass.test(obj)) {
			var elemClass = obj.substr(1, obj.length);
			var element = document.getElementsByClassName(elemClass);
		} else if (obj.charAt(0) == "<" && obj.charAt(obj.length - 1) == ">") {
		   var tag = obj.substr(1, obj.length - 2);
		   var element = document.getElementsByTagName(tag);
		}
	} else {
		throw new Error("Object must be a string");
	}
	return element;
}


index.html
<html>
<head>
	<title>Index</title>
	<style type="text/css">
		#box { border: solid 1px black; width: 250px; padding: 4px;}
		#myForm { 	background: rgb(200,200,200); width: 500px;}		}
	</style>
	<script type="text/javascript" src="lib.js"></script>
</head>
<body>
<div id="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
<h3>Welcome to my Blog!</h3>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<br>
<ul id="menu">
	<li class="item">Home</li>
	<li class="item">Links</li>
	<li class="item">Downloads</li>
	<li class="item">Profile</li>
	<li class="item">About</li>
</ul>
<script type="text/javascript">
	var box = x("#box"); // выборка по id
        var p = x(".paragraph"); // выборка по классу
        var tag = x("<h3>"); // выборка по имени елемента

	box.style.borderColor = "red" ;
        p.style.color = "orange" ;
        tag.style.backgroundColor = "gray";
</script>
</body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 31.07.2012, 02:22
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Сообщение от potato
var tag = x("<h3>"); // выборка по имени елемента
интересное решение, а разве без этих <> знаков не проще?

function x( selector ) {
    return typeof selector === "string" ? 
        selector.indexOf(".") === 0 ?
        document.getElementsByClassName( selector.substring( 1 ) )[0] || null :
        selector.indexOf("#") === 0 ?
        document.getElementById( selector.substring( 1 ) ) :
        document.getElementsByTagName( selector )[0] || null :
        selector;
}
alert( x("html") );
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine

Последний раз редактировалось devote, 31.07.2012 в 02:31.
Ответить с цитированием
  #3 (permalink)  
Старый 31.07.2012, 12:17
Новичок на форуме
Отправить личное сообщение для potato Посмотреть профиль Найти все сообщения от potato
 
Регистрация: 07.07.2012
Сообщений: 9

Привет.
Твой скрипт на много проще и меньше. И без всяких шаблонов.
Я только не понял вот эту кусочек кода :
document.getElementsByClassName( selector.substring( 1 ) )[0] || null

Понял, что точка вырезается, а что за [0] или null ?

Спасибо.
Ответить с цитированием
  #4 (permalink)  
Старый 31.07.2012, 12:23
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Сообщение от potato
[0] или null
взять нулевой элемент из списка, а если элементов не найдено, вернуть null
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #5 (permalink)  
Старый 31.07.2012, 12:27
Новичок на форуме
Отправить личное сообщение для potato Посмотреть профиль Найти все сообщения от potato
 
Регистрация: 07.07.2012
Сообщений: 9

Понятно.
Ответить с цитированием
  #6 (permalink)  
Старый 31.07.2012, 16:47
Новичок на форуме
Отправить личное сообщение для potato Посмотреть профиль Найти все сообщения от potato
 
Регистрация: 07.07.2012
Сообщений: 9

Сообщение от devote Посмотреть сообщение
взять нулевой элемент из списка, а если элементов не найдено, вернуть null
По моему лучше эти [0] || null вообще убрать.
Я тут протестировал твой скрипт не много и столкнулся с проблемой.
Допустим, у меня етсь вот такой хтмл:

<ul>
	<li class="link">Home</li>
	<li class="link">blabla</li>
	<li class="link">***</li>
</ul>


Сейчас я хочу выбрать только 2-ой <li class="link">blabla</li>.
Если, я делая так:
var menuItem2 = x(".link");
menuItem2[1].style.color = "peru";

Тогда генерируется ошибка. А, если убрать [0] || null тогда все работает.
Ответить с цитированием
  #7 (permalink)  
Старый 01.08.2012, 00:55
Аватар для Aetae
Любитель
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 5,623

Ну какбэ естественно. Не видите разве сходства? [0] и [1]?
За вас уже берётся нулевой элемент. Всё зависит от того что именно вам было нужно.
__________________
29375, 35
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Использование одной функции для элементов с разными ID Ferroks Общие вопросы Javascript 10 11.09.2009 07:51
Модуль для работы с модулями JSprog Ваши сайты и скрипты 29 02.09.2009 12:31
Переодическое обновление значений для графика, функция для обновления значений yupa87 Общие вопросы Javascript 0 09.07.2009 13:48
Функция onclick для созданных потомков Groonel Общие вопросы Javascript 6 24.04.2009 17:35