Javascript-форум - Функция для выборки html элементов

Javascript-форум (https://javascript.ru/forum/)

- Ваши сайты и скрипты (https://javascript.ru/forum/project/)

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

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

Цитата:

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

Привет.
Твой скрипт на много проще и меньше. И без всяких шаблонов.:)
Я только не понял вот эту кусочек кода :

document.getElementsByClassName( selector.substring( 1 ) )[0] || null

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

Спасибо.

Цитата:

Сообщение от potato

[0] или null

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

Понятно. :dance:

Цитата:

Сообщение от 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 тогда все работает.

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