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

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

Javascript: check for ::after in element

I have a very simple element:
How can I check if this element contains the ::after using Javascript?
(I have the element using document.getElementsByTagName('h2')[0])
I don't know how the thing works, and I don't need to know, I just need the code to see if it exists...
In some cases the element looks like this:
I need to be able to detect both cases, if possible!

It would be something like this:
var pre = onload; // assign previous onload if any
onload = function(){ // onload wrapper start
if(pre)pre(); // execute previous onload in the new onload
var doc = document, h2a = doc.getElementsByTagName('h2');
var afterIn = [], afterOut = [];
for(var i=0,l=h2a.length; i<l; i++){
var h2 = h2a[i];
if(h2.value.match(/\:\:after/)){
afterIn.push(h2);
}
else{
afterOut.push(h2);
}
}
for(var i=0,l=afterIn.length; i<l; i++){
console.log(afterIn[i].value);
}
for(var i=0,l=afterOut.length; i<l; i++){
console.log(afterOut[i].value);
}
} // onload wrapper end

Check this link, explains how to use it in plain JavaScript (might only work in newer browsers): http://davidwalsh.name/pseudo-element
Edit: if you're looking to edit what the content of the :after is, reference this SO question: Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery

How can access bunch of <li>?

I have a list of texts and I want to change their innerHTML. how can I do that by javascript if I have thousands of li tag (whose data come from database)?
<div>
<ul>
<li>a</li>
<li>as</li>
<li>asd</li>
<li>asds</li>
<li>asdsa</li>
<li>asdsad</li>
<li>asdsadz</li>
<li>asdsadzc</li>
....
.....
</ul>
</div>
-Thanks.
Update
JS code being used:
function a(){
var parent = document.getElementById("z");
var i = 0;
for(i = 0; i <= parent.children.length; i++){
if(parent.children[i].tagName == "LI"){
if(i%2!=0){
parent.children[i].innerHTML="ok";
}
}
}
}
document.onload=a(); // this didn't work. so I called the function in body tag instead of that.
<body onload="a();">

Have you tried using getElementsByTagName ? Sonds like it would help you find the elements you're trying to work with.
Edit
If you can give an Id to the UL element that holds the li's you're trying to process, you could do something like this:
var parent = document.getElementById("yourID");
var i = 0;
for(i = 0; i < parent.children.length; i++){
if(parent.children[i].tagName == "LI") {
//do what you want...
}
}
EDit 2
You have to change the last line on your script:
document.onload=a();
With this one: window.onload=a;
That'll get your function to execute on the onLoad event. Note that there might be some crossbrowser incompatibility, I would suggest researching a bit on how to execute functions on the onload event on a crossbrowser manner, or just adding this to your body tag:
<body onload="a();">

Given the - not so far fetched - precondition you wish to use jQuery, you can select them and iterate over them with "each".
$("li").each(
function() { $(this).html("changed content"); }
);
If you are not using jQuery, using a js-library that helps you out with the quircky dom is probably not a bad idea...
The general idea
Select nodes
Iterate and change html
is always the same.

getElementsByTagName doesn't work for my <a> tags

I can't get this to work:
<p>
First
Second
Third
Fourth
</p>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
<script>
var link = document.getElementsByTagName("a");
link.style.fontSize = '16px';
link.style.textDecoration = 'none';
link.style.color = '#333333';
link.style.fontWeight = 'bold';
</script>
I'm trying to add CSS styles (font-size, text-decoration, color, font-weight) to all the <a> tags of my HTML code.

This isn't working because you're trying to apply the changes to the list vs. the individual links. You need to loop through the links and apply the changes to the individual items
var all = document.getElementsByTagName("a");
for (var i = 0; i < all.length; i++) {
var link = all[i];
link.style.fontSize = '16px';
link.style.textDecoration = 'none';
link.style.color = '#333333';
link.style.fontWeight = 'bold'
}
Additionally it looks like your script is running before the a elements are defined. Hence the getElementsByTagName will return an empty collection. Try moving the script to after the definition of the anchor elements

When the closing tag of that <script> block is encountered, the whole code in it is evaluated. Since anything after </script> has not been parsed yet, the result from document.getElementsByTagName('a') is not as expected.
Wrap the method in an onload or DOMContentLoaded event.
It seems that you want to target all anchor elements. Instead of looping through all anchorts, you'd better append a <style> element with the given CSS text:
window.addEventListener('load', function() {
// `window.attachEvent('onload', function() {` for old IE versions
var style = document.createElement('style');
var cssText = 'a,a:link,a:visited {' +
'font-size:16px;text-decoration:none;color:#333;font-weight:bold;}';
style.appendChild(document.createTextNode(cssText));
document.getElementsByTagName('head')[0].appendChild(style);
}, false);