如何在课后定位标签？

Question

<div class="pre-class">
    <div>100%</div>
</div>

I'm trying to remove the percent (%) on the text inside the div after the class pre-class with textContent.replace("%","") but I just can't target that specific div

(I'm working on a longer website with a lot of divs and I can't add an ID to it because it's from a shortcode.)

I thought I could do something like this:

var textContent = document.getElementsByClassName('gamipress-progress-bar-completed').getElementsByTagName('div'); 

Answer 1

You're basically there. Don't forget that getElementsByClassname returns an array, so simply use [0] to retrieve the element. You'll see it working in the snippet below:

 var textContent = document.getElementsByClassName('pre-class')[0].getElementsByTagName('div')[0].innerHTML; console.log(textContent)

 <div class="pre-class"> <div>100%</div> </div>

Answer 2

 let containers = document.getElementsByClassName("pre-class"); for (var i = 0; i<containers.length; i++) { let current = containers[i]; let textNode = current.children[0]; textNode.innerText = textNode.innerText.replace(/(\d)%/, '$1'); };

 <div class="pre-class"> <div>100%</div> </div>

Alternatively, you could use element.querySelector() (or querySelectorAll ) to find the correct element(s) to replace.

 let textNode = document.querySelector(".pre-class > div"); // use querySelectorAll in case there can be multiple matches. textNode.innerText = textNode.innerText.replace(/(\d)%/, '$1');

 <div class="pre-class"> <div>100%</div> </div>

Answer 3

You can use querySelector

 let div = document.querySelector('div.pre-class > div'); div.innerText = div.innerText.replace('%', '')

 <div class="pre-class"> <div>100%</div> </div>

Answer 4

If the div will be the first direct child of the pre-class div, and you have one element with "pre-class" class, this will work

 const textContent = document.querySelector('.pre-class').firstElementChild.textContent; console.log(textContent.replace('%', ''))

 <div class="pre-class"> <div>100%</div> </div>

Answer 5

Use the child selector (>).

let textDiv=document.querySelector(".pre-class > div");
textDiv.textContent=textDiv.textContent.replace("%","");

This will replace the first direct div inside .pre-class. You can adjust the position of divs using pseudo classes. Like for example, if you want to select the second div inside .pre-class, you would use:

<div class="pre-class">
    <div>100%</div>
     <div>200%</div>
    <div>300%</div>
</div>

let textDiv=document.querySelector(".pre-class > div:nth-child(2)");
textDiv.textContent=textDiv.textContent.replace("%","");

Answer 6

 const content = document.querySelector('.pre-class > div').innerHTML; content.replace("%", "");

 <div class="pre-class"> <div>100%</div> </div>

This is another way of selecting the div nested in your .pre-class div. Perhaps not the best way of doing this but it's handy to know querySelector works.

Answer 7

If you have lots of divs inside div.pre-class , its better to add specific data attribute to each child div and select the desired div using this:

 < div class = 'pre-class' > <div data-order = 'first' > 1 < /div> <div data-order = 'second' > 2 < /div> <div data-order = 'third' > 3 < /div> </div> /////////// document.querySelector('div[data-order="first"]')