We Keep Coding

How to get individual element's CSS selector/Xpath

What I am trying to accomplish is basically, to get a list of Elements ( currently using document.querySelectorAll() in order to get a list of elements using a general selector.
E.g: get me all elements of .note class in the document.
document.querySelectorAll('.note')
since it collects them from all over the DOM, I then need a JS function to iterate over all of them using a different function from a library that does not use NodeList, and I need it to query all these elements individually (This is an automation task so negligent benefits of speed are of no matter here).
Since these elements appear on different parts and hierarchies of the DOM, I cannot fetch them all with a CSS selector individually like :nth-of-type, I need the specific CSS Selector/ XPath of each of them.
For example, for all .note class elements on a page, I need the result to be something like:
['.my-first-class .inner .note', 'section .different-class .inner .note', '.profile .profile-notes .note']
something in this style would be extremely helpful to me.
Thank you very much for any assistance you may provide!

I borrowed a generateQuerySelector function from this answer and simply looped over the results of .note query selection, being sure to convert the NodeList to an Array.
const notes = Array.from(document.querySelectorAll('.note'))
notes.forEach(note => {
console.log(generateQuerySelector(note))
})
function generateQuerySelector (el) {
if (el.tagName.toLowerCase() == "html")
return "HTML";
var str = el.tagName;
str += (el.id != "") ? "#" + el.id : "";
if (el.className) {
var classes = el.className.split(/\s/);
for (var i = 0; i < classes.length; i++) {
str += "." + classes[i]
}
}
return generateQuerySelector(el.parentNode) + " > " + str;
}
<div class="content">
<div class="primary">
<div class="article">
<div class="note">
</div>
</div>
</div>
<div class="secondary">
<div class="aside">
<div class="note">
</div>
</div>
</div>
<div class="note">
</div>
<div id="contact-form">
<div class="note"></div>
</div>
</div>

Css can't write it down, it can only show you whatever you want in the way you want
body *{ display: block} /* only if you want single column */
.wanted::after{ content: ' wanted '; float: right; background: red; color: #000; margin: 0 5px; padding: 0 5px}
p.wanted::after{ content: 'I am a <p>'; background: #cf8;}
div.wanted::after{ content: 'I am a <div>'; background: yellow}
a.wanted::after{ content: 'href me';background: orange}
<div>div</div>
link
<p>paragraph</p>
<a class="wanted">link</a>
link
<div>div</div>
<div class="wanted">div</div>
link
<a class="wanted">link</a>
<nav class="wanted">nav</nav>
<div class="wanted"> div </div>
<div>div</div>
<p>paragraph</p>
<div class="wanted"> div </div>
<p class="wanted">paragraph</p>
link
<div class="wanted"> div </div>
<a class="wanted">link</a>
<a class="wanted">link</a>
<div class="wanted"> div </div>
<p class="wanted">paragraph</p>
<div>div</div>
<div class="wanted"> div </div>
link
<div class="wanted"> div </div>
<p class="wanted">paragraph</p>
<div>div</div>
<a class="wanted">link</a>
<div class="wanted"> div </div>
<div>div</div>
<p>paragraph</p>
<div class="wanted"> div </div>
<div>div</div>
<p class="wanted">paragraph</p>
link
<a class="wanted">link</a>
<div>div</div>

How to select classes with this id to trigger an event / how to change the color of the header per each slides?

This is what I'm trying to do: if this document has this class and this class has this id, then change the header background color. I have been trying to do if statements and using .is() to also select the id element, but it is not working.
I'm trying to create a slide webpage with a fixed header. I'm trying to change the color of the header per each slide.
Here is some HTML
<header id="header">
<h2 id="dialogues-header">HEADER—</h2>
<h2 id="spring-right">Spring 2020</h2>
</header>
<div class="mySlides" id="grey-header">
<div class="container">
<main class="main-one">
<img class="artwork" src="image.jpg" />
</main>
<aside class="info">
<h3>Header</h3>
<div class="text-blurb">
<p>text</p>
</div>
</aside>
<main class="main-two yellow">
<h1 id="number">1</h1>
<h1 id="name-right">name</h1>
</main>
<main class="main-three">
<iframe src="link"></iframe>
</main>
</div>
</div>
<div class="mySlides" id="yellow-header"> same as above </div>
Here is some css
header {
position: fixed;
/*-- other code omitted --*/
}
Here is the jquery code
<script>
var yellowHeader = $(".mySlides").is("#yellow-header");
var greyHeader = $(".mySlides").is("#grey-header");
var pinkHeader = $(".mySlides").is("#pink-header");
if (yellowHeader) {
$('header').css({"background-color":"#FFF231"});
} if (greyHeader) {
$('header').css({"background-color":"#F4F4F4"});
}
</script>
EDITS:
Hey, I think people aren't getting what I'm trying to do? So I added more of my code here for you to check out --> https://codepen.io/youngua/pen/bGEpwyd
On Header 1 slide: Header 0 should be grey, Header 2 slide: Header 0 should be yellow, Header 3 slide: Header 0 should be pink
That's what I'm trying to do

OK, first of all put all your JS in separate files, not in the HTML file.
Then, use CSS and DOM logic. What you want is everytime you change a slide, the color of the header changes, it means that everytime you change a slide, your header gets a new class:
https://codepen.io/djcaesar9114/pen/mdVPmaV
In your CSS
.pink-header {
background-color: pink;
}
.yellow-header {
background-color: yellow;
}
.grey-header {
background-color: grey;
}
And in your JS
document.getElementById('header').className = (x[slideIndex - 1].getAttribute('id'));
What this line is doing:
getting the slide you want to be displayed: x[slideIndex - 1]
taking its id: .getAttribute('id')
taking this id and putting it as a class for the header: document.getElementById('header').className =
It means that if your slide has the id "pink-header", so "#pink-header" in CSS, your header gets the class "pink-header", so ".pink-header" in CSS.

i run your code,it's work
codepen
i think you can try to change color
if (yellowHeader) {
$('header').css({"background-color":"red"});
}
if (greyHeader) {
$('header').css({"background-color":"blue"});
}

If you are making multiple conditional statements, you must chain the if statement with if-else. I corrected the jQuery below. Remember that it will go through each statement in order, and if the first statement is true it will not continue through the chain
var yellowHeader = $(".mySlides").is("#yellow-header");
var greyHeader = $(".mySlides").is("#grey-header");
var pinkHeader = $(".mySlides").is("#pink-header");
if (yellowHeader) {
$('header').css({"background-color":"#FFF231"});
} else if (greyHeader) {
$('header').css({"background-color":"#F4F4F4"});
}
header {
position: fixed;
/*-- other code omitted --*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header id="header">
<h2 id="dialogues-header">HEADER—</h2>
<h2 id="spring-right">Spring 2020</h2>
</header>
<div class="mySlides" id="grey-header">
<div class="container">
<main class="main-one">
<img class="artwork" src="image.jpg" />
</main>
<aside class="info">
<h3>Header</h3>
<div class="text-blurb">
<p>text</p>
</div>
</aside>
<main class="main-two yellow">
<h1 id="number">1</h1>
<h1 id="name-right">name</h1>
</main>
<main class="main-three">
<iframe src="link"></iframe>
</main>
</div>
</div>
<div class="mySlides" id="yellow-header"> same as above </div>

<a> element not working properly when hiding parent?

I made this script, and despite one oddity, it works fine. It's hiding/showing the parent of div element with a class containing specific content. The problem when I press my <a> elements, that act as buttons, they "filter" the divs, but it leaves the first comment <a>? If I change the element do a <div> instead no problem, but with an <a> element it behaves weirdly? Is this just a bug or?
here is a JSFiddle: https://jsfiddle.net/g1puxhs7/2/
HTML:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<a class='viewBtn'>Published<a>
<a class='viewBtn'>Completed<a>
<a class='viewBtn'>Created<a>
<div class="orders" id="orders">
<div class="row">
<div class="status">
Completed
</div>
<a>Comment</a>
</div>
<div class="row">
<div class="status">
Completed
</div>
<a>Comment</a>
</div>
<div class="row">
<div class="status">
Completed
</div>
<a>Comment</a>
</div>
</div>
<style>
.row {
width: 200px;
margin: 10px;
background: #ccc;
padding: 4px;
}
</style>
SCRIPT:
//--Filter by Status--//
$('.viewBtn').click(function() {
var txt = $(this).text();
$('.status:contains("' + txt + '")').parent().toggle();
$(this).toggleClass('down');
});

The problem is with your links:
<a class='viewBtn'>Published<a>
<a class='viewBtn'>Completed<a>
<a class='viewBtn'>Created<a>
You have 6 opening a tags, instead of 3 opening and 3 closing tags.
This is why the browser adds closing a tags in your script in a bunch of places, one of them in your first div—and then your whole DOM tree looks different than what you want.

Your markup needed to be cleaned up. Here is your markup cleaned up. Also, i find it best to add href for you anchor tags, and then you can comment them out with #, or you can add javascript:void(0). If you use the # approach, in your JS, you can add e.preventDefault();
HTML Cleaned:
<div>
<a class='viewBtn' href="#">Published</a>
<a class='viewBtn' href="#">Completed</a>
<a class='viewBtn' href="#">Created</a>
</div>
<div class="orders" id="orders">
<div class="row">
<div class="status">
Completed
</div>
<a class="stuff" onclick="Comment">Comment</a>
</div>
<div class="row">
<div class="status">
Completed
</div>
<a class="stuff">Comment</a>
</div>
<div class="row">
<div class="status">
Completed
</div>
<a class="stuff">Comment</a>
</div>
</div>
JS with preventDefault():
$('.viewBtn').click(function(e) {
e.preventDefault();
var txt = $(this).text();
$('.status:contains("' + txt + '")').parent().toggle();
$(this).toggleClass('down');
});

Trying to make different text appear below 3 aligned images on hover

First things first, here is my example :
https://jsfiddle.net/y532ouzj/33/
HTML:
<div id="image" class="item">
<a ><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
</div>
<div id="text" class="show">Text 1</div>
<div id="image" class="item">
<a ><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
</div>
<div id="text" class="show">Text 2</div>
<div id="image" class="item">
<a ><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
</div>
<div id="text" class="show">Text 3</div>
CSS:
.item {
/* To correctly align image, regardless of content height: */
vertical-align: top;
display: inline-block;
/* To horizontally center images and caption */
text-align: center;
/* The width of the container also implies margin around the images. */
width: 190px;
}
.show {
display: none;
}
.item:hover + .show {
display: block;
}
JAVASCRIPT :
$('#image').hover(function() {
$('#text').show();
}, function() {
$('#text').hide();
});
It almost works but I must be forgetting a little something since my 3 pictures aren't staying where I want them to once I start hovering that mouse. So if you don't hover over the pictures, everything is good, 3 pics aligned. Hover over pic #1 or 2, text goes exactly where I want it, but why does my pic 3 and pic 2 also move down ? Hover over pic #3, everything works the way it should.

You have multiple problems with this. First of all, ids can only be used once. Change them to classes, and you should be fine. Second, move the divs inside of the image div, and it will only show the one that you would like to. Updated javascript and html follows:
fiddle: https://jsfiddle.net/y532ouzj/34/
HTML
<div class="image item">
<a><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
<div class="text show">Text 1</div>
</div>
<div class="image item">
<a><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
<div class="text show">Text 2</div>
</div>
<div class=" image item">
<a><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
<div class="text show">Text 3</div>
</div>
Javascript
$('.image').hover(function () {
var that = $(this);
that.find('.text').show();
}, function () {
var that = $(this);
that.find('.text').hide();
});

First of all, java and javascript aren't the same thing; they're two separate languages.
Second, in HTML, it's bad form (and possibly dead wrong) to use the same id for multiple elements on a page. the value of each id attribute should be unique.
Finally, the answer in HTML and jQuery:
https://jsfiddle.net/y532ouzj/36/
The HTML now contains just one text. It will be modified for each case
<div id="image_1" class="item">
<a >
<img src="http://www.topring.com/images/carre_download_cat_ENG.jpg" /> </a>
</div>
<div id="image_2" class="item">
<a >
<img src="http://www.topring.com/images/carre_download_cat_ENG.jpg" />
</a>
</div>
<div id="image_3" class="item">
<a >
<img src="http://www.topring.com/images/carre_download_cat_ENG.jpg" />
</a>
</div>
<div id="text" class="show">
Text
</div>
The javascript now modifies and reveals the text based on whichever image triggers the event.
$('#image_1').hover(function() {
$('#text').html("Text 1");
$('#text').show();
}, function() {
$('#text').hide();
});
$('#image_2').hover(function() {
$('#text').html("Text 2");
$('#text').show();
}, function() {
$('#text').hide();
});
$('#image_3').hover(function() {
$('#text').html("Text 3");
$('#text').show();
}, function() {
$('#text').hide();
});

I'm going to make a suggestion instead of answering the direct question. Instead of overcomplicating this, I suggest you used the Title attribute.
<div class="image"><a><img src="" title="Text 1" /></a></div>
Most browsers will know what to do with this. Some older browsers may give varying quality of interpreting the attribute, but this is the easiest way to do what you are trying to accomplish.

How do I make an image into a link, that links to another image, using javascript?

This is what I got so far, and I can't seem to get it to work..
It's the image that has the id="hap_text" that I want to be displayed when you click on the other image.
<script>
$(function() {
$('.touch_bg #touch_hap').click(function(e) {
e.preventDefault();
$('#hap_text').toggleClass('hidden');
});
});
</script>
<div class="container touch_bg">
<div>
<img id="touch_hap" src="img/info/lefttouch.png">
<img id="hap_text" class="hidden" src="img/info/habitattext.png">
</div>
</div>
and the css is:
.hidden {
display: none;
}

Uncaught ReferenceError: $ is not defined
Don't forget to include jQuery. Otherwise, your code looks fine.
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
$(function() {
$('.touch_bg #touch_hap').click(function(e) {
e.preventDefault();
$('#hap_text').toggleClass('hidden');
});
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container touch_bg">
<div>
<a href="#">
<img id="touch_hap" src="img/info/lefttouch.png">
</a>
<img id="hap_text" class="hidden" src="img/info/habitattext.png">
</div>
</div>