как вставить html в div-класс [дубликат]

Вы можете завершить поток напрямую, используя объект stream, возвращенный обработчиком успеха, в getUserMedia. например

localMediaStream.stop()

video.src="" или null просто удалит источник из тега видео. Он не выпустит аппаратное обеспечение.

88
задан Taryn 22 March 2017 в 17:26
поделиться

8 ответов

Ваш код getElementById() работает, поскольку идентификаторы должны быть уникальными, и поэтому функция всегда возвращает ровно один элемент (или null, если ни один не найден).

Однако getElementsByClassName() , querySelectorAll() и другие методы getElementsBy* возвращают массивный набор элементов. Итерации над ним, как и с реальным массивом:

var elems = document.getElementsByClassName('myElement');
for(var i = 0; i < elems.length; i++) {
    elems[i].style.size = '100px';
}

Если вы предпочитаете что-то более короткое, рассмотрите использование jQuery :

$('.myElement').css('size', '100px');
108
ответ дан Makyen 17 August 2018 в 11:45
поделиться
  • 1
    Это также относится к <iframe>, который также является частью вашего домена – JMASTER B 1 September 2016 в 01:25
  • 2
    Это 2018 ... Просто создайте функцию обертки для querySelectorAll(), и у вас может быть хороший короткий код без большой зависимости от старой школы. qSA(".myElement").forEach(el => el.style.size = "100px") Возможно, оболочка получит обратный вызов. qSA(".myElement", el => el.style.size = "100px") – user 26 April 2018 в 20:40

Вы используете массив как объект, разница между getElementbyId и getElementsByClassName такова:

  • getElementbyId вернет вам объект.
  • getElementsByClassName вернет вам массив.

getElementsByClassName

Метод getElementsByClassName(classNames) принимает строку, содержащую неупорядоченный набор уникальных разделенных пробелами маркеры, представляющие классы. При вызове метод должен возвращать живой объект NodeList, содержащий все элементы документа, которые имеют все классы, указанные в этом аргументе, получив классы, разделив строку на пробелы. Если в аргументе нет токенов, тогда метод должен возвращать пустой NodeList.

https://www.w3.org/TR/2008/WD-html5 -20080610 / dom.html # getelementsbyclassname

getElementById

Метод getElementById () обращается к первому элементу с указанным id.

http://www.w3schools.com/jsref/met_doc_getelementbyid.asp

в вашем коде строки:

1- document.getElementsByClassName ('myElement'). Style.size = '100px';

НЕ будет работать, как ожидалось, потому что getElementByClassName вернет массив, и массив будет НЕ имеет свойство style, вы будете обращаться к каждому element, итерации их.

Вот почему функция getElementById работает на вас, эта функция вернет вам прямой объект, и поэтому вы сможет получить доступ к свойству style.

8
ответ дан Alvaro Joao 17 August 2018 в 11:45
поделиться

Он возвращает список, подобный массиву.

Вы делаете этот массив как пример

var el = getElementsByClassName("elem");
el = Array.prototype.slice.call(el); //this line
el[0].appendChild(otherElem);  
2
ответ дан atilkan 17 August 2018 в 11:45
поделиться

Следующее описание взято из этой страницы :

Метод getElementsByClassName () возвращает коллекцию всех элементов в документе с указанным именем класса, так как объект NodeList.

Объект NodeList представляет собой набор узлов. К узлам можно обращаться по номерам индексов. Индекс начинается с 0.

Совет. Вы можете использовать свойство length объекта NodeList для определения количества элементов с указанным именем класса, затем вы можете прокручивать все элементы и извлекать нужную информацию .

Итак, поскольку параметр getElementsByClassName принимает имя класса.

Если это ваше тело HTML:

<div id="first" class="menuItem"></div>
<div id="second" class="menuItem"></div>
<div id="third" class="menuItem"></div>
<div id="footer"></div>

то var menuItems = document.getElementsByClassName('menuItem') вернет коллекцию (а не массив) из трех верхних <div> s, поскольку они соответствуют заданному имени класса.

Затем вы можете перебирать эти узлы (<div> s в этот случай) с помощью:

for (var menuItemIndex = 0 ; menuItems.length ; menuItemIndex ++) {
   var currentMenuItem = menuItems[menuItemIndex];
   // do stuff with currentMenuItem as a node.
}

Подробнее о различиях между элементами и узлами см. в этой записи .

7
ответ дан Community 17 August 2018 в 11:45
поделиться

Вы можете получить один элемент, запустив

document.querySelector('.myElement').style.size = '100px';

, но он будет работать для первого элемента с классом .myElement.

Если вы хотите применить это для всех элементы с классом я предлагаю вам использовать

document.querySelectorAll('.myElement').forEach(function(element) {
    element.style.size = '100px';
});
2
ответ дан JJJ 17 August 2018 в 11:45
поделиться

ES6 предоставляет метод Array.from() , который создает новый экземпляр Array из объекта, подобного массиву или итерации.

let boxes = document.getElementsByClassName('box');

Array.from(boxes).forEach(v => v.style.background = 'green');
console.log(Array.from(boxes));
.box {
  width: 50px;
  height: 50px;
  margin: 5px;
  background: blue;
  display: inline-block;
}
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>

Как вы можете видеть внутри фрагмента кода, после использования функции Array.from() вы можете манипулировать каждым элементом.

Это же решение с использованием jQuery.

$('.box').css({'background':'green'});
.box {
  width: 50px;
  height: 50px;
  margin: 5px;
  background: blue;
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>

4
ответ дан kind user 17 August 2018 в 11:45
поделиться

С ES5 + (любой просматриваемый в настоящее время - 2017) вы должны иметь возможность делать

[].forEach.call(document.getElementsByClassName('answer'), function(el) {
    el.style.color= 'red';
});

-1
ответ дан Matas Vaitkevicius 17 August 2018 в 11:45
поделиться

В других словах

  • document.querySelector() выбирает только первый элемент указанного селектора. Поэтому он не выплевывает массив, это одно значение. Подобно document.getElementById(), который извлекает только ID-элементы, поскольку идентификаторы должны быть уникальными.
  • document.querySelectorAll() выбирает все элементы с указанным селектором и возвращает их в массиве. Похоже на document.getElementsByClassName() только для классов и document.getElementsByTagName().

Зачем использовать querySelector?

Используется просто для единственной цели легкость и краткость.

Зачем использовать getElement / sBy? *

Более быстрая производительность.

Почему это различие в производительности?

Оба способа выбора имеют целью создание NodeList для дальнейшего использования. querySelectors генерирует статический NodeList с селекторами, поэтому он должен быть сначала создан с нуля. getElement / sBy * немедленно адаптирует существующий живой NodeList текущего DOM.

Итак, когда использовать какой метод зависит от вас / вашего проекта / вашего устройства.

Infos

Демонстрация всех методов Документация NodeList Тест производительности

2
ответ дан Thielicious 17 August 2018 в 11:45
поделиться
Другие вопросы по тегам:

Похожие вопросы: