I want to get the element using javascript without using its ID( html id="somethin" ) or a class.
Something like.....
var whatIWantedToSelect = document.html;
OR
Something like.....
var whatIWantedToSelect = document.getElementsByTagName('html')[0];
Please, see the below picture to see the exact DOM element that I want to access via javascript.
var whatIWantedToSelect = document.html;
The HTML element is the document.documentElement.
var whatIWantedToSelect = document.getElementsByName('html')[0];
getElementsByName matches elements by their name attribute. You are looking for getElementsByTagName.
You can use getElementsByTagName function as follows:
let html = document.getElementsByTagName('html')[0];
console.log(html);
html.addEventListener("click",function(){
console.log("clicked")
})
html.click();
<html></html>
The root <html> element is available as document.documentElement. So there is no need to select it by tag name (which would have worked too, but you had getElementsByName instead of getElementsByTagName).
Docs: https://developer.mozilla.org/en-US/docs/Web/API/Document/documentElement
var whatIWantedToSelect = document.documentElement
Related
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");
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>
I'm trying to add an id to an element that I create dynamically using javascripts' document.createElement() method. Basically I want to create an iframe in my html document and at the same time give that newly created element an id.
Here's my code so far. I've figured out how to put the element in the DOM and all that, i just need the id.
function build(content){
var newIframe = document.createElement("iframe");
var newContent = document.createTextNode("Hello World!");
newIframe.appendChild(newContent);
var element = document.getElementById("container");
document.body.insertBefore(newIframe, element);
document.getElementsByTagName("iframe").id = "active";
};
As you can probably see, I have tried to give it an id at the very end. Problem is, it doesn't work.
So if anyone has any idea of what is wrong here, or an alternative way of doing what I want to do, please feel free to express yourself. Many thanks!
Just add an attribute (id is an attribute) to that element directly, like this:
var newIframe = document.createElement("iframe");
newIframe.id = 'active';
... although it looks quite strange to have id equal to active (too generic for a unique identifier).
Your current approach doesn't work because document.getElementsByTagName("iframe") returns a collection of elements - NodeList or HTMLCollection (it's browser-dependant). While you can assign a value to its id property, it won't do what you mean to. To make it work, you can adjust it this way:
document.getElementsByTagName("iframe")[0].id = "active";
... but, as shown above, there's a better way.
newIFrame.setAttribute("id", "something");
I want to toggle a class to the html tag element. I've made it work with the body element but I cannot find the solution to also toggle a class to the html tag.
document.querySelector('[data-menu-mobile]').addEventListener('click', function(){
document.body.classList.toggle('nav-main-mobile-open');
document.html.classList.toggle('html-color-fill');
});
I know this seems to be wrong:
document.html.classList.toggle('html-color-fill');
What is the correct way to do this?
There's no document.html object, to get to the root element you should use document.documentElement.
document.documentElement.classList.toggle('html-color-fill')
This should work:
var elements = document.getElementsByClassName("myclass");
//iterate through all found elements
Array.prototype.forEach.call(elements, function(element) {
element.className = "html-color-fill";
//or remove class with:
//element.className = "";
});
In my js I have a var in which I have stored innerHTML.
The var is having value something like
<h2>headline</h2>
<div>....</div>
...........
Now I want to retrieve value of h2 tag..what I am doing is
$(myvar).find("h2").text()
but its not working...what should be the exact syntax?
EDIT:
alert(myvar)=<h2>headline</h2>
<div>....</div>
Thanks.
The find method will not work for this case, because it gets the descendants of each element in the current set of matched elements (the h2 and the div in your example).
You can simply use filter (available on jQuery 1.3.2):
var myvar ="<h2>headline</h2>" +
"<div>....</div>";
alert($(myvar).filter('h2').text()); // headline
Check an example here.
Find() returns a collection of nodes. Use first():
h2text = $(myvar).first("h2").text();
Change your HTML to something like this.
<div>
<h2>headline</h2>
<div>....</div>
</div>
generally would make more sense to wrap the contents of your var in a div as proposed by ChaosPandion.
if that's not possible, you can try this...
<script>
var myVar = '<h2 id="test">heading</h2><div>stuff</div>';
var jVar = $(myVar);
alert($(jVar.get(0)).text());
</script>