Develop Reference

the document.querySelector() can selects the attributes also?

I recently saw a code voucher that surprised me a bit and I would really like to understand. Can the document.querySelector() take a parameter, an attribute to make selections :
const tabs = document.querySelectorAll('[data-tab-value]')
<span data-tab-value="#tab_1">Tab-1</span>
I would also like to know why the attribute name is enclosed in brackets.

document.querySelector is just like CSS selectors
It can even select elements with attributes like:
document.querySelector("input[name]") // <input name>; input which has attribute name
document.querySelector("input[type=number]") // <input type='number'>; input whose attribute type's value is number

How to find and add the function to id?

I want to add a function to the attribute onChange of the element with id="custom-taxonomy". I don't want to edit the file.
I want to have a javascript solution.
My idea is to find the element by the id and then add the function.
How can i achiev this idea?
The code:
<div id ="custom-taxonomy">PRODUCT PRICES</div>
Expected result:
<div id ="custom-taxonomy" name="custom-product" onchange="return chothuephuongxa();>PRODUCT PRICES</div>

you can do that using setAttribute() and document.getElementById
let elm = document.getElementById('custom-taxonomy')
elm.setAttribute('name',"custom-product")
elm.setAttribute("onclick","return chothuephuongxa();")
console.log(elm.outerHTML)
<div id ="custom-taxonomy">PRODUCT PRICES</div>
Note:
You can't use name attribute of <div> but using elm.name = ... because name property in not available on <div> elements.
Similarly elm.onclick = "return chothuephuongxa();" is not correct because this will set event to string instead of function

You can use setAttribute to add attributes to elements:
document.getElementById('custom-taxonomy').setAttribute('name', 'custom-product');
the same can be done for your event.

Remove value attribute from input tag

I have one input field having no value field ( that will be added later using jQuery )
<input type=hidden>
Once I execute some function to add value to the input field I get
<input type=hidden value="123">
I want remove that value field from input field later. How can I do that?
Presently I am using the following jQuery function:
$('input').val('');
and using that I get
<input type=hidden value>
But I want
<input type=hidden>
How Can I achive that?
Thanks...

jQuery's removeAttr removes attributes.
Try: $("input").removeAttr( "value" );
Edit 2018-09-11:
Since jQuery isn't necessary to do this, and the title doesn't specifically ask about jQuery (although the tags do), here's the solution in plain JavaScript:
document
.querySelectorAll( "input" )
.forEach( ( input ) => {
input.value = "";
input.removeAttribute( "value" );
} );
However, as #cookie-monster originally said: you probably shouldn't be removing DOM attributes. Consider rethinking your application.

You are looking for somehing like:
$('input').removeAttr('value');

use removeAttr()
$('input').removeAttr('value');

You can use:
$('input').removeAttr('value');

You can use the .removeAttr() method. This method uses the JavaScript removeAttribute() function, but it has the advantage of being able to be called directly on a jQuery object and it accounts for different attribute naming across browsers.
$('input').removeAttr('value');

To remove 'value' attribute from all inputs you can use
$('input').removeAttr('value');
You can also use input ID.
Example:
$('#Input_Id').removeAttr('value');
Or class for remove attribue
Example:
$('.Input_Class_Name').removeAttr('value');

How to get elements of similar name? jQuery

<input name="Indian_Karnataka_Bangalore" value="Bangalore" />
<input name="Indian_Andhra_Hyderabad" value="Hyderabad" />
<input name="Indian_Kerala_Trivandrum" value="Trivandrum" />
<input name="Indian_Maharashtra_Mumbai" value="Mumbai" />
At a given time, only one input element will be present in the DOM. How will I know the name of the specific input element name? I don't want to depend on values as it might change.
Using jQuery.
The INDIAN term will be static in every input element.
Actually i am trying to validate the input elements. DOM will have all the elements but at a given time only one element will be active and that element should have some value in it.

var $inputs = $('input[name*="Indian"]'),
inputsName = $inputs.attr('name');
You can use the same selectors as you would CSS.
Chris Coyier wrote a piece on attribute selectors here

var indianInputs = $("input[name^='Indian']");
//Matches all input elements whose name attrributes 'begin' with 'Indian'
This differs than the one posted by #ahren in that his selector will match all input elements whose name attribute contain the string 'Indian'.
indianInputs.attr("name");
Would return the first matched element's name attribute's value, which, for your markup will be Indian_Karnataka_Bangalore
To find the names of all indianInputs, you must iterate over all matched elements
var indianInputNames = [];
indianInputs.each(function() {
indianInputNames.push($(this).attr("name"));
});

$('input[name="element_name"]')
You have a lot of ways to select by the name of the attribute check http://api.jquery.com/category/selectors/attribute-selectors/

Try
var name = $('input[name^="Indian_"]').attr('name')

Have you tried the filter function? Something like this:
$('input:visible')
.filter(function() {
return $(this).attr("name").match(/^Indian/);
});
This will return an array of input elements whose name starts with "Indian".
There is a good example here: https://stackoverflow.com/a/193787/1237117.

Referencing the HTML select control currently being used

I have a javascript program to filter a list of things in a HTML select control by typing a regular expression into an input (text) box. I can do the following to correctly filter a specific select control:
$(function() {
$('input[data-filterable]').keyup(
function() {
filter = new filterlist(document.myform.myselect);
filter.set(this.value);
});
});
but I have used a custom attribute (something one can now do in HTML5) called data-filterable. The attribute will store the name of the select control that is to be filtered so that JS can use the name of the control to filter the list. This would be a good idea because I will have a general function to filter any select box rather than a specific one.
Any ideas how I do this? I need something like this in the HTML:
<input data-filterable='{"to":"#selectbox1"}' size="30" type="text" />
but I'm not sure exactly what I'm doing here and what to do with the JS.
Thanks guys :).

Try this:
<input data-filterable="#selectbox1" size="30" type="text" />
$(function() {
$('input[data-filterable]').keyup(
function() {
filter = new filterlist($($(this).data('filterable'))[0]);
filter.set(this.value);
});
});
To break down the expression $($(this).data('filterable'))[0]:
$(this) wraps this in a jQuery wrapper. In our context, since it's a jQuery keyup event handler, this references the <input> DOM node.
$(this).data('filterable') retrieves the contents of the data-filterable attribute as a string. In our case, it's #selectbox1.
After that this string gets passed in to jQuery as a selector: $($(this).data('filterable')).
Finally, we take the 0'th element of the returned array which should be the DOM element of the target selectbox. Of course, if there isn't a selectbox which fits the selector this will fail rather miserably. If you suspect that this is a real scenario, check the .length of the returned array first.