Obter elemento dentro do elemento por classe e ID - JavaScript

Tudo bem, eu já me envolvi com JavaScript antes, mas a coisa mais útil que escrevi é um alternador de estilos CSS. Então, sou um pouco novo nisso. Digamos que eu tenha código HTML como este:

<div id="foo">
    <div class="bar">
        Hello world!
    </div>
</div>

Como eu mudaria "Olá, mundo!" para "adeus mundo!" ? Eu sei como document.getElementByClass e document.getElementById funcionam, mas gostaria de ser mais específico. Desculpe se isso foi perguntado antes.

Bem, primeiro você precisa selecionar os elementos com uma função como getElementById.

var targetDiv = document.getElementById("foo").getElementsByClassName("bar")[0];

getElementByIdretorna apenas um nó, mas getElementsByClassNameretorna uma lista de nós. Como existe apenas um elemento com esse nome de classe (até onde eu sei), você pode obter o primeiro ( [0]é para isso que serve - é como uma matriz).

Em seguida, você pode alterar o html com .textContent.

targetDiv.textContent = "Goodbye world!";

var targetDiv = document.getElementById("foo").getElementsByClassName("bar")[0];
targetDiv.textContent = "Goodbye world!";

<div id="foo">
    <div class="bar">
        Hello world!
    </div>
</div>

Você pode fazer assim:

var list = document.getElementById("foo").getElementsByClassName("bar");
if (list && list.length > 0) {
    list[0].innerHTML = "Goodbye world!";
}

ou, se você quiser fazer isso com menos verificação de erro e mais brevidade, isso pode ser feito em uma linha como esta:

document.getElementById("foo").getElementsByClassName("bar")[0].innerHTML = "Goodbye world!";

Na explicação:

1. Você pega o elemento id="foo".
2. Você encontra os objetos que estão contidos nesse objeto class="bar".
3. Isso retorna um nodeList do tipo matriz, para que você faça referência ao primeiro item nesse nodeList
4. Em seguida, você pode definir o innerHTMLitem para alterar seu conteúdo.

Advertências: alguns navegadores mais antigos não suportam getElementsByClassName(por exemplo, versões mais antigas do IE). Essa função pode ser ajustada no lugar, se estiver faltando.

É aqui que eu recomendo o uso de uma biblioteca que tenha suporte ao seletor CSS3 embutido, em vez de se preocupar com a compatibilidade do navegador (deixe outra pessoa fazer todo o trabalho). Se você quiser apenas uma biblioteca para fazer isso, o Sizzle funcionará muito bem. No Sizzle, isso seria feito assim:

Sizzle("#foo .bar")[0].innerHTML = "Goodbye world!";

O jQuery possui a biblioteca Sizzle integrada e no jQuery, seria:

$("#foo .bar").html("Goodbye world!");

Se isso funcionar no IE 7 ou inferior, lembre-se de que getElementsByClassName não existe em todos os navegadores. Por isso, você pode criar seu próprio getElementsByClassName ou pode tentar isso.

var fooDiv = document.getElementById("foo");

for (var i = 0, childNode; i <= fooDiv.childNodes.length; i ++) {
    childNode = fooDiv.childNodes[i];
    if (/bar/.test(childNode.className)) {
        childNode.innerHTML = "Goodbye world!";
    }
}

Função recursiva:

function getElementInsideElement(baseElement, wantedElementID) {
    var elementToReturn;
    for (var i = 0; i < baseElement.childNodes.length; i++) {
        elementToReturn = baseElement.childNodes[i];
        if (elementToReturn.id == wantedElementID) {
            return elementToReturn;
        } else {
            return getElementInsideElement(elementToReturn, wantedElementID);
        }
    }
}

A maneira mais fácil de fazer isso é:

function findChild(idOfElement, idOfChild){
  let element = document.getElementById(idOfElement);
  return element.querySelector('[id=' + idOfChild + ']');
}

ou melhor legível:

findChild = (idOfElement, idOfChild) => {
    let element = document.getElementById(idOfElement);
    return element.querySelector(`[id=${idOfChild}]`);
}

Você não deve usar document.getElementByID porque seu trabalho apenas para o lado do cliente controla quais IDs são corrigidos. Você deve usar o jquery como no exemplo abaixo.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>                                                                                                             
<div id="foo">
   <div class="bar"> 
          Hello world!
     </div>
</div>

usa isto :

$("[id^='foo']").find("[class^='bar']")

// do not forget to add script tags as above

se você quiser remover, editar qualquer operação, basta adicionar "." por trás e fazer as operações