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

Ответ 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>

Ответ 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!";

Пояснение:

• Вы получаете элемент с id="foo".
• Затем вы найдете объекты, которые содержатся в этом объекте с class="bar".
• Это возвращает подобный массиву nodeList, поэтому вы ссылаетесь на первый элемент в этом узлеList
• Затем вы можете установить innerHTML этого элемента, чтобы изменить его содержимое.

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

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

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

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

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

Ответ 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!";
    }
}

Ответ 4

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

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

Ответ 5

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

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

Ответ 6

Вы не должны использовать document.getElementByID, потому что его работа только для элементов управления на стороне клиента, где ids исправлены. Вы должны использовать 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

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