$ .find () method in pure javascript

Question

$ .find () method in pure javascript

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

How to set the attribute of a child element within another element using javascript pure? Home in jquery would be: $('.preview').find('img').attr('src','#url'); but how does it stay in javascript pure?

<div class="preview"><img src="" title=""/></div>

var el = document.getElementsByClassName("preview");
var img = el.getElementsByTagName('img');
img.setAttribute("src" , 'url');

I tried with your answer but it did not work: in the console it appears: 'undefined'

var reader = new FileReader();

reader.onload = function (e){                   
    document.getElementsByClassName("preview")[0].querySelectorAll("img")[0].setAttribute("src", e.target.result);                      
};

reader.readAsDataURL(files[0]);

This function is called in the change event of the input file

What I'm trying to do is get the url of the image that is loaded into the input and it shows a thumbnail, the code works at jquery but I need to do at javascript

this works:

<img src="" alt="" id="preview">

document.getElementById("preview").setAttribute('src', 'url');

javascript

asked by anonymous 15.04.2017 / 23:10

2 answers

Passing and receiving the field id by parameter How can I set values from my Controller for a form in Ionic / Angular Js?

score 2 · Answer 1

I answered something similar in link , to be clearer the getElementsByTagName , getElementsByClassName , and querySelectorAll are different in behavior of getElementById and querySelector (without the "All"):

getElementsByTagName , getElementsByClassName , and querySelectorAll return a list of elements, similar to an array, and can return this list with zero items
querySelector returns only one element by its id, or returns null if nothing found. It can only be used with elements owned by getElementById or a null for example, but will not work if used on other elements as something like this:
```
<div id="a">
   <div id="b">x</div>
</div>
<script>
   console.log(document.getElementById("a").getElementById("b"));
</script>
```

Overall, something that solves your problem is only using Document :

<div class="preview"><img src="" title=""/></div>

<script>
var img = document.querySelector(".preview > img");

//Verifica se encontrou o img
if (img) {
    img.setAttribute("src" , 'url');
}
</script>

If there are multiple responseXML :

<div class="preview"><img src="" title=""/></div>
<div class="preview"><img src="" title=""/></div>
<div class="preview"><img src="" title=""/></div>
<div class="preview"><img src="" title=""/></div>

Then use querySelector with .preview :

var imgs = document.querySelectorAll(".preview > img");

for (var i = 0, j = imgs.length; i < j; i++) {
    imgs[i].setAttribute("src" , 'url');
}

Read the documentation on DOM and learn how each function works before using it:

score 1 · Answer 2

With jquery

var elemento = $('.preview').find('img').attr('src');
console.log(elemento);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="preview"><img src="teste" title=""/></div>

Note that it would work the same way if you did:

var elemento = $('.preview img').attr('src');
console.log(elemento);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="preview"><img src="teste" title=""/></div>

With vanillaJs

var elemento = document.querySelectorAll('.preview img')[0].getAttribute('src');
console.log(elemento);

<div class="preview"><img src="teste" title="" /></div>

To change the attribute, just use setAttribute

console.log(document.querySelectorAll('.preview img')[0].getAttribute('src'));
document.querySelectorAll('.preview img')[0].setAttribute('src', "Ola");
console.log(document.querySelectorAll('.preview img')[0].getAttribute('src'));

<div class="preview"><img src="teste" title="" /></div>

Source: You Might Not Need jQuery