Develop Reference

Best practice in finding a DOM element

I want to toggle(hide/show) an element when a button is being pressed. I have two ways as to implement this:
Find the element according to its class name, e.g $('.my-content')
Find the element according to its relevant DOM position towards the button, e.g. $('#my-button').parent().next().next().next()
However, none of the above seems to me very reliable since in case someone changes the HTML code, the above approaches should not work. Is there something more reliable I am missing?

If it's a specific element, supply it with an Id value and use that
to find it.
If it's a TYPE of element, use a class name.
Other than that, there's no real conventions. Just try and make sure that somebody reading your code understands what is going on.

A very good practice is to decouple HTML, CSS and JS.
When binding javascript to DOM elements you should use javascript selectors.
Basically classes with some custom prefix (like js-) which will be used only for javascript purposes (not css style).
So whenever the DOM tree structure or the CSS class names are changed, you can still have your working JS selector
HTML
<div class="my-content js-toggle-element"></div>
JS
$('.js-toggle-element')
CSS
.my-content{ ... }
Plus, using Javascript Selectors:
makes HTML highly readable: you can easily find out what will happen to that element with that js class
allows you to easily apply/disapply that behaviour also to other elements in the future, simply by adding/removing that class in your HTML and without affecting CSS at all
<div class="my-content js-toggle-element"></div>
...
<div class="another-content-to-toggle js-toggle-element"></div>

Using jQuery will be much easiest way. Like this -
$( ".target" ).toggle();
The matched elements will be revealed or hidden immediately, with no animation, by changing the CSS display property. If the element is initially displayed, it will be hidden; if hidden, it will be shown.
Reference - jQuery Toggle

If the class or the position of the element in DOM is changing then you can try
selecting it with the inner text
$("button:contains('buttontextgoeshere')")

Changing type of an input

I want to change the type of an input on click of a button but it doesn't work. I tried this:
$('.addPhoto').click(function(){
$(this).siblings('.auto_image').prop("type", "file");
});
It doesn't do anything at all. I searched on google and came across this:
change type of input field with jQuery
It says it is possible to do it with straight DOM, but how would I select the class of a sibling with DOM?

You can replace the element all together but I don't think you can just change the type attribute see my example.
$('.addPhoto').on("click",function(){
$(this).off("click").replaceWith("<input type='file' class='addPhoto'/>");
});
or
$('.addPhoto').one("click",function(){
$(this).replaceWith("<input type='file' class='addPhoto'/>");
});
http://jsfiddle.net/ECzP4/
here is the jQuery documentation for replaceWith() http://api.jquery.com/replaceWith/

To get the dom object just take the first item from your jQuery collection:
var domObject = $(this).siblings('.auto_image')[0]
Although it doesn't seem to be able to change from text to file - http://jsfiddle.net/7HTgA/
So what I would recommend is having two inputs, and show/hide them as required rather than trying to change the type of a single input.

Adds all its siblings with the auto_image class with the type - file.
$(this).siblings('.auto_image').attr('type','file')

How to set the ID of a Dojo widget's inner input element?

Dojo converts several "ordinary" input elements into a more complex node structure. For example, a Dojo dijit/form/Select results in a widget composed of a table instead of a <select> element. dojox.form.Uploader converts into something where the id is mapped to a span and not to a <input id="myId" type="file" element. etc etc.
For accessibility, I need to map a label to an input widget, and running my website through Wave generates a lot of red flags because label for values do not match an input id.
What's the best way round this issue?

You can set an id property on most widgets, which should be put on the inner <input> node that you desire. Take a look at this fiddle for an example. If you open up your HTML inspector for the TextBox widget, you will see that the outer node has an id of "widget_[my id]" and a widgetid of the id you passed to the widget. Digging into the contents of that outer div, you will see that the actual <input> element indeed has the desired id that I passed in.
However, it seems that for more complex widgets that use a hidden <input> to store the value, you have to explicitly set the id of the valueNode property. You can see an example in this fiddle.
So you can create your widget like programmatically like this:
var select = new Select({
... widget properties
});
select.valueNode.id = "my_id"; // probably best to use dom-attr to set this.
If your widget is created declaratively, then you will need to get access to it via the registry, an attach point, or dijit#byId.

How to access elements from a certain form and certain type with jquery

so I have a page with multiple forms and I would like to be able to access input elements of type="datetime" within a particular form. I know I can do $('input[type="datetime"]') but that would give me all input tags on the page. I also cannot use the "form" attribute because not all browser use it (Sigh IE). Worse scenario for me is to do something like:
$(document.forms["..."].elements).each(function() {
if (this.type="datetime") {.....}
});
but I am sure this can be done in jQuery with one selector. Can someone tell me how do this with one selector?

Add id to your form and then select DOM inside of that form as below.
$('#form input[type="datetime"]')

Without seeing some HTML this is just a shot in the dark. But if you give your forms an id you can do:
$("#yourFormId input[type='datetime']");
If you do not have ids, but you know the number, then this might do it:
$("form:eq(4) input[type='datetime']");

There are multiple ways to do it
Solution 1.
use descendant selector
ex:
$('#yourform input[type="datetime"]') //or
$('.yourform input[type="datetime"]') //or
$('form:eq(3) input[type="datetime"]')
Solution 2:
Use context based look up
Ex:
$('input[type="datetime"]', yourform)

Textarea - how to highlight keystrings with javascript?

I am looking for a javascript that can help me to change the color of a text inside the textarea tag. For example, to have a variable in the javascript:
var a = '<div class="carleft"><p class="coto1">';
now, the javascript should make the text that is inside the variable, to be displayed as bold with red color in the textarea.

See this previous question/answer: jQuery wrap selected text in a textarea

Inner HTML of the textarea element you cannot change the styles/colors of the partial words or characters.
You should use or some other element to implement this.
You can consider the
contenteditable="true" attribute for this purpose.
By using this attribute you can dynamically edit any html element. Which was styled before.

A textarea does not support different styles or colors in the text. You can use contenteditable="true", but that will probably give the user more freedom than you want. I think a better option would be to use a library like CodeMirror or MDK-Editor.