Whats a good way to select elements by their name using wildcards?
The website has element names in the form of <a_1786439></a_1786439> which are likely auto-generated. This is doable by xpath, but is it doable using css selectors or jquery selectors which are faster?
This is clearly terrible-coding, but the website is not mine, and I'm writing a userscript for it.
This doesn't exist in CSS3, as the spec's section on type selectors only includes names and wildcards, but no combinations of them.
It's possible to create custom elements using the HTML DOM createElement method like this:
document.createElement('Funny_Element');
In the website code you are dealing with, they have created a custom element, or maybe extend the a element, but they didn't choose a significant name! a_1786439??? which is, I think, really bad.
Using CSS selectors or jQuery selectors depends essentially on what you want to do. Suppose you have to access children elements of a specific node, then jquery selectors would be more appropriate.
Hope it's useful!
Related
How would you mark an element to which a plugin has been applied? Suppose that I have this html:
Link
And in javascript, I would "apply a plugin"
$("#special-link").selectify();
Later I would like to know whether #special-link is already selectify-ied. I can think of these possibilities:
Add a class to the element. You can gather all elements with selectify simply by calling $(".selectified") and it is also easy to check whether an element has the plugin applied by calling $("elem").hasClass("selectified"). A drawback I can think of is that you're using CSS (=design) to store an info.
Set a data- value. It is a bit more difficult to find all elements with the selectify plugin applied, however it is "cleaner" solution in a way because you're not using CSS class to store an information
The plugin itself takes care of remembering the elements. This sounds like the best solution. However, you, as the creator of a plugin have to take care of keeping track of all the elements and putting them in a list. In case you have some sort "destroy" method, you would also have to remember to remove them from a list.
Which one do you think is the best solution? Can you think of any other advantages/disadvantages of the above mentioned methods?
jQuery plugins (the better ones) normally use classes only for styling additions and they store a code instance in the elements data (not data- attributes).
But, why not simply use an existing system for creating jQuery plugins, like the jQuery UI plugin Widget Factory
They do the heavy lifting for you :)
I don't know what it's called, but I know that there's a way to get elements based on their tags without getElementsByTagName. It returns the same thing, but it's shorter and I'm using tags a lot in my project. What I'm talking about is document.frames[x] and document.images[x], but with other elements, like document.b[x] or document.a[x]. Seeing as document.images isn't the same as the <img> tag, it seems like if there are more they'd be named differently as well. Would anyone happen to know what it's called when using this method and/or have a list of accepted tags? Thanks.
P.S. Please do not suggest using a library such as jQuery. This project is meant to be a learning experience, so I want to use regular JavaScript.
As mentioned elsewhere in the answers, this doesn't have anything to do with JavaScript really, these are DOM properties and methods accessible via the JavaScript language binding for the DOM.
With reference to addressing elements such as document.frames[x] (note that this is incorrect, it should be window.frames[x]) and document.images[x] - these are Document Object/HTML Collections and the W3C standard includes only images, applets, links, forms and anchors.
So unless I'm looking in completely the wrong place, from what I can tell from the DOM-1 and DOM-2 specs, there doesn't seem to any way of arbitrarily addressing elements by tag name the way that you remember doing.
Update
The MDC entry on HTMLCollection is more understandable; it reads
The following lists each item (and its specific properties) which return an HTMLCollection: Document (images, applets, links, forms, anchors); form (elements); map (areas); table (rows, tBodies); tableSection (rows); row (cells)
Other than other JavaScript libraries creating these shorthands, I am not aware of any that are built into the language. It would be trivial to map this to your own shorthand:
var $ = document.getElementsByTagName;
// you can then use it like so:
$('SPAN').// and so on
Other than this, there is no built-in array-like access to all of the tags in the document:
http://www.javascriptkit.com/jsref/document.shtml
Create your own reference,
document.tag = document.getElementsByTagName;
or a wrapper,
function tag(name) {
return document.getElementsByTagName(name);
}
The only APIs I know of that support querying by element name are,
DOM
getElementsByTagName
CSS Selectors
querySelectorAll
XPath
evaluate
E4X
(mozilla only, and doesn't work with the DOM yet)
Using Prototype and Script.aculo.us, I am trying to make all tags with an ID starting with "idea" Droppable but I can't remember how to get all tags starting with a specific string. Thank you in advance.
The previous answers are correct, use a class name instead.
However if you are forced to use IDs there is a way with a CSS selector, now supported by most JS frameworks:
$$('*[id^=idea]')
Give them a class and do $$('div.idea');
Don't do that. IDs are meant to be used to get a single element.
The proper way to do what you want is giving those elements a common class. Then you can use whatever method prototype has to retrieve all elements with that class name (in jQuery it would be $('.class')). By using classes you allow your JS framework to use highly optimized code to search for matching elements (might even be a native getElementsByClassName method) instead of iterating over basically every single element and doing a substring comparison.
Edit: In prototype you can use $$('.class') to get all matching elements.
As I've gotten deeper into using jQuery with various sites I've worked on, I've found that I can get lost on whether a class attribute value is appended to an element in the DOM in order to attach an actual CSS style, or to bind an event to it. As such, I've started leaning towards using the rel attribute on anchor tags to denote if something is going to be bound to an event, keeping the class attribute specifically for stylization. (I've not delved into this deep enough to determine if there are any drawbacks or fundamental flaws with this approach, however, and am open to comments & criticisms on it.)
It got me to thinking that others must have similar things they do to help keep their code organized, and I'm interested in learning about some new ideas that might be floating around out there.
Usually this is not much of an issue for me, even in medium sized projects.
I usually assign classes for styling, and I often end up using same selectors in JS code.
Semantically speaking, the rel attribute is not an appropriate way to store data. As it should point out the relation of a link to the target.
HTML5 makes things more flexible with data- custom attributes.
You use the class attribute when you have multiple HTML elements that have shared presentation or shared behavior.
So if you have several buttons for which you want to use the same event handler, then you give those buttons a class and then use JavaScript to select those elements (by class) in order to set the handler on them (you use a JavaScript library which has a selector engine). For example, in jQuery:
$(".addButton").click(function() {
// the event handler
});
Classes are used both for CSS styling and JavaScript manipulation.
Is there a way to create your own HTML element? I want to make a specially designed check box.
I imagine such a thing would be done in JavaScript. Something akin to document.createHTMLElement but the ability to design your own element (and tag).
No, there isn't.
The HTML elements are limited to what the browser will handle. That is to say, if you created a custom firefox plugin, and then had it handle your special tag, then you "could" do it, for varying interpretations of "doing it". A list of all elements for a particular version of HTML may be found here: http://www.w3.org/TR/html4/index/elements.html
Probably, however, you don't actually want to. If you want to "combine" several existing elements in such a way as they operate together, then you can do that very JavaScript. For example, if you'd like a checkbox to, when clicked, show a dropdown list somewhere, populated with various things, you may do that.
Perhaps you may like to elaborate on what you actually want to achieve, and we can help further.
Yes, you can create your own tags. You have to create a Schema and import it on your page, and write a JavaScript layer to convert your new tags into existing HTML tags.
An example is fbml (Facebook Markup Language), which includes a schema and a JavaScript layer that Facebook wrote. See this: Open Graph protocol.
Using it you can make a like button really easily:
<fb:like href="http://developers.facebook.com/" width="450" height="80"/>
The easiest way would be probably to write a plugin say in Jquery (or Dojo, MooTools, pick one).
In case of jQuery you can find some plugins here http://plugins.jquery.com/ and use them as a sample.
You need to write own doctype or/and use own namespace to do this.
http://msdn.microsoft.com/en-us/magazine/cc301515.aspx
No, there is not. Moreover it is not allowed in HTML5.
Take a look at Ample SDK JavaScript GUI library that enables any custom elements or event namespaces client-side (this way XUL for example was implemented there) without interferring with the rules of HTML5.
Take a look into for example how XUL scale element implemented: http://github.com/clientside/amplesdk/blob/master/ample/languages/xul/elements/scale.js and its default stylesheet: http://github.com/clientside/amplesdk/blob/master/ample/languages/xul/themes/default/input.css
It's a valid question, but I think the name of the game from the UI side is progressive markup. Build out valid w3 compliant tags and then style them appropriately with javascript (in my case Jquery or Dojo) and CSS. A well-written block of CSS can be reused over and over (my favorite case is Jquery UI with themeroller) and style nearly any element on the page with just a one or two-word addition to the class declaration.
Here's some good Jquery/Javascript/CSS solutions that are relatively simple:
http://www.filamentgroup.com/examples/customInput/
http://aaronweyenberg.com/90/pretty-checkboxes-with-jquery
http://www.protofunc.com/scripts/jquery/checkbox-radiobutton/
Here's the spec for the upcoming (and promising) JqueryUI update for form elements:http://wiki.jqueryui.com/Checkbox
If you needed to validate input, this is an easy way to get inline validation with a single class or id tag: http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/
Ok, so my solution isn't a 10 character, one line solution. However, Jquery Code aside, each individual tag wouldn't be much more than:
<input type="checkbox" id="theid">
So, while there would be a medium chunk of Jquery code, the individual elements would be very small, which is important if you're repeating it 250 times (programmatically) as my last project required. It's easy to code, degrades well, validates well, and because progressive markup would be on the user's end, have virtually no cost on the server end.
My current project is in Symfony--not my choice--which uses complex, bulky server-side tags to render form elements, validate, do javascript onclick, style, etc. This seems like what you were asking for at first....and let me tell you, it's CLUNKY. One tag to call a link can be 10 lines of code long! After being forced to do it, I'm not a fan.
Hm. The first thought is that you could create your own element and do a transformation with XSLT to the valid HTML then.
With the emergence of the emerging W3 Web Components standard, specifically the Custom Elements spec, you can now create your own custom HTML elements and register them with the parser with the document.register() DOM method.
X-Tag is a helpful sugar library, developed by Mozilla, that makes it even easier to work with Web Components, have a look: X-Tags.org