Develop Reference

select html element by its full html tag - JS

I am looking for a way to be able to select an HTML element by its tag, like:
document.querySelector("<div id='myDiv'\>hello world</div\>")
//instead of: document.querySelector("#myDiv")
However, this code returns an error. The code should return the HTML element.
Does anybody know a way to achieve this? (vanilla JS preferred)

It seems a bit odd that you wouldn't want to select element via ID. But regardless one way of selecting the element in your example would be to look for its innerHTML.
e.g
var div = document.getElementsByTagName('div');
for (var i=0;i<div.length;i++){
console.log(div[i].innerHTML)
if(div [i].innerHTML == 'hello world'){
var element = div[i].parentElement
console.log(element)
break;
}
}

You could use outerHTML to search for it, however this only works if the element has a parent element.
var els = Array.from(document.querySelector('body *')); //this selects all elements in the body
var el;
for(var i = 0; i < els.length; i++) {
if(els.outerHTML === "<div id='myDiv'\>hello world</div\>") {
el = els[i];
}
}
//Use the el variable for your element

Jquery click event capture ID [duplicate]

Is there another way to get an DOM element's ID?
element.getAttribute('id')

Yes you can just use the .id property of the dom element, for example:
myDOMElement.id
Or, something like this:
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
alert(inputs[i].id);
}

Yes you can simply say:
function getID(oObject)
{
var id = oObject.id;
alert("This object's ID attribute is set to \"" + id + "\".");
}
Check this out:
ID Attribute | id Property

This would work too:
document.getElementsByTagName('p')[0].id
(If element where the 1st paragraph in your document)

Super Easy Way is
$('.CheckBxMSG').each(function () {
var ChkBxMsgId;
ChkBxMsgId = $(this).attr('id');
alert(ChkBxMsgId);
});
Tell me if this helps

In events handler you can get id as follows
function show(btn) {
console.log('Button id:',btn.id);
}
<button id="myButtonId" onclick="show(this)">Click me</button>

This gets and alerts the id of the element with the id "ele".
var id = document.getElementById("ele").id;
alert("ID: " + id);

You need to check if is a string to avoid getting a child element
var getIdFromDomObj = function(domObj){
var id = domObj.id;
return typeof id === 'string' ? id : false;
};

Yes. You can get an element by its ID by calling document.getElementById. It will return an element node if found, and null otherwise:
var x = document.getElementById("elementid"); // Get the element with id="elementid"
x.style.color = "green"; // Change the color of the element

Hide Anchor tag based on href URL

I was wondering if there is a possibility to HIDE anchor tags that refer to a particular URL.
I know there is possible to hide based on id like this with JavaScript:
document.getElementById('someID').style.display = 'none';
Check
But let's say I want to hide all anchor tags based on URL example: www.example.com
Check
Check
I want to hide the first anchor tag, not the second that refers to example2.com
Is this possible with pure JavaScript and not jQuery?

You can use document.querySelector to select bu attribute value like this.I have used no jquery the only javascript is used.
document.querySelector("[href='www.example.com']").style.display = 'none';
Check
Check

Simply loop through all anchor elements and then check their href:
var anchors = document.getElementsByTagName('a');
for (var i = 0; i < anchors.length; i++) {
if (anchors[i].href == 'https://example.com/') {
anchors[i].style.display = 'none';
}
}
Check
Check

You can use javascript to do the job. Use querySelector to get all the elements with same id. Then loop the ids and compare the href link value.
<script>
var elements = document.querySelectorAll("[id='someID']");
for(var i = 0; i < elements.length; i++) {
if (elements[i].getAttribute("href") === "www.example.com") {
elements[i].style.display='none';
}
}
</script>
Working fiddle link

You can make condition
var url = document.getElementsByTagName('a');
if (url.href = "www.example.com")
{
url.style.display = none;
}
It is not exact code. i provided you example .kindly try it and let me know. It is for single . if you have many tags then loop all those

Different ways to click a hyper link programmatically?

What are some other ways to programmatically click a text link on a page? The link does not have a ID and will not have one.
example link will look like this:
<div unselectable="on" class="x-grid-cell-inner " style="text-align:left;">
Click Here
</div>
Here's one way I can do it but want to know more ways to click it.
var els = document.getElementsByTagName('a');
for (var i = 0, l = els.length; i < l; i++)
{
var el = els[i];
if (el.text === 'Click Here')
{
el.click()
}
}

It can't have an id? That would be the best route IMO. Second best approaches:
Assign a class, and look up by class
or
Assign an id or class to the parent object, and look up the first "a" child

Using Javascript, what is the method to get an element, based on the text between the opening and closing tags?

I'm a beginner, and couldn't find the answer after searching.
In my example, I'm looking for an
some text here
I'd want to find this particular element, so I can do stuff with it.
Edit: The only thing I know that's unique about the element for sure, is the text "some text here", that's why I want to find it based on that.

Put id on the element:
<a href="bla" onclick="dah" id='myEl'>some text here</a>
From javascript:
var myEl = document.getElementById('myEl') // gives the element

You can also use psuedo selector :contains, with the jQuery library.
Example 2
$('div:contains("test")').css('background-color', 'red');​
http://jsfiddle.net/9z5du/
Example 2
<script>
$("div:contains('John')").css("text-decoration", "underline");
</script>

If you know that the element is a link, you can first call getElementsByTagName [docs] to narrow down your search:
var elements = document.getElementsByTagName('a');
Then you have to iterate over the elements and test which one contains the next you are looking for:
var element = null;
for(var i = 0, l = elements.length; i < l; i++) {
if(elements[i].innerHTML === 'some text here') {
// found the element
element = elements[i];
break;
}
}
if(element) {
// found the element, lets do something awesome with it
}
There are multiple ways to get the content of an element, using Node#innerText (IE) or Node#textContent (W3C) is another option. You might have to trim the text first before you compare it.
If the HTML is as shown in your post,
if(elements[i].firstChild || elements[i].firstChild.nodeValue)
is even more elegant.
The MDN documentation about the DOM might be helpful.
If you can modify the HTML then adding an ID and using getElementById would be the better option.

Try this
function getit()
{
var elems = document.getElementsByTagName('a');
for(var i=0; i<elems.length; i++)
{
var text = elems[i].childNodes[0] != null ? elems[i].childNodes[0].nodeValue : '';
if(text == "some text here")
doSomethingWith(elems[i]);
}
}