Znając DOM Traversal i napisawszy własny querySelector oraz querySelectorAll, piszemy funkcje byId oraz byClassname.
Oto querySelector z poprzedniej lekcji:
Document.prototype.myQuerySelector = function(selector) {
var result = null;
function traverse(node) {
if(node == null)
return;
if(isMatch(node, selector)) {
result = node;
return;
}
for(var child of node.children)
traverse(child);
}
traverse(this.documentElement);
return result;
}Ten sam traversal, ta sama logika funkcji głównej, tylko inny warunek wyrwania z funkcji wewnętrznej i inny argument:
Document.prototype.myGetElementById = function(id) {
var result = null;
function traverse(node) {
if(node == null)
return;
if(node.id === id) {
result = node;
return;
}
for(var child of node.children)
traverse(child);
}
traverse(this.documentElement);
return result;
}Teraz poprzedni querySelectorAll:
Document.prototype.myQuerySelectorAll = function(selector) {
var result = [];
function traverse(node) {
if(node == null)
return;
if(isMatch(node, selector))
result.push(node);
for(var child of node.children)
traverse(child);
}
traverse(this.documentElement);
return result;
}Aplikujemy te samą logikę, tylko sprawdzamy czy dany element posiada klasę zamiast match z selektorem:
Document.prototype.myGetElementsByClassname = function(classname) {
var result = [];
function traverse(node) {
if(node == null)
return;
if(node.classList.contains(classname))
result.push(node);
for(var child of node.children)
traverse(child);
}
traverse(this.documentElement);
return result;
}