Javascript-форум (https://javascript.ru/forum/)
-   Ваши сайты и скрипты (https://javascript.ru/forum/project/)
-   -   Функция для выборки html элементов (https://javascript.ru/forum/project/30305-funkciya-dlya-vyborki-html-ehlementov.html)

potato 31.07.2012 02:02

Функция для выборки 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>

devote 31.07.2012 03:22

Цитата:

Сообщение от 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") );

potato 31.07.2012 13:17

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

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

Спасибо.

devote 31.07.2012 13:23

Цитата:

Сообщение от potato
[0] или null

взять нулевой элемент из списка, а если элементов не найдено, вернуть null

potato 31.07.2012 13:27

Понятно. :dance:

potato 31.07.2012 17:47

Цитата:

Сообщение от devote (Сообщение 193209)
взять нулевой элемент из списка, а если элементов не найдено, вернуть 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 тогда все работает.

Aetae 01.08.2012 01:55

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


Часовой пояс GMT +3, время: 14:45.