Question

Prototype selectors $, $$…etc return extended object Element. But some times I need simple, not extended, HTMLElement object. How can I get it using Prototype selectors?

Answer 1

You can’t. Prototype.js modifies Element‘s prototype, whose methods are inherit by HTMLElement.

$ is equivalent to document.getElementById, and returns a plain element, or null.
$$ is similar to document.querySelectorAll, but returns an Array instead of a NodeList.

The easy way to proof it, run the following code on a page where Prototype.js is used:

console.log(Object.getOwnPropertyNames(Element));

Instead of just prototype, this prints a whole list, similar to:

cache,Methods,_attributeTranslations,_returnOffset,_getContentFromAnonymousElement,_insertionTranslations,visible,toggle,hide,show,remove,update,replace,insert,wrap,inspect,recursivelyCollect,ancestors,descendants,firstDescendant,immediateDescendants,previousSiblings,nextSiblings,siblings,match,up,down,previous,next,getElementsBySelector,getElementsByClassName,readAttribute,writeAttribute,getHeight,getWidth,classNames,hasClassName,addClassName,removeClassName,toggleClassName,observe,stopObserving,cleanWhitespace,empty,descendantOf,scrollTo,getStyle,getOpacity,setStyle,setOpacity,getDimensions,makePositioned,undoPositioned,makeClipping,undoClipping,cumulativeOffset,positionedOffset,absolutize,relativize,cumulativeScrollOffset,getOffsetParent,viewportOffset,clonePosition,childElements,Simulated,extend,hasAttribute,addMethods,ClassNames,childOf,prototype,length,name,arguments,caller