Для JS я думаю, что каждый, кто новичок в этом, должен жаловаться: почему нет способа получить элементы через класс. Хотя более высокие версии браузеров теперь поддерживают функцию getElementsbyclassname (), она по -прежнему несовместима для более низких версий браузеров. Уходя из других библиотек, вам все равно приходится инкапсулировать метод самостоятельно.
Метод 1
функция getByclass1 (parent, cls) {var res = []; // массив, который хранит соответствующие результаты var ele = parent.getelementsbytagname ('*'); for (var i = 0; i <ele.length; i ++) {if (ele [i] .classname == cls) {res.push (ele [i]); }} return res;}Конечно, когда в классе есть только одно значение, приведенный выше метод в порядке, но когда возникают несколько значений, возникают проблемы.
<div> </div> <div> </div> <script> getbyclass1 (document, 'test'); // Получить только первый div </script>
Метод 2
Когда возникнут проблемы, мы постараемся улучшить. Для многоклассных имен мы можем использовать регулярное соответствие, чтобы увидеть, включено ли имя класса, поэтому появляется следующий метод написания:
функция getByclass2 (parent, cls) {var res = []; var reg = new Regexp ('// b' + cls + '// b', 'i'); // Match CLS является независимым словом var ele = parent.getelementsbytagname ('*'); for (var i = 0; i <ele.length; i ++) {if (reg.test (ele [i] .classname)) {res.push (ele [i]); }} return res;}Этот метод кажется в порядке и решил проблему GetByClass1 (). Я использовал его в течение долгого времени, но все еще есть скрытая ошибка. См. Следующий пример:
<div> </div> <div> </div> <div> </div> <script> getbyclass2 (документ, тест '); // Результат - первый Div и третий div </script>
Теоретически, мы должны получить только первый, но он отличается от того, что мы ожидали. Эта ошибка происходит от /b в следующем коде
var reg = new Regexp ('// b' + cls + '// b', 'i');Давайте сначала посмотрим на значение /b в обычном
/B - это специальный код, указанный регулярным выражением, представляющим начало или конец слова, то есть граница слова.
Проще говоря: /b - это соответствовать слову (от левой границы до правой границы).
Проблема лежит здесь. /B Стразывает всех других символов, кроме букв, чисел и подчеркивает как границы. Для приведенного выше примера значение третьего класса является тестовой коробкой. Когда /b совпадает, дефис (-) рассматривается как граница слова, поэтому он также соответствует третьему дел.
Метод 3
Поэтому нам нужно сделать дальнейшие улучшения при вышеуказанном методе. Здесь мы ссылаемся на метод, упомянутый на Stackoverflow:
Как получить элемент по классу в JavaScript?
Улучшенный код заключается в следующем:
функция getByclass3 (parent, cls) {var res = []; var reg = new Regexp ('' + cls + '', 'i'); // При сопоставлении CLS должны быть пробелы с обеих сторон var ele = parent.getelementsbytagname ('*'); for (var i = 0; i <ele.length; i ++) {if (reg.test ('' + ele [i] .classname + '' ')) {res.push (ele [i]); }} return res;}Этот метод отказывается от использования /B и использует пространства для соответствия границам. Сначала добавьте пробелы по обе стороны полученного значения класса, что гарантирует, что с обеих сторон каждого значения будут пробелы каждого значения, а затем используйте регулярное соответствие.
Не было обнаружено никакой проблемы с использованием этого метода, но при его использовании пространства в отдельных кавычках в методе не должны быть отброшены.
Метод 4
функция getByclass3 (parent, cls) {var res = []; var reg = new Regexp ('(^| // s)' + cls + '($ | // s)', 'i'); var ele = parent.getelementsbytagname ('*'); for (var i = 0; i <ele.length; i ++) {if (reg.test (ele [i] .classname)) {res.push (ele [i]); }} return res;}Пространства полностью обрабатываются с регулярностью, что устраняет проблему простых пробелов, а код более красивый и простой.
Так является ли этот метод относительно совершенным? На самом деле, это не так. Давайте посмотрим на лучшее решение.
Метод 5 (идеальное издание)
Как упоминалось в начале статьи, более высокие версии браузеров уже поддерживают метод getElementsbyclassname (). По причинам производительности обязательно будет лучше использовать собственные методы для поддерживаемых браузеров. Для нижних версий браузеров используйте вышеупомянутый метод четвертый.
function getbyclass (parent, cls) {if (parent.getelementsbyclassname) {return parent.getelementsbyclassname (cls); } else {var res = []; var reg = new Regexp ('' + cls + '', 'i') var ele = parent.getelementsbytagname ('*'); for (var i = 0; i <ele.length; i ++) {if (reg.test ('' + ele [i] .classname + '' ')) {res.push (ele [i]); }} return res; }}Конечно, метод 5 считается относительно хорошим решением. Если есть лучший метод, пожалуйста, оставьте сообщение, чтобы добавить его.