Определяемые пользователем атрибуты на элементах HTML?
То, что я должен сделать, смочь сохранить некоторую часть данных об элементе.
Например, позволяет, говорят, что у меня есть элемент списка <литий>, и я хочу хранить некоторые данные об этом в элементе, как "Это элемент 1 от XYZ".
Единственным путем я знаю, как сделать это (который я не хочу делать, если я могу избежать), это:
<li id='item1'>
Item 1
<!--This is element 1 from XYZ-->
</li>
<script>
// read it something like this
var e = document.getElementById('item1').innerHTML;
// then parse out the comment, etc.
// --
</script>
То, что я действительно хочу, является чем-то вроде этого (который я вполне уверен, не возможно):
// example
<li id='item1' userdata='This is element 1 from XYZ'>Item 1</li>
.. конечно, я хотел бы смочь получить доступ к нему так или иначе через javasscript.
С другой стороны, там некоторый другой путь состоит в том, чтобы достигнуть этого?
Спасибо -
7 ответов
Вы можете получить доступ к своему атрибуту userdata = "" из JavaScript. Просто сделайте:
var theData = document.getElementById('item1').getAttribute('userdata');
Если вы хотите сделать это способом HTML5, тогда вы должны использовать атрибуты с именем data- *, например:
<li id='item1' data-foo='This is element 1 from XYZ'>Item 1</li>
, таким образом он будет по-прежнему действителен (т.е. с использованием недопустимого атрибута). Новые браузеры будут поддерживать доступ к атрибутам data- * следующим образом:
var theData = document.getElementById('item1').data.foo;
но я не думаю, что это реализовано достаточно широко, чтобы на них можно было положиться.
Если вы действительно хотите сохранить данные в комментарии (хотя я бы посоветовал вместо этого использовать маршрут атрибутов), вы можете сделать что-то вроде:
var e = document.getElementById('item1');
var n = e.firstChild;
while (n && n.nodeType != Node.COMMENT_NODE) {
n = n.nextSibling;
}
// now n.nodeValue will have the comment contents
(Нет гарантий, нравится ли IE что-либо из вышеперечисленного.)
Добавлять произвольные элементы в HTML нельзя. Можно, но он не будет действителен, а поведение не определено. Для таких вещей я обычно использую jQuery. Он имеет вызов data() , который может добавлять произвольные данные к элементу. Я считаю, что он кодирует его в атрибут класса, но реализация не важна.
Вы могли бы сделать это самостоятельно, но зачем беспокоиться? Легко ошибиться, вставляя неправильные символы, некорректно экранируя/не экранируя данные или непреднамеренно уничтожая informatino. Вместо этого просто сделайте:
$("#item1").data({source: "Thsi is element 1 from XYZ"});
Так как вы можете принимать добавление комментариев, лучшим решением будет добавление элемента span с тем содержимым, которое вы хотите...
<span class="data">.....</span>
вы определяете свой класс данных как display:none и он невидим ...
таким образом вы можете получить доступ к нему с помощью обычных методов обхода DOM...
Вы можете использовать функцию setUserData() и getUserData(). http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#Node3-setUserData
Например:
<html>
<head>
<script type="text/javascript">
function set(){
var a = document.getElementById("testElement");
a.setUserData("testData", "Some text", null);
}
function get(){
var a = document.getElementById("testElement");
alert(a.getUserData("testData"));
}
</script>
</head>
<body>
<span id="testElement"/>
<form>
<input type="button" value="setUserData" onclick="set()"/>
<input type="button" value="getUserData" onclick="get()"/>
</form>
</body>
Если вам не нужно, чтобы HTML был действительным, вы можете сделать любой атрибут, и вы можете получить доступ к нему в Javascript, вызвав метод getAttribute.
Вы можете добавить вложенный невидимый элемент с id и ваши данные в качестве innerText. Используйте атрибут стиля, чтобы убедиться, что он невидим.
Но все зависит от того, чего вы пытаетесь достичь. Не могли бы вы подробнее рассказать?
// Если вы хотите включить данные в html, почему бы не дать ему свой узел?
.hiddendata{
display: none
}
<li id= 'item1'>
Item 1
<span class= "hiddendata"> This is element 1 from XYZ</span>
</li>
function readHiddenData(who){
var A= [], n= who.firstChild;
while(n){
if(n.className= 'hiddendata'){
A[A.length]= n.textContent || n.innerText || '';
}
n= n.nextSibling;
}
return A;
}
function showHiddenData(who){
var n= who.firstChild;
while(n){
if(n.className= 'hiddendata'){
n.style.display= "inline"
}
n= n.nextSibling;
}
}