Предисловие
Alibaba, интерфейс-интернет-интерфейсы, сдам онлайн-экзамен. Действительно, я хотел бы добавить немного знаний к новичке. Таким образом, у Байду и Google были предыдущие письменные тесты на фронт-энде-тестовом вопросе для набора в кампусе Алибабы, и они чувствовали, что они действительно презирают и не могли их понять. Ах, веб-фронт Ribaba-это письменный тест в Интернете.
Когда я увидел этот вопрос, я почувствовал, что я действительно должен инкапсулировать некоторые из ваших широко используемых методов, как jQuery. Некоторые методы сделаны для достижения совместимости браузера или классов инструментов, которые действительно полезны для будущего развития.
HTML
Ради объяснения, давайте сначала записать HTML
Кода -копия выглядит следующим образом:
<p> Найди меня </p>
<div> Также найдите меня </div>
Мы пропустили CSS.
Методы реализации
1 getElementsbyclassname
Кода -копия выглядит следующим образом:
console.log (document.getelementsbyclassname ("a"));
console.log (document.getelementsbyclassname ("ab"));
Появляются результаты (Firefox 27.0)
Действительно, я думаю, что этот метод должен быть в состоянии решить вышеупомянутую проблему, но, посмотрев на его совместимость, я думаю, что было бы лучше найти другой метод.
2 Queryselectorall
Кода -копия выглядит следующим образом:
console.log (document.queriselectorall (".a"));
console.log (document.queryselectorall (".b, .a"));
Посмотрим, каков результат? В чем разница от вышеизложенного?
Результат второго отличается.
На самом деле, совместимость этого метода не очень хороша
Основываясь на вышеупомянутых проблемах совместимости (в конце концов, я все еще объясняю большинство китайского браузера IE6/7/8), я мог бы сделать способ достичь этого сам.
3 Querynodesbyclass
Я думаю, что мне нужно сначала поговорить о своих идеях
(1) Сначала получить всю страницу
(2) Итерация через каждый узел и получить его строку класса
(3) Управлять строкой ClassName, сначала разделите ее на массив с пробелами, затем используйте объект, чтобы установить его клавишу на каждый элемент массива, затем соответствующее значение верно
(4) Задача теперь основана на передаваемых вами параметрах (например, один параметр - «селектор», два - «SELECTOR_1 SELECTER_2» и т. Д.), А затем конвертируйте его в массив, и каждый элемент массива является Используется как ранее, значение ключа объекта, соответствующего строке класса в нашем узле раньше, если он соответствует, это правда, а если это не так, это не определен.
Теперь мы даем наш код
Кода -копия выглядит следующим образом:
функция stringToObj (string) {
var arr = string.split ("") .sort ();
var result = {};
для (var i = arr.length-1; arr [i]; i-) {
результат [arr [i]] = true;
}
результат возврата;
}
Кода -копия выглядит следующим образом:
функция stringToarray (string) {
var arr = string.split ("") .sort ();
var result = [];
для (var i = arr.length-1; arr [i]; i-) {
result.push (arr [i]);
}
результат возврата;
}
Кода -копия выглядит следующим образом:
функция QueryNodesbyClass (className) {
// Мысли (1)
var all = document.getElementsbytagname ("*"), len = all.length, result = [];
var cname = stringToarray (classname); // Мысли (4)
для (var i = 0; i <len; i ++) {// Передача соответствующих идей каждого узла (2)
// Соответствующая идея (3), то есть роль метода StringToObj
var dom_cname = stringToObj (All [i] .className), cname_len = cname.length;
for (var j = 0; j <cname_len; j ++) {
if (! dom_cname [cname [j]])
перерыв;
}
if (j == cname_len)
{
result.push (все [i]);
}}
результат возврата;
}