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

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

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

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

6 83
javascript getelementbyid getelementsbyclassname

6 ответов:

Ну, сначала вам нужно выбрать элементы с функцией, как 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>
153

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

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, поэтому вы ссылаетесь на первый элемент в этом списке_узлов
  4. затем вы можете установить innerHTML этого пункта, чтобы изменить его содержимое.

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

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

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

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

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

Если это должно работать в 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);
        }
    }
}
3

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

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

вы не должны использовать документ.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

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

-3