Common getElementById, getElementsbyName, getElementsbytagname. Но иностранцы не были удовлетворены этими API, поэтому они создали getElementsbyclassname, а затем селектор jQuery появился немного по немного, и здесь упоминается только оригинальный выбор JS.
1.GetElementById
Это наиболее часто используемый селектор и расположен на ID:
пример:
var test = document.getElementById ("test"). Value; // Получить значение элемента с тестированием ID в документе и назначить значение изменению тестового лица
2. ЗАКРЫТИЯ БОЛЬШЕ
пример:
var test = document.getElementbyname ("test"); // Получить узел элемента, чье имя тест в документе и назначить его тестовой переменной.
3. Detelementsbytagname
пример:
var test = document.getElementsbytagname ("test"); // Получить узел элемента в документе с тестированием класса и назначить его для теста. , 7, 8 недоступно
4. GetElementsByClassName
Этот селектор не может быть найден в JS API, если вы хотите его использовать, вы должны определить метод самостоятельно. Найдите его, используя регулярные выражения, соответствующие элементы возвращаются в массиве. В Интернете много программистов, которые реализуют этот селектор, и ниже приведены два примера:
(1) Решение Ultimate GetelementsbyClassName, автором которого является Роберт Ниман, было реализовано в 2005 году. Можно видеть, что многие вещи от иностранцев прошли очень давно.
Кода -копия выглядит следующим образом:
// Все необходимы три параметра.
// IE6 - 4610 ~ 6109 миллисекунд, FF3.5 - 46 ~ 48 миллисекунд, Opera10 - 31 ~ 32 миллисекунд, хром - 23 ~ 26 миллисекунд,
// safari4 - 19 ~ 20 миллисекунд
Функция getElementsbyclassname (oelm, strtagname, strclassname) {
var arrelements = (strtagname == "*" && oelm.all)?
oelm.getelementsbytagname (strtagname);
var arrreturnelements = new Array ();
strclassname = strclassname.replace (//-/g, "//-");
var oregexp = new Regexp ("(^| // s)" + strclassname + "(// s | $)");
var oelement;
for (var i = 0; i <arrelements.length; i ++) {
oelement = arrelements [i];
if (oregexp.test (oelement.classname)) {
arrreturnelements.push (oelement);
}
}
возврат (Arrreturnelements)
}
(2) Предоставлено Дастином Диасом (автором «Паттернов проектирования JavaScript», но совместимость не так хороша, как вышеуказанное и не поддерживает IE5.
Кода -копия выглядит следующим образом:
// Последние два параметра надежны.
//Ff3.5 - 42 ~ 48 мс, Opera10 - 31 мс, хром - 22 ~ 25 мс, Safari4 - 18 ~ 19 мс.
var getElementsbyclass = function (searchclass, node, tag) {
var classelements = new Array ();
if (node == null)
node = документ;
if (Tag == null)
tag = '*';
var els = node.getelementsbytagname (Tag);
var elslen = els.length;
var pattern = new Regexp ("(^| // s)"+searchclass+"(// s | $)");
for (i = 0, j = 0; i <elslen; i ++) {
if (pattern.test (els [i] .classname)) {
ClassElements [j] = els [i];
J ++;
}
}
вернуть классификации;
}
------------------------------------------------------ ------------------------------------------------------ ---------------------------- ------------------------------------------ ------------------------------------------------------ ------------------------------------------------------ ------ -------------------------------------------- ------------------------------------------------------ ------------------------------------
Примечание. Это может представлять узел текущего элемента.
------------------------------------------------------ ------------------------------------------------------ ---------------------------- ------------------------------------------ ------------------------------------------------------ ------------------------------------------------------ ------ -------------------------------------------- ------------------------------------------------------ ------------------------------------
Вот несколько часто используемых методов использования точек знаний, таких как события:
Кода -копия выглядит следующим образом:
// отправить форму с тестированием ID
document.getElementById ("test"). Recod ();
// Установить границу с ID в качестве тестового элемента на 2 пикселя, твердый, красный
document.getElementById ("test"). style.border = "2px solid red";
// переместить или переместить элемент с помощью ID Test, чтобы изменить цвет фона
функциональный тест () {
document.getElementById ("test"). onmouseover = function () {document.getElementById ("test2"). style.backgroundcolor = "red"};
document.getElementbyId ("test"). onmouseout = function () {document.getElementById ("test2"). style.backgroundcolor = "blue"};
}
// количество элементов во всплывающем документе с тестированием имени
Функциональный тест ()
{
var test = document.getElementsbyname ("test");
оповещение (test.length);
}