Develop Reference

add specific anchor links a class

How I can add to my anchor links a class?
My html code looks like this:
<div class="et_pb_blurb_content">
<div class="et_pb_main_blurb_image">
<a href="video.mp4">
<span class="et_pb_image_wrap">
<img loading="lazy" width="128" height="128" src="2021/02/cover.png" alt="" class="et-waypoint et_pb_animation_off wp-image-17" />
</span>
</a>
</div>
<div class="et_pb_blurb_container">
<h4 class="et_pb_module_header">
Watch
</h4>
</div>
</div>
With javascript code I want achieve like this it adds anchor links class:
<div class="et_pb_blurb_content">
<div class="et_pb_main_blurb_image">
<a href="video.mp4" class="vp-a">
<span class="et_pb_image_wrap">
<img loading="lazy" width="128" height="128" src="2021/02/cover.png" alt="" class="et-waypoint et_pb_animation_off wp-image-17" />
</span>
</a>
</div>
<div class="et_pb_blurb_container">
<h4 class="et_pb_module_header">
Watch
</h4>
</div>
</div>
I use wordpress divi theme and there is not possible add class to anchor video links

Could use something like below:
// grab all the parent items by classname
const linkParents = document.querySelectorAll('.et_pb_module_header');
// iterate over parents
[...linkParents].forEach((parent) => {
// grab the anchor tag from the parent
const link = parent.querySelector('a');
// add your classname to the anchor tag
link.classList.add('vp-a');
});

How do I select text inside a <span> that is inside an HTMLCollection of links <a> using JavaScript?

I'm trying to scrape some data for a fun personal project, and I'm new to JS. I'm trying to get an array of team names from an HTMLCollection (using Chrome Dev Tools). If there's an easier way I'm open to it. So far:
let vMidCollection = document.getElementsByClassName("v-mid");
vMidCollection[0]
QUESTION: Each <a></a> contains a <span></span> but I need an array of team names (underlined). Thanks in advance.

You can try this using querySelectorAll
const teamNames = [...document.querySelectorAll('.v-mid span.teamName')].map(e => e.textContent)
console.log(teamNames)
<a class="v-mid">
<div>
<span class="teamName">Test </span>
</div>
</a>
<a class="v-mid">
<div>
<span class="teamName">Test 1</span>
</div>
</a>
<a class="v-mid">
<div>
<span class="teamName">Test 2</span>
</div>
</a>

You can use the following
let vMidCollection = document.getElementsByClassName("v-mid");
team_names = []
Array.from(vMidCollection).forEach( (elem) => {team_names.push(elem.querySelector(".teamName").innerText)})
console.log(team_names)
<a class="v-mid">
<div>
Stuff
</div>
<span class="teamName">Tam 1 </span>
</a>
<a class="v-mid">
<div>
Stuff
</div>
<span class="teamName">Team 2</span>
</a>
<a class="v-mid">
<div>
Stuff
</div>
<span class="teamName">Team3</span>
</a>
It finds every element inside vMidCollection that has class="teamname" and appends it text to team_names

loop through divs for nested divs with href inside

<div class="view-content">
<div class="views-row views-row-1">
<div class="views-field">
<span class="field-content">
<a href="link1">Name for link1
<img src="image1">
</a>
</span>
</div>
<div class="views-field-title">
<span class="field-content">
<a href="link1">
</a>
</span>
</div>
</div>
<div class="views-row views-row-2">
<div class="views-field">
<span class="field-content">
<a href="link2">Name for Link2
<img src="image2">
</a>
</span>
</div>
<div class="views-field-title">
<span class="field-content">
<a href="link2">
</a>
</span>
</div>
</div>
I am using node with request, and cheerio to request the data and scrape accordingly.
I am seeking the href from link1 and link2, I got it to work for one link, but it does not scale out when I try to loop it.
const data ={
link:"div.views-field > span > a"
},
pageData = {};
Object.keys(data).forEach(k => {
pageData[k] = $(data[k]).attr("href");});
console.log(pageData);

Your approach with $(data[k]).attr("href"); is the right idea, but there's no loop here. There should be 2 elements matching this selector but your code only grabs the first.
Changing this to a [...$(data[k])].map(e => $(e).attr("href")) lets you get href attributes from all matching elements.
I'm not crazy about pageData being global and using a forEach when a map seems more appropriate, so here's my suggestion:
const $ = cheerio.load(html);
const data = {
link: "div.views-field > span > a",
};
const pageData = Object.fromEntries(
Object.entries(data).map(([k, v]) =>
[k, [...$(v)].map(e => $(e).attr("href"))]
)
);
console.log(pageData);

Traversing DOM with javascript

I have a piece of HTML like this:
<div id="contentblock">
<div id="producttile_137" class="producttile">
<a href="#" class="tile">
<img src="images/Bony A-Booster.jpg" alt="Bony A-Booster - 50 ml">
Bony A-Booster
<span class="price">€10.95</span>
</a>
</div>
<div id="producttile_138" class="producttile">
<a href="#" class="tile">
<img src="images/Bony B-Booster.jpg" blt="Bony B-Booster - 50 ml">
Bony B-Booster
<span class="price">€20.95</span>
</a>
</div>
<div>Aditional info</div>
</div>
I need to get all <img /> sources but with pure Javascript. I can get element by class name document.getElementsByClassName('producttile') but is it possible to traversing in pure JS to <img /> ang get src="" value?

You could use :
document.getElementsByClassName('class_name');
//OR
document.getElementsByTagName('img');
//OR
document.querySelectorAll('img');
All the previous methods are pure javascript and return nodes list so you could loop through them to get the src of every node.
Hope this helps.

You can use the function getElementsByTagName.
function listImages() {
var img = document.getElementsByTagName('img');
for (var i in img) {
if (img[i].src) {
console.log(img[i].src);
}
}
}
<div id="contentblock">
<div id="producttile_137" class="producttile">
<a href="#" class="tile">
<img src="images/Bony A-Booster.jpg" alt="Bony A-Booster - 50 ml">
Bony A-Booster
<span class="price">€10.95</span>
</a>
</div>
<div id="producttile_138" class="producttile">
<a href="#" class="tile">
<img src="images/Bony B-Booster.jpg" blt="Bony B-Booster - 50 ml">
Bony B-Booster
<span class="price">€20.95</span>
</a>
</div>
<div>Aditional info</div>
</div>
Show Images

one possible solution to get img and the src value:
var imgs = document.querySelectorAll('img')
var res = [].slice.call(imgs).map(x=>x.getAttribute("src"))
//or in es5
//.map(function(x){return x.getAttribute("src")})
//[].slice.call is necessary to transform nodeList in array
//otherwise you can use an regular for loop
console.log(res)
<div id="contentblock">
<div id="producttile_137" class="producttile">
<a href="#" class="tile">
<img src="images/Bony A-Booster.jpg" alt="Bony A-Booster - 50 ml">
Bony A-Booster
<span class="price">€10.95</span>
</a>
</div>
<div id="producttile_138" class="producttile">
<a href="#" class="tile">
<img src="images/Bony B-Booster.jpg" blt="Bony B-Booster - 50 ml">
Bony B-Booster
<span class="price">€20.95</span>
</a>
</div>
<div>Aditional info</div>
</div>
wanting to directly select an element based on it's src value you could also do this :
document.querySelector('[src="images/Bony A-Booster.jpg"]')
(assuming there is one element you can use querySlector() instead of querySelectorAll() )

You can use document.getElementsByTagName() to fetch all the img tags as a HTMLCollection. And then, you can iterate over the HTMLCollection and get the src attribute value by using getAttribute() method as below:
const imgElements = document.getElementsByTagName("img");
Array.from(imgElements).forEach(function(element){
console.log(element.getAttribute("src"));
});

How to find a particular grand parent by Id and get value of its particular children by certain class using jQuery

I have a dynamic div
<div class="illustartionWrap" id="illustartionWrapId">
<div class="illusList illusListTop" id="illusList_heading">
<span class="fileName">File Name</span>
<span class="fileDesc">Description</span>
<span class="fileSize">File Size</span>
<span class="fileDownload">Download</span>
</div>
<div class="clear"></div>
<div class="illusList">
<span class="fileName">fileTitle</span>
<span class="fileDesc">fileDesc</span>
<span class="fileSize">1.18 MB</span>
<span class="fileDownload">
<a href="http://myfile/file.txt">
<img src="/sites/all/themes/petheme/images/myimage.png">
</a>
<a href="#">
<img id="illFile_6" class="illDeleteFile" src="/sites/all/themes/petheme/images/icons/deleteButton.png">//clicking it to delete the file from db
</a>
</span>
</div>
</div>
How to get the parents of this delete button and find the filetitle class to get the title of the file.
Below is click handler which I wrote
/**delete function for my page**/
jQuery(".illDeleteFile").on("click", function() {
var illDeleteId = jQuery(this).attr("id").split("_");
var illFileTitle = jQuery(this).parent("#illusList").children(".fileName").val();
alert (illFileTitle);
});
I checked with jQuery Parent() , Parents() and children() and also find() but I am getting undefined mostly and not getting the title.
How to achieve this?
JSFIDDLE : http://jsfiddle.net/hiteshbhilai2010/ywhbd9ut/14/

See this,
jQuery(".illDeleteFile").on("click", function() {
var illFileTitle =jQuery(this).closest(".illusList").find(".fileName").html();
alert (illFileTitle);
});

You'll want to use:
var illFileTitle = jQuery(this).closest(".illusList").find(".fileName").text();
alert(illFileTitle);