We Keep Coding

Vanilla JS: How to target an input element by the input-field's name ("name" in DOM tree)?

How to target an input element by the input-field's name ("name" in DOM tree), in vanilla JavaScript (ES6 or later)?
I ought to do it with document.querySelector(''). I didn't find a way. I only found the older getElementsByTagName which per my understanding deals with the HTML element's name and not with a name attribute of (usually) an input element itself.
Is it possible in ES6 without jQuery?

With querySelector you can use any CSS selector. In your case you need to do an Attribute Selector.
const one = document.querySelector("input[name=one]");
const two = document.querySelector("input[name=two]");
console.log(one);
console.log(two);
<input name="one"/>
<input name="two"/>

Yes, you can do it with querySelector:
console.log(
document.querySelector('input[name="inputname"]').value
);
<input name="inputname" value="foo">
No ES6 support required.
You can do the same sort of thing when you want to select an element with any other attribute, not just names.

Is there a way to skip a specific CSS selector in HTML when using querySelector in JavaScript?

I need to skip this querySelector('input') because in certain instances the input will come second instead of first. Is there a way to label an element in HTML as 'skip this'?

You're free to utilize the full power of CSS syntax there. In your example if you only want to get input if it's the first parent's element then query like this:
querySelector('input:first-child');
Or if you want to get precise use :nth-child selector, or even better, :nth-of-type:
querySelector('input:nth-of-type(1)');
But the best solution would be to mark your input with a class or id and use it instead:
querySelector('.myInput');
You can of course combine it with negation selector:
querySelector('.myInput:not(':nth-child(2)')');

querySelector returns the first Element that matches the selector provided in the method. And why wouldn't it? That's what it's supposed to do.
A.E. the below returns the first input tag it can find on the document from the top-down.
document.querySelector("input");
It will always return the first input tag it can find. You have two options to "skip" the node. You can either write a function to recursively check if the input should be skipped( kind of superfluous and bad looking ) or you can simply be more specific with your selector.
Either way you need to give the input element you want to skip some sort of recognizable trait. That can be a name property or a dataset property or a class or an id - anything that you can programatically check for.
//functional example
function ignoreSkippable() {
let ele, eles = Array.from(document.querySelectorAll("input"));
eles.some(elem => !elem.matches('.skippable') ? ele = elem : false);
return ele;
}
console.log( ignoreSkippable() );
// <input value="second input"></input>
//specific selector example
let ele = document.querySelector("input:not(.skippable)");
console.log(ele); // <input value="second input"></input>
<input class="skippable" />
<input value="second input" />

Set new id using name to input javascript

I have input type text
<input type="text" name="processName">
I want to set new id to this input element using name of the input element
document.getElementsByTagName("processName")[0].setAttribute("id", "proceesOffsetId");
Which is not working

So getElementsByTagName refers to the element tag (for example: div tag, li tag, input tag, etc...). It doesn't fetch elements via the name attribute.
So in your case, to target that input element, you could do something like this:
document.getElementsByTagName("input")[0].setAttribute("id", "proceesOffsetId");
This will give the input element an id of proceesOffsetId.
Alternatively, to target the name attribute, you could use document.getElementsByName:
document.getElementsByName("processName")[0].setAttribute("id", "proceesOffsetId");
This will also give the input element an id of proceesOffsetId.

you should use getElementsByName
document.getElementsByName("processName")[0].id = "proceesOffsetId";

Instead of using getElementsByTagName, use getElementsByName which is appropriate as per your requiement.
HTML :
<input type="text" name="processName">
JS:
var x= document.getElementsByName("processName");
console.log(x);
x[0].setAttribute("id", "proceesOffsetId");
Here's the reference : https://www.w3schools.com/jsref/met_doc_getelementsbyname.asp

Select all the elements within an element having an attribute set to a specific value

I have the followings defined :
var excludedFiltersPanel = $("#excludedFiltersPanel");
var includedfiltersPanel = $("#includedfiltersPanel");
where *Panel is just a div.
in excludedFiltersPanel there are some div's with attribute data-iscorefilter="true" e.g. :
<div id="filterPanel-LastName" class="filterPanel" data-iscorefilter="true">
<Some Stuff here!>
</div>
I am trying to get them and move them to includedfiltersPanel:
It seems neither of these is a correct syntax:
excludedFiltersPanel.('[data-iscorefilter="true"]')
excludedFiltersPanel.$('[data-iscorefilter="true"]')
1.What is the correct syntax?
2.How do I append them to includedfiltersPanel? (I know how to append a single item, but not sure what is the common good practice here, e.g. using for loop or some JQuery magic)

Since excludedFiltersPanel there are some div's with attribute data-iscorefilter="true"
Use .find()
Description: Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
It would look like :
excludedFiltersPanel.find('[data-iscorefilter="true"]')

get id value by index using name jquery

html
<input id="1" name="myText" type="text" value="20"/>
<input id="2" name="myText" type="text" value="30"/>
<input id="3" name="myText" type="text" value="40"/>
How can I get id value by index using name?
The following code snippet is not working
var getVal = $('[name="myText"]').index(1);

jQuery holds the DOM elements in the set like an array so you can use the indexes operator([]) to get the element, or get the jQuery object that wraps the desired element with :eq(n) `.eq(n)`
$('input[name="myText"]:eq(1)').attr('id')
You should mention what to you consider to be index(1) the first or the second:
$('input[name="myText"]:eq(0)').attr('id') // First
$('input[name="myText"]:eq(1)').attr('id') // Second
Or:
$('input[name="myText"]')[0].id // First

If you want the first value, you can filter and use the attr method to get the value of the id attribute.
var getVal = $('[name="myText"]:first').attr('id'); // first id
If you want some other element, you can use eq and choose the zero-based element in the collection.
var getVal = $('[name="myText"]:eq(1)').attr('id'); // second id

My answer refers to accessing elements in the jQuery result object by index. You can use selectors such as :eq indicated in other answers.
However, you can use .get(1) instead of your index.
var id = $('[name="myText"]').get(1).id;
Is equivalent to
var id = $('[name="myText"]:eq(1)').attr('id');
Example: http://jsfiddle.net/HackedByChinese/UmKw6/1/
The second method is the preferred route, since it means you never leave the jQuery result object and thus can chain other jQuery calls in one statement.
var id = $('[name="myText"]:eq(1)').css('color', 'red').attr('id'); // example of chaining jQuery methods. sets the text color to red and then returns the id.