Получить элемент внутри элемента по классу и идентификатору - JavaScript

Question

Хорошо, я раньше занимался JavaScript, но самая полезная вещь, которую я написал, это переключатель стилей CSS.Так что я немного новичок в этом.Допустим, у меня есть HTML-код, подобный следующему:

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

Как бы я изменил «Hello world!»в "Прощай, мир!"?Я знаю, как работают document.getElementByClass и document.getElementById, но я бы хотел получить более конкретную информацию.Извините, если об этом уже спрашивали.

Answer 1

Ну, во-первых, вам нужно выбрать элементы с такой функцией, как getElementById.

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

getElementById возвращает только один узел, но getElementsByClassName возвращает список узлов.Поскольку существует только один элемент с таким именем класса (насколько я могу судить), вы можете просто получить первый (для этого и нужен [0] - он похож на массив).

Тогда, вы можете изменить HTML с .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>

Answer 2

Вы можете сделать это так:

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

или, если вы хотите сделать это с меньшей проверкой ошибок и большей краткостью, это можно сделать в одной строке, например:

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

Объяснение:

1. Вы получаете элемент с id="foo".
2. Затем вы находите объекты, содержащиеся в этом объекте, которые имеют class="bar".
3. Возвращает массив-подобный nodeList, поэтому вы ссылаетесь на первый элемент в этом nodeList
4. Затем вы можете установить innerHTML этого элемента, чтобы изменить его содержимое.

Предупреждения: некоторые старые браузеры не поддерживают getElementsByClassName (например, старые версии IE).Эта функция может быть вставлена ​​на место, если она отсутствует.

---

Здесь я рекомендую использовать библиотеку со встроенной поддержкой селектора CSS3, а не беспокоиться о совместимости браузера самостоятельно (пусть кто-то другой сделает всю работу).Если вам нужна библиотека, то Sizzle будет отлично работать.В Sizzle это будет сделано следующим образом:

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

---

jQuery имеет встроенную библиотеку Sizzle, а в jQuery это будет:

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

Answer 3

Если это должно работать в IE 7 или ниже, вы должны помнить, что getElementsByClassName существует не во всех браузерах.По этой причине вы можете создать свой собственный getElementsByClassName или попробовать это.

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!";
    }
}

Answer 4

Самый простой способ сделать это:

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

или лучше читаемый:

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

Answer 5

Рекурсивная функция:

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);
        }
    }
}

Answer 6

Не следует использовать document.getElementByID , потому что он работает только для клиентских элементов управления, чьи идентификаторы являются фиксированными. Вместо этого вы должны использовать jquery, как показано в примере ниже.

<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>

используйте это:

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

// do not forget to add script tags as above

Если вы хотите удалить, отредактируйте любую операцию, а затем просто добавьте "." позади и делать операции