Изучаю 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>
