Develop Reference

Very own element attributes (browser support)

I've been working on a small project, which changes site content on load.
I used data-*attributes, and after job has been done (script replaces what has to be replaced) they would get removed.
However, I realized my very own attributes worked also. So instead of
data-myAttribute="value"
I could simply used
myAttribute="value"
What is browser support on those attributes?
(My very own attributes worked on Chrome v57)

You can pretty much add any attribute you want to any HTML tag. However, this is not supported by the HTML standard. It does work in pretty much any browser, but it might not be supported in the future. In addition, HTML validators will reject your HTML as invalid if you use non-standard attributes.
The whole reason we have data-* attributes is because those are standardized and are guaranteed to be supported and accepted by validators, and also are guaranteed to not clash with any future attributes that might get added to HTML.
Do not use custom attributes without the data-* prefix, as that might make your HTML break without any warning as the HTML standard evolves.
As for the question itself: As this is non-standard, browser support is not documented.

Using jQuery data() vs native javascript getAttribute vs input hidden

I need to access general information from my site using javascript. So far, I have the following options:
Using an html element :<input type="hidden" value="MyValue"/>
Using a custom attribute in an existing html element : <div id="HtmlElement" myattr="MyValue"></div> and then access it using document.getElementById("HtmlElement").getAttribute("myattr")
Using a data attribute in an existing html element: <div id="HtmlElement" data-myattr="MyValue"></div> and then access it using jQuery("#HtmlElement").data("myattr")
I was wondering what are the benefits of using either option.
I'm not a fan of using hidden inputs because I don't like the idea of having a loose html element that contains information. But since I need it to display general information, not information related to an existing html element in the page, it doesn't seem so bad.
On the other side, I'm not a fan of abusing the use of an external library but in my case I'm allready loading jQuery in my site, so it's not as if i was loading an entire library just for this.
And finally, even dough performance is allways an issue, in my case it's not gonna make much difference if it's the fastest solution.

I would go with data attributes because that's what they are for and modern browsers have a native api for accessing them, while still allowing non-modern browsers to access them as custom attributes.
given this html:
<div data-foo="bar"></div>
// modern browser:
foo = document.getElementByID("myelementid").dataset.foo;
// older browser:
foo = document.getElementByID("myelementid").getAttribute("data-foo");
// jQuery (all browsers)
foo = $("#myelementid").data("foo");
Note if your data attribute is data-foo-bar, the key in dataset and .data will be fooBar
As sdespont mentions, the data should be relevant to the element you are storing it on.
Update:
It's also important to note that you can also get the value of a data attribute using the .attr method, however there is a pretty important difference between the two. Getting a data attribute's value with .data will attempt to parse the value of the attribute into the correct javascript type, for example, if it can be converted to an int, it will be converted to an int. If it can be converted into an object or an array, it will be converted to an object or an array. If you instead used .attr(), you can be sure that you will always have a string.
Probably also worth mentioning that using .attr() should be prefered over .data() unless you specifically need the features given by .data() due to the fact that by using .data(), a data cache will be created for that element and it's data, which isn't needed unless you actually intend to use .data() multiple times or need the extra features provided by .data()

A substitute for doc.evaluate

Is there any shorter expression to get DOM nods via XPath, more concise from following command that need a lot of variables.
doc.evaluate(xpath, doc, nsResolver, XPathResult.ANY_TYPE, null);

As far as I know Firefox only supports the DOM Level 3 XPath API, part of which the evaluate function is. If you want something shorter then you need to roll your own (or find a library which does it for you) or you need to use a different browser, for instance with Opera you can do e.g. node.selectSingleNode(path [,nsResolver]) to select a single node, with node.selectNodes(path [, nsResolver]) you can select a DOM NodeList of nodes. Within MSXML's XML DOM implementation you use with IE you also have selectSingleNode and selectNodes function although namespace handing there is different from the Opera implementation as with MSXML you need to use document.setProperty('SelectionNamespaces', 'xmlns:pf1="http://example.com/ns1" xmlns:pf2="http://example.com/ns2"').

HTML data attribute IE6 support

Does HTML's data attribute work in IE6?
I'm using the attribute like this <img id="charm_1" data-code='sdfsdfsdfsdf' data-price='100' class='addition_image' src="img/misc/donut.png" width="55" height="55" alt="Donut">.
As you can see there are 2 data attributes (price and code). I can get this with jQuery using the .data() method and it all seems to work in IE7/8/9. Does this work in IE6? I don't have a copy of IE6 to test this.

IE6 -- and indeed all other browsers on the market -- have always been perfectly happy for you to define your own custom attributes on an element.
The use of data- as a prefix was formalised in the HTML5 standard, but browsers have always supported it, and don't even really require the data- prefix.
The data- prefix is recommended because it is now part of the standard, so there's a chance that a future browser may be more picky about it, and also because of the new dataset property that was added to HTML5 DOM specification at the same time to support it.
Obviously you can't use the dataset property, as very few browsers support it (not even newer ones, let alone older ones), but you can of course always use the good old getAttribute() method instead (which is what jQuery does).
To find out about browser support for new properties, I recommend the CanIUse.com site. For example, here is their page about data- attributes: http://caniuse.com/#search=dataset. They have full browser support tables for a wide range of features.
Hope that helps.

You can use IETester in order to test your websites on the different versions of IE and yes it those work on IE6 , IE has supported getAttribute() from IE4 which is what jQuery uses internally for data().

To use or not to use jQuery?

I have an <img id="mypic"> that i need to change with an interval its src.
Should I use jQuery or not?
Should I do:
document.getElementById('mypic').src='src2';
or
jQuery('#mypic').attr('src','src2');

It...doesn't really matter. I'd say use jQuery if you are using it in other places in your code, otherwise..it is up to you. However, if you are doing this in an interval, it would be slightly (but not noticeably) faster to use natural JS.

Use JQuery if the benefit of having convenient selectors and AJAX support is worth the 29 KB it'll add to your page download time. For most of my uses, it is worth is.
Also, for your JQuery code snippet, the $ character is the JQuery selector. So, you can do this:
$('#mypic').attr('src','src2');
In my opinion, JQuery is very concise, and you can get a lot done once you get used to it.

You should not use jQuery if you don't know how to do it in plain Javascript.
Looks like you know, feel free to use it :)