Имейте ссылку потока от successHandler
var streamRef;
var handleVideo = function (stream) {
streamRef = stream;
}
//this will stop video and audio both track
streamRef.getTracks().map(function (val) {
val.stop();
});
Ваш код 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');
Вы используете массив как объект, разница между getElementbyId
и getElementsByClassName
такова:
getElementbyId
вернет вам объект. getElementsByClassName
вернет вам массив. Метод
blockquote>getElementsByClassName(classNames)
принимает строку, содержащую неупорядоченный набор уникальных разделенных пробелами маркеры, представляющие классы. При вызове метод должен возвращать живой объектNodeList
, содержащий все элементы документа, которые имеют все классы, указанные в этом аргументе, получив классы, разделив строку на пробелы. Если в аргументе нет токенов, тогда метод должен возвращать пустой NodeList.https://www.w3.org/TR/2008/WD-html5 -20080610 / dom.html # getelementsbyclassname
getElementById
Метод getElementById () обращается к первому элементу с указанным id.
blockquote>http://www.w3schools.com/jsref/met_doc_getelementbyid.asp
в вашем коде строки:
1- document.getElementsByClassName ('myElement'). Style.size = '100px';
blockquote>НЕ будет работать, как ожидалось, потому что
getElementByClassName
вернет массив, и массив будет НЕ имеет свойствоstyle
, вы будете обращаться к каждомуelement
, итерации их.Вот почему функция
getElementById
работает на вас, эта функция вернет вам прямой объект, и поэтому вы сможет получить доступ к свойствуstyle
.
Он возвращает список, подобный массиву.
Вы делаете этот массив как пример
var el = getElementsByClassName("elem");
el = Array.prototype.slice.call(el); //this line
el[0].appendChild(otherElem);
Следующее описание взято из этой страницы :
Метод getElementsByClassName () возвращает коллекцию всех элементов в документе с указанным именем класса, так как объект NodeList.
Объект NodeList представляет собой набор узлов. К узлам можно обращаться по номерам индексов. Индекс начинается с 0.
Совет. Вы можете использовать свойство length объекта NodeList для определения количества элементов с указанным именем класса, затем вы можете прокручивать все элементы и извлекать нужную информацию .
blockquote>Итак, поскольку параметр
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. }
Подробнее о различиях между элементами и узлами см. в этой записи .
Вы можете получить один элемент, запустив
document.querySelector('.myElement').style.size = '100px';
, но он будет работать для первого элемента с классом .myElement.
Если вы хотите применить это для всех элементы с классом я предлагаю вам использовать
document.querySelectorAll('.myElement').forEach(function(element) {
element.style.size = '100px';
});
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>
С ES5 + (любой просматриваемый в настоящее время - 2017) вы должны иметь возможность делать
[].forEach.call(document.getElementsByClassName('answer'), function(el) {
el.style.color= 'red';
});
В других словах
document.querySelector()
выбирает только первый элемент указанного селектора. Поэтому он не выплевывает массив, это одно значение. Подобно document.getElementById()
, который извлекает только ID-элементы, поскольку идентификаторы должны быть уникальными. document.querySelectorAll()
выбирает все элементы с указанным селектором и возвращает их в массиве. Похоже на document.getElementsByClassName()
только для классов и document.getElementsByTagName()
.
Зачем использовать querySelector?
Используется просто для единственной цели легкость и краткость.
Зачем использовать getElement / sBy? *
Более быстрая производительность.
Почему это различие в производительности?
Оба способа выбора имеют целью создание NodeList для дальнейшего использования. querySelectors генерирует статический NodeList с селекторами, поэтому он должен быть сначала создан с нуля. getElement / sBy * немедленно адаптирует существующий живой NodeList текущего DOM.
Итак, когда использовать какой метод зависит от вас / вашего проекта / вашего устройства.
Infos
Демонстрация всех методов Документация NodeList Тест производительности
<iframe>
, который также является частью вашего домена – JMASTER B 1 September 2016 в 01:25querySelectorAll()
, и у вас может быть хороший короткий код без большой зависимости от старой школы.qSA(".myElement").forEach(el => el.style.size = "100px")
Возможно, оболочка получит обратный вызов.qSA(".myElement", el => el.style.size = "100px")
– user 26 April 2018 в 20:40