Эффективный способ сохранения элементов DOM в объекте

Есть ли эффективный способ сохранения элементов DOM в переменной объекта, как это:Эффективный способ сохранения элементов DOM в объекте

http://img15.hostingpics.net/pics/357570example.png?

Цель состоит в том, чтобы сохранить некоторые элементы объекта DOM в переменной, чтобы иметь возможность добавлять атрибуты.

Фактически я могу использовать атрибуты данных в HTML5, но я предпочитаю использовать исключительно JavaScript (JQuery).

источник

2014-10-19 TyrionGraphiste

Вы можете просто сохранить коллекцию DOM Элементы в переменной.

Например,

var inputs = document.getElementsByTagName("input");

переменная inputs будет содержать живую коллекцию входных элементов вы можете обратиться позже для манипулирования.

Например, вы можете перебрать эту коллекцию и добавить класс CSS, используя простой цикл, как:

for(var i=0;i<inputs.length;i++){ 
    inputs[i].classList.add("newClass"); 
}

Для установки атрибута, вы можете использовать метод setAttribute().

Вы можете сделать то же самое в jquery, но изменится только синтаксис доступа к элементам.

Например,

var inputs = $("input");

Вы можете перебирать входы объекта JQuery, используя его each() метод как

inputs.each(function(){ 
    $(this).addClass("newClass"); 
});

Для установки атрибута к элементу с помощью JQuery, вы можете использовать его attr() метод ,

источник

2014-10-19 18:24:04

Да, я знаю этот путь. Но если я хочу сохранить каждый вход отдельно в объекте (в объекте) (для добавления некоторых атрибутов), как мне это сделать? – TyrionGraphiste

Можете ли вы уточнить, что вы подразумеваете под * сохранением каждого входа в объекте *? сам элемент является объектом. И вы можете использовать метод setAttribute() 'для добавления к нему атрибутов. –

Juste как здесь: http://img15.hostingpics.net/pics/357570example.png Представьте себе p и h1, как вход. «data1» и «data2» относятся к их родительскому объекту. Я хотел бы добавить некоторые данные по каждому элементу DOM с помощью JS. Возможно ли это? Чтобы сохранить элементы и динамически добавить некоторые данные. – TyrionGraphiste

Кажется мне, что вы ищете что-то вроде этого:

var foo = { 
    p: document.getElementById('some-id'), 
    h1: document.getElementById('some-other-id') 
}; 

foo.p.data1 = "something"; 
foo.p.data2 = "something else"; 

// etc...

Код выше сохраняет элементы, которые имеют идентификатор some-id и some-other-id в полях p и h1 объекта foo. Он также устанавливает поля data1 и data2 на foo.p. То же самое можно сделать и на foo.h1.

Обратите внимание, что если какой-либо другой код ищет элемент с идентификатором some-id, этот код будет видеть data1 и data2 на элементе. То есть поля, добавляемые вашим кодом, видны всем.

Современные браузеры допускают добавление произвольных полей к элементам DOM. Старые браузеры не обязательно будут принимать это. У меня нет списка браузера, который позволит это, и тех, которые не будут. Я бы посоветовал использовать что-то более выразительное, чем data1. В частности, такое поле должно быть достаточно конкретным, чтобы избежать столкновения имени. Когда я это сделаю, я префишу свои имена полей с именем моего приложения.

источник

2014-10-19 23:29:55 Louis

Привет. Благодарю за ваш ответ. Это то, что я хочу сделать, но динамически, то есть путем сканирования объекта, ищущего элементы, и размещения их в объектах javascript. Есть ли способ сделать это? – TyrionGraphiste

Хорошо, я нашел, как я мог бы сделать это, переходя с помощью конструктора объекта, как это:

function objectConstructor(element) { 
    this.element = element; 
    this.data1 = "string"; 
    this.data2 = "string"; 
}

В любом случае, спасибо за ваш ответ.

источник

2014-10-20 21:46:58 TyrionGraphiste

Эффективный способ сохранения элементов DOM в объекте

ответ

Смежные вопросы