How to get the value of an attribute? - javascript

Trying to get the value of a specific tag in HTML, but I can't find a proper way to do it.
Let's say I have the following HTML code:
<body id="en" class="that-great-class " number_id="1534" support="clp" source="desktop">
How can I get the value from number_id, support and source ?
Already tried this but doesn't work.
document.getElementsByTagName("number_id");
Thanks.

So your js is only slightly off, you are using getElementsByTagName which will get HTML elements by their tag e.g. body tag, header tag, div tag and so on.
You are wanting to get the attribute of the body tag so you first would need to get the body tag.
const bodyTag = document.getElementsByTagName("body")[0];
This gets all elements with the tag name of body and puts them in the array, but there should only be 1 body tag so you get the first.
You then want to get the attribute of 'number_id', to do this, you would do
const numberId = bodyTag.getAttribute("number_id");

document.querySelectorAll('[number_id="1534"]')
The related docs are Attribute_selectors and querySelectorAll

Your method name is incorrect it should be plural if you use tagName getElementsByTagName
But didn't actually correct with what you are trying to use
Getting element by tag means like HTML tags Ex - li, h1 body not
their attributes
Use querySelector instead.
const el = document.querySelector("[number_id='1534']")
console.log(el)
<body id="en" class="that-great-class " number_id="1534" support="clp" source="desktop">

Have you tried this?
var id = document.getElementById("en").getAttribute("number_id");

Related

How to read in an id element that has an href

I am trying to remove the content referenced by the following id:
<...id href="https://xyz'...>
My code:
var right = document.getElementById('https://xyz');
var parent = right.parentNode;
parent.removeChild(right);
The problem is when I reference the name of the id, it comes back as null. I tried document.getElementById('https://xyz').href, yet still null. Any suggestions?
Thanks.
You probably want to use document.querySelector:
var right = document.querySelector('[href="https://xyz"]');
or if you need the n-th match, document.querySelectorAll:
var right = document.querySelectorAll('[href="https://xyz"]')[n];
getElementById as the name suggests, selects an element by id so you have to define an id on your element: id="some_id" and then in JavaScript document.getElementById('some_id')
That's because you did not assign any ID to that tag. So document.getElementById('https://xyz') won't give you anything because there is no tag with this ID.
You have to assign an ID like this:
<...id="ID_of_href" href="https://xyz'...>
Then you can get it with:
document.getElementById('ID_of_href')
First of all we got to understand what is the html id attribute.
Definition and Usage
The id attribute specifies a unique id for an HTML element (the value
must be unique within the HTML document).
The id attribute is most used to point to a style in a style sheet,
and by JavaScript (via the HTML DOM) to manipulate the element with
the specific id.
According to this link: https://www.w3schools.com/tags/att_id.asp.
W3schools is a great web site for you to learn web development.
How to achieve your purpose:
const barElement = document.getElementById('bar');//Getting the element which id is bar.
console.log(barElement);
const fooElement = barElement.parentNode;//Getting bars parent.
console.log(fooElement);
<div id="foo">
<a id="bar" href="#"></a>
</div>

How add ID to HTML href with javascript

I have an HTML like this
<div class="this">
EXP
</div>
I want to add id to <a>. But do not know what to do.
First select your element using something like .getElementsByClassName(). Keep in mind that .getElementsByClassName() returns a NodeList collection of elements, so you'll want to access the first index (or loop over them). You can then simply set the ID with .id, as the ID is merely a property of an element.
This can be seen in the following:
const element = document.getElementsByClassName('this')[0];
element.id = 'element';
console.log(element);
<div class="this">
EXP
</div>
If you want to add this with Javascript, you'll need to use a selector to target your <a> tag and then set the id attribute on it. You can do this by using the querySelector() function or as seen below:
// Find an <a> tag that occurs below a class called "this" and set its id attribute
document.querySelector('.this > a').id = "some-id";
There are many other available functions to handle this through native Javascript and other frameworks, so your milage may vary depending on what you are using.
Example
In this example, we have provided some CSS that should only apply to an element with an id of "test" and we'll run the necessary code to show that the id is being added to the element (as it will be red):
document.querySelector('.this > a').id = 'test';
#test { color: red; }
<div class="this">
EXP
</div>
Add the id attribute to the <a> tag. See the differences of the middle line:
<div class="this">
<a id="expid" href="exp.com">EXP</a>
</div>

very simple but can't resolve. grabbing element

i'm trying to get the value from the ID => vname into the variable name
and the return should be "Loren",
I tried with and without the value attribute call but doesn't work. what am i missing?
<html>
<head>
<script>
var name = document.getElementById("vname").value;
alert(name);
</script>
</head>
<body>
<p id="vname" value="firstname">Loren</p>
</body>
</html>
There are three things wrong here:
You are trying to access the element before it exists You cannot eat the pizza before it is delivered... See Why does jQuery or a DOM method such as getElementById not find the element? for more info.
<p> HTML elements do not have a value attribute. In your case, value is a non-standard HTML attribute. If you want to use custom attributes, use data-* attributes instead.
p DOM elements do not have a value property. Only form control elements (input, select, etc) have such a property. If you want to get the content of an element, use innerHTML or textContent instead.
If you had opened your browser's console, you would have seen an error, because the element with ID vname couldn't be found. Make yourself familiar with your browser's developer tools so that you can fix issues like this on your own.
You can't get the "value" of a p element, you have to get the "innerHTML"
try this: var name = document.getElementById("vname").innerHTML;
Try var name = document.getElementById("vname").innerHTML;
When you try to access the #vname is not in the DOM yet. You will need to add the script tag after the element or wait for the DOM to be loaded.
When that is said a <p> tag cannot have a value. Use data-value instead:
<p id="vname" data-value="firstname">Loren</p>
<script>
var vname = document.getElementById("vname");
var value = vname.getAttribute('data-value');
console.log(value);
</script>

jQuery method to obtain contents of H2 Tag

I have the following HTML:
<div id="new_subscribed_threads" class="block">
<h2 class="blockhead">Subscribed Threads with New Posts: (0)</h2>
I am using the $.get method to obtain the content of another page on the same server. I want to store the contents of the H2 Tag in a variable and I am confused about how to get the H2.
I tried this:
var MyVar = $(results).find("new_subscribed_threads.h2").html();
But I don't think I am on the right track.
is should be like this:
var MyVar = $(results).find("#new_subscribed_threads h2").html();
or
var MyVar = $(results).find("h2.blockhead").html();
But I don't think I am on the right track.
Yes, you're totally off actually. You don't want to use a class selector .h2, but
an id selector
descendant syntax
and an element selector
It is as simple as this:
Find the position of the h2 tag
Access it and get the content via html()
It looks something like:
var s= $('div.block >h2').html();
console.log(s);

How to select text by tag name in element?

I need to select title which is in div wrapped by h2, so i do something like this this.getElementsByTagName('h2') where this is current div in which is h2 - it returns current h2 element, but when i trying to get innerHTML or innerText it return null. What am I doing wrong?
it returns current h2 element, but when i trying to get innerHTML or innerText it return null. What am I doing wrong?
getElementsByTagName returns a NodeList, not an element. The list doesn't have innerHTML, but each of its elements does, e.g.:
var list = this.getElementsByTagName('h2');
if (list[0]) {
title = list[0].innerHTML;
}
Or if you're sure that it will exist:
title = this.getElementsByTagName('h2')[0].innerHTML;
...but that will throw an exception if there are no h2's found.
No, this.getElementsByTagName('h2') returns an array of elements with tag name h2.
You have to iterate the array and access the correct element you want.
Two things:
You should capture the first element of the node list that's returned by getElementsByTagName():
var h2 = this.getElementsByTagName('h2')[0];
Different browsers use different properties to retrieve the tag contents:
var title = h2.textContent || h2.innerText || null;
Yes, you have done a small mistake. Because , this.getElementByTagName('h2') will return you a list ( of tags).
Being your tag is the first element as [0]
you can use
var v= this.getElementsByTagName('h2');
var yourdata=v[0].innerHTML;
As the other answers state getElementsByTagName returns an array.
Another option would be to use querySelector (supported only by modern browsers so check what you need to support first)
Running querySelector on this page gives the following:-
window.document.querySelector('h1').innerHTML //#>
"How to select text by tag name in element?"
querySelector
querySelectorAll

Categories