При разработке веб -страницы во многих случаях нам нужно управлять элементами с одним именем класса, то есть элементами с одним и тем же классом. Вчера я сдал письменный тест и не ответил на связанный вопрос:
JavaScript получает узел с тестом класса на странице
Поэтому я собрал некоторую соответствующую информацию и перечислил два метода, которые, я думаю, лучше. Недостатки также необходимы. Я надеюсь, что все будут критиковать и исправить их. Если у вас есть лучший способ, я надеюсь, что вы сможете поделиться этим.
Решение 1 Решение Джереми Кеута
Дядя Джереми Кейт рассказал о методе GetElementsByclass в третьем и четвертом разделе книги «JavaScript Dom Programming Art» (2-е издание) (английский: DOM Scripting Web Design с JavaScript и моделью объекта документов) и рассказал о том, как применить этот метод в браузерах, которые не поддерживают эту собственность (IE6, IE7 и IE IE8, Let's Let's LetSe). Выдержки здесь, и в некоторых местах есть модификации.
В HTML5 DOM был добавлен новый метод, чтобы позволить нам получить доступ к элементам через имя класса в атрибуте класса: GetElmentsByClassName. Поскольку метод является относительно новым, некоторые реализации DOM еще не имеют его, поэтому будьте осторожны при его использовании. Давайте сначала посмотрим, что может нам помочь этот метод, а затем обсудим, как надежно использовать этот метод.
Подобно методу getElmentsbytagname, GetElementsbyClassName также принимает только один параметр, который является именем класса:
Кода -копия выглядит следующим образом:
getElementsbyclassname (класс)
Возвратное значение этого метода также аналогично getElementsbytagname, оба представляют собой массив элементов с одним именем класса. Следующая строка кода возвращает массив, содержащий все элементы названия класса «Продажа»:
Кода -копия выглядит следующим образом:
document.getelementsbyclassname ("sale")
Используйте этот метод, чтобы найти элементы с несколькими именами классов. Чтобы указать несколько имен классов, просто разделить имена классов с пробелами в параметрах строки. Например, добавьте следующую строку кода в тег <Script>:
Кода -копия выглядит следующим образом:
Alert (document.getElementsbyClassName («Продажа важна»). Длина);
Полный код
Кода -копия выглядит следующим образом:
<! Doctype html>
<html>
<голова>
<meta charset = "utf-8">
<название> Список покупок </title>
</head>
<тело>
<h1> Что купить </h1>
<p> Не забудьте купить этот материал. </p>
<ul id = "покупка">
<li> тонкая фасоль </li>
<li> Сыр </li>
<li> Молоко </li>
</ul>
<Скрипт>
Alert (document.getElementsbyClassName («Продажа важна»). Длина);
</script>
</body>
</html>
Вы увидите 1 в блоке предупреждения, указывающий, что только один элемент соответствует, потому что только один элемент имеет имена «важные» и «продажи». Обратите внимание, что даже в атрибуте класса элемент порядок имен классов является «продажей важной», а не «важная продажа», указанная в параметре, он все равно будет соответствовать элементу. Мало того, что фактический порядок имен классов не имеет значения, это не имеет значения, даже если у элементов больше имен классов. Как и в использовании getElmentsbytagname, вы также можете использовать getElementsbyclassname и getElementbyid в комбинации. Если вы хотите знать, сколько имен классов содержат элементы тестовых списков в элементе с покупкой ID, вы можете сначала найти этот объект, а затем вызовать getElementsbyclassname:
Кода -копия выглядит следующим образом:
var Shopping = document.getElementById ("покупка");
var sales = shopping.getelementsbyclassname ("sale");
Таким образом, массив продаж содержит только элементы с классом «Продажи», расположенным в списке «покупки». Запустите следующую строку кода, и вы увидите, что массив продаж содержит два пункта:
Кода -копия выглядит следующим образом:
предупреждение (sales.length);
Этот метод getElmentsbyclassname очень полезен, но только новые браузеры (Safari 3.1, Chorme, Firefox 3 и Opera 9.5 или выше) поддерживают его. Чтобы восполнить этот недостаток, программисты сценариев DOM должны использовать существующие методы DOM для реализации своих собственных getElementsbyclassname, что немного похоже на подарок совершеннолетия. В большинстве случаев их процесс реализации примерно похож на следующие getElementsbyclassname, который может быть применен к новым и старым браузерам.
Кода -копия выглядит следующим образом:
функция getElementsbyclassname (node, classname) {
if (node.getelementsbyclassname) {
return node.getelementsbyclassname (classname);
}еще{
var results = [];
varelems = node.getElementsbytagname ("*");
for (var i = 0; i <elems.length; i ++) {
if (elems [i] .classname.indexof (classname)! =-1) {
Результаты [Results.length] = elems [i];
}
}
вернуть результаты;
}
}
Функция getElementsbyclassname принимает два параметра. Первый узел представляет отправную точку поиска в дереве DOM, а второе имя класса - это имя класса, которое нужно искать. Если соответствующая функция getElementsbyclassname уже существует на входящем узле, то эта новая функция непосредственно возвращает соответствующий список узлов. Если функция getElementsbyclassname не существует, новая функция будет проходить через все теги и искать элементы с соответствующим именем класса.
Недостатком этого метода является то, что он не применяется к нескольким именам классов.
Если вы используете эту функцию для моделирования предыдущей операции получения списка покупок, вы можете написать ее так:
Кода -копия выглядит следующим образом:
var Shopping = document.getElementById ("покупка");
var sales = shopping.getelementsbyclassname (покупки, «тест»);
console.log (продажи);
Следовательно, чтобы решить проблему в начале статьи, используемый код выглядит следующим образом:
Кода -копия выглядит следующим образом:
<! Doctype html>
<html>
<голова>
<meta charset = "utf-8">
<название> Список покупок </title>
</head>
<тело>
<h1> Что купить </h1>
<p> Не забудьте купить этот материал. </p>
<ul id = "покупка">
<li> тонкая фасоль </li>
<li> Сыр </li>
<li> Молоко </li>
</ul>
<Скрипт>
функция getElementsbyclassname (node, classname) {
if (node.getelementsbyclassname) {
return node.getelementsbyclassname (classname);
}еще{
var results = [];
varelems = node.getElementsbytagname ("*");
for (var i = 0; i <elems.length; i ++) {
if (elems [i] .classname.indexof (classname)! =-1) {
Результаты [Results.length] = elems [i];
}
}
вернуть результаты;
}
}
var body = document.getelementsbytagname ("body") [0];
var sales = getElementsbyclassname (body, "sales");
console.log (продажи);
</script>
</body>
</html>
Решение 2 Роберт Ниман Решение
Есть много способов поиска сопоставления элементов DOM, но не многие по -настоящему эффективны. Одним из недостатков метода дяди Джереми Кеута является то, что его нельзя использовать для нескольких имен классов. В 2008 году Роберт Ниман предоставил свое собственное решение в статье «Ultimate Getelementsbyclassname», Anno 2008. В 2005 году дядя Роберт уже выполнил свою функцию Getelementsbyclassname. В 2008 году он изменил некоторый код и добавил много новых функций:
1. Если текущий браузер поддерживает функцию getElementsbyclassname, нативная функция называется;
2. Если текущий браузер поддерживает его, используйте XPath; // xiaofeiyu: мощный способ найти документы XML, построенные в браузере, но поддержка браузера не объединяется
3. Поддерживает поиск нескольких имен классов независимо от порядка;
4. Возвращает настоящий массив узлов, а не родной гладкий. // xiaofeiyu: Нативный метод getelementsbyclassname Возвращает объект Nodelist, который очень похож на массив, со свойствами длины и чисел, но это не массив, и вы не можете использовать методы, уникальные для всплеска и толка Методы, где объекты Nodelist могут быть преобразованы в массивы:
Кода -копия выглядит следующим образом:
mylist = array.prototype.slice.call (mynodelist)
Это метод дяди Роберта. Я не понимаю кое -что, что мне еще предстоит понять. Я обновлю его после того, как изучу их.
Кода -копия выглядит следующим образом:
/*
Разработано Робертом Ниманом, http://www.robertnyman.com
Код/лицензирование: http://code.google.com/p/getelementsbyclassname/
*/
var getelementsbyclassname = function (classname, Tag, elm) {
if (document.getelementsbyclassname) {
getElementsbyclassname = function (classname, Tag, elm) {
ELM = ELM || документ;
var elements = elm.getelementsbyclassname (classname),
nodename = (Tag)? new Regexp ("// b" + Tag + "// b", "i"): null,
returnElements = [],
Текущий;
for (var i = 0, il = elements.length; i <il; i+= 1) {
current = elements [i];
if (! nodeName || nodeName.test (current.nodename)) {
returnElements.push (current);
}
}
возвращаемые возвраты;
};
}
иначе if (document.evaluate) {
getElementsbyclassname = function (classname, Tag, elm) {
TAG = TAG || "*";
ELM = ELM || документ;
var classes = classname.split ("" "),
classeStocheck = "",
xhtmlnamespace = "http://www.w3.org/1999/xhtml",
namespaceresolver = (document.documentelement.namespaceuri === xhtmlnamespace)? xhtmlnamespace: null,
returnElements = [],
элементы,
узел;
for (var j = 0, jl = classe.length; j <jl; j+= 1) {
classeStocheck + = "[Содержит (concat ('', @class, ''), '" + classes [j] + "')]";
}
пытаться {
elements = document.evaluate (".//" + Tag + classeStocheck, elm, namespaceresolver, 0, null);
}
поймать (e) {
elements = document.evaluate (".//" + Tag + classeStocheck, elm, null, 0, null);
}
while ((node = elements.iteratenext ())) {
returnElements.push (узел);
}
возвращаемые возвраты;
};
}
еще {
getElementsbyclassname = function (classname, Tag, elm) {
TAG = TAG || "*";
ELM = ELM || документ;
var classes = classname.split ("" "),
classeStoCheck = [],
elements = (Tag === "*" && elm.all)? elm.all: elm.getelementsbytagname (Tag),
Текущий,
returnElements = [],
соответствовать;
for (var k = 0, kl = class.length; k <kl; k+= 1) {
classestocheck.push (new regexp ("(^| // s)" + classes [k] + "(// s | $)"));
}
для (var l = 0, ll = elements.length; l <ll; l+= 1) {
current = elements [l];
match = false;
for (var m = 0, ml = classestocheck.length; m <ml; m+= 1) {
match = classeStocheck [m] .test (current.classname);
if (! совпадать) {
перерыв;
}
}
if (match) {
returnElements.push (current);
}
}
возвращаемые возвраты;
};
}
return getElementsbyclassname (ClassName, Tag, ELM);
};