Я хочу помістити всі атрибути елемента Html у масив: як у мене є об'єкт jQuery, який html виглядає так:
<span name="test" message="test2"></span>Тепер одним із способів є використання описаного аналізатора xml тут , але тоді мені потрібно знати, як отримати html-код мого об’єкта.
інший спосіб - зробити це за допомогою jquery, але як? кількість атрибутів та імен є загальними.
Дякую
Btw: Я не можу отримати доступ до елемента за допомогою документа.getelementbyid або чогось подібного.
Відповіді:
Якщо ви просто хочете атрибутів DOM, можливо, простіше використовувати attributesсписок вузлів у самому елементі:
var el = document.getElementById("someId");
for (var i = 0, atts = el.attributes, n = atts.length, arr = []; i < n; i++){
arr.push(atts[i].nodeName);
}Зауважте, що це заповнює масив лише іменами атрибутів. Якщо вам потрібно значення атрибута, ви можете використовувати nodeValueвластивість:
var nodes=[], values=[];
for (var att, i = 0, atts = el.attributes, n = atts.length; i < n; i++){
att = atts[i];
nodes.push(att.nodeName);
values.push(att.nodeValue);
}getElementById-var el = document.getElementById($(myObj).attr("id"));
getметоду ... наприклад:var obj = $('#example').get(0);
Ви можете використовувати цей простий плагін як $ ('# some_id'). GetAttributes ();
(function($) {
$.fn.getAttributes = function() {
var attributes = {};
if( this.length ) {
$.each( this[0].attributes, function( index, attr ) {
attributes[ attr.name ] = attr.value;
} );
}
return attributes;
};
})(jQuery);Простий:
var element = $("span[name='test']");
$(element[0].attributes).each(function() {
console.log(this.nodeName+':'+this.nodeValue);});Attr.nodeValuevalueGoogle Chrome застаріло , вважає Google Chrome. Так це могло бути this.name + ':' + this.value. Інтерфейс Attr
Оскільки в IE7 elem.attributes перелічує всі можливі атрибути, не лише теперішні, ми повинні перевірити значення атрибута. Цей плагін працює у всіх основних браузерах:
(function($) {
$.fn.getAttributes = function () {
var elem = this,
attr = {};
if(elem && elem.length) $.each(elem.get(0).attributes, function(v,n) {
n = n.nodeName||n.name;
v = elem.attr(n); // relay on $.fn.attr, it makes some filtering and checks
if(v != undefined && v !== false) attr[n] = v
})
return attr
}
})(jQuery);Використання:
var attribs = $('#some_id').getAttributes();Сетер та Геттер!
(function($) {
// Attrs
$.fn.attrs = function(attrs) {
var t = $(this);
if (attrs) {
// Set attributes
t.each(function(i, e) {
var j = $(e);
for (var attr in attrs) {
j.attr(attr, attrs[attr]);
}
});
return t;
} else {
// Get attributes
var a = {},
r = t.get(0);
if (r) {
r = r.attributes;
for (var i in r) {
var p = r[i];
if (typeof p.nodeValue !== 'undefined') a[p.nodeName] = p.nodeValue;
}
}
return a;
}
};
})(jQuery);Використання:
// Setter
$('#element').attrs({
'name' : 'newName',
'id' : 'newId',
'readonly': true
});
// Getter
var attrs = $('#element').attrs();jQuery.attr.
jQuery.attrв сетері, але, мабуть, було б корисно використовувати і його в геттері.
.sliceдля перетворення attributesвластивості в масивattributesВластивість вузлів DOM є NamedNodeMap, який являє собою масив типу об'єкта.
Об'єкт, схожий на масив, - це об'єкт, який має lengthвластивість і назви властивостей якого перелічуються, але в іншому випадку має свої методи і не успадковуєArray.prototype
sliceМетод може бути використаний для перетворення масивів типу об'єктів в новий масив .
var elem = document.querySelector('[name=test]'),
attrs = Array.prototype.slice.call(elem.attributes);
console.log(attrs);<span name="test" message="test2">See console.</span>attrs, ви можете отримати доступ до імені атрибута з nameвластивістю на елементі.
Цей підхід добре працює, якщо вам потрібно отримати всі атрибути з ім'ям та значенням в об’єктах, повернених у масиві.
Приклад виводу:
[
{
name: 'message',
value: 'test2'
}
...
]function getElementAttrs(el) {
return [].slice.call(el.attributes).map((attr) => {
return {
name: attr.name,
value: attr.value
}
});
}
var allAttrs = getElementAttrs(document.querySelector('span'));
console.log(allAttrs);<span name="test" message="test2"></span>Якщо ви хочете лише масив імен атрибутів для цього елемента, ви можете просто зіставити результати:
var onlyAttrNames = allAttrs.map(attr => attr.name);
console.log(onlyAttrNames); // ["name", "message"]Roland Боуман «s відповідь кращий, простий Vanilla шлях. Я помітив деякі спроби jQ-роз'ємів, але вони мені просто не здалися "повними", тому я зробив свій власний. Єдиним недоліком поки що була неможливість отримати доступ до динамічно доданих attrs без прямого виклику elm.attr('dynamicAttr'). Однак це поверне всі природні атрибути об’єкта елемента jQuery.
Плагін використовує прості дзвінки в стилі jQuery:
$(elm).getAttrs();
// OR
$.getAttrs(elm);Ви також можете додати параметр другого рядка для отримання лише одного конкретного attr. Це насправді не потрібно для вибору одного елемента, як jQuery вже передбачає $(elm).attr('name'), однак моя версія плагіна дозволяє проводити кілька повернень. Так, наприклад, дзвінок, як
$.getAttrs('*', 'class');Це призведе до масиву []повернення об'єктів {}. Кожен об’єкт матиме вигляд:
{ class: 'classes names', elm: $(elm), index: i } // index is $(elm).index();;(function($) {
$.getAttrs || ($.extend({
getAttrs: function() {
var a = arguments,
d, b;
if (a.length)
for (x in a) switch (typeof a[x]) {
case "object":
a[x] instanceof jQuery && (b = a[x]);
break;
case "string":
b ? d || (d = a[x]) : b = $(a[x])
}
if (b instanceof jQuery) {
var e = [];
if (1 == b.length) {
for (var f = 0, g = b[0].attributes, h = g.length; f < h; f++) a = g[f], e[a.name] = a.value;
b.data("attrList", e);
d && "all" != d && (e = b.attr(d))
} else d && "all" != d ? b.each(function(a) {
a = {
elm: $(this),
index: $(this).index()
};
a[d] = $(this).attr(d);
e.push(a)
}) : b.each(function(a) {
$elmRet = [];
for (var b = 0, d = this.attributes, f = d.length; b < f; b++) a = d[b], $elmRet[a.name] = a.value;
e.push({
elm: $(this),
index: $(this).index(),
attrs: $elmRet
});
$(this).data("attrList", e)
});
return e
}
return "Error: Cannot find Selector"
}
}), $.fn.extend({
getAttrs: function() {
var a = [$(this)];
if (arguments.length)
for (x in arguments) a.push(arguments[x]);
return $.getAttrs.apply($, a)
}
}))
})(jQuery);;;(function(c){c.getAttrs||(c.extend({getAttrs:function(){var a=arguments,d,b;if(a.length)for(x in a)switch(typeof a[x]){case "object":a[x]instanceof jQuery&&(b=a[x]);break;case "string":b?d||(d=a[x]):b=c(a[x])}if(b instanceof jQuery){if(1==b.length){for(var e=[],f=0,g=b[0].attributes,h=g.length;f<h;f++)a=g[f],e[a.name]=a.value;b.data("attrList",e);d&&"all"!=d&&(e=b.attr(d));for(x in e)e.length++}else e=[],d&&"all"!=d?b.each(function(a){a={elm:c(this),index:c(this).index()};a[d]=c(this).attr(d);e.push(a)}):b.each(function(a){$elmRet=[];for(var b=0,d=this.attributes,f=d.length;b<f;b++)a=d[b],$elmRet[a.name]=a.value;e.push({elm:c(this),index:c(this).index(),attrs:$elmRet});c(this).data("attrList",e);for(x in $elmRet)$elmRet.length++});return e}return"Error: Cannot find Selector"}}),c.fn.extend({getAttrs:function(){var a=[c(this)];if(arguments.length)for(x in arguments)a.push(arguments[x]);return c.getAttrs.apply(c,a)}}))})(jQuery);Набагато більш стислі способи зробити це:
var element = document.querySelector(/* … */);
[].slice.call(element.attributes).map(function (attr) { return attr.nodeName; });[...document.querySelector(/* … */).attributes].map(attr => attr.nodeName);document.querySelector()повертає перший елемент у документі, що відповідає вказаному селектору.Element.attributesповертає об'єкт NamedNodeMap, що містить призначені атрибути відповідного елемента HTML.[].map() створює новий масив з результатами виклику наданої функції на кожному елементі викликового масиву.Чи допомагає це?
Це властивість повертає всі атрибути елемента в масив для вас. Ось приклад.
window.addEventListener('load', function() {
var result = document.getElementById('result');
var spanAttributes = document.getElementsByTagName('span')[0].attributes;
for (var i = 0; i != spanAttributes.length; i++) {
result.innerHTML += spanAttributes[i].value + ',';
}
});<span name="test" message="test2"></span>
<div id="result"></div>Щоб отримати атрибути багатьох елементів і впорядкувати їх, я пропоную зробити масив усіх елементів, через які ви хочете пройти цикл, а потім створити масив підсилки для всіх атрибутів, пропущених циклами.
Це приклад сценарію, який прокрутить зібрані елементи та виведе два атрибути. Цей сценарій передбачає, що завжди буде два атрибути, але ви можете легко виправити це за допомогою подальшого відображення.
window.addEventListener('load',function(){
/*
collect all the elements you want the attributes
for into the variable "elementsToTrack"
*/
var elementsToTrack = $('body span, body div');
//variable to store all attributes for each element
var attributes = [];
//gather all attributes of selected elements
for(var i = 0; i != elementsToTrack.length; i++){
var currentAttr = elementsToTrack[i].attributes;
attributes.push(currentAttr);
}
//print out all the attrbute names and values
var result = document.getElementById('result');
for(var i = 0; i != attributes.length; i++){
result.innerHTML += attributes[i][0].name + ', ' + attributes[i][0].value + ' | ' + attributes[i][1].name + ', ' + attributes[i][1].value +'<br>';
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span name="test" message="test2"></span>
<span name="test" message="test2"></span>
<span name="test" message="test2"></span>
<span name="test" message="test2"></span>
<span name="test" message="test2"></span>
<span name="test" message="test2"></span>
<span name="test" message="test2"></span>
<div name="test" message="test2"></div>
<div name="test" message="test2"></div>
<div name="test" message="test2"></div>
<div name="test" message="test2"></div>
<div id="result"></div>Кожна відповідь тут відсутня найпростішого рішення за допомогою getAttributeNames елемента !
Він отримує імена всіх поточних атрибутів елемента як звичайний масив, який ви можете потім звести до приємного об'єкта ключів / значень.
const getAllAttributes = el => el
.getAttributeNames()
.reduce((obj, name) => ({
...obj,
[name]: el.getAttribute(name)
}), {})
console.log(getAllAttributes(document.querySelector('div')))<div title="hello" className="foo" data-foo="bar"></div>Уявіть, що у вас є HTML-елемент, як показано нижче:
<a class="toc-item"
href="/books/n/ukhta2333/s5/"
id="book-link-29"
>
Chapter 5. Conclusions and recommendations
</a>Один із способів отримати всі його атрибути - це перетворити їх у масив:
const el = document.getElementById("book-link-29")
const attrArray = Array.from(el.attributes)
// Now you can iterate all the attributes and do whatever you need.
const attributes = attrArray.reduce((attrs, attr) => {
attrs !== '' && (attrs += ' ')
attrs += `${attr.nodeName}="${attr.nodeValue}"`
return attrs
}, '')
console.log(attributes)А нижче - рядок, який ви отримаєте (із прикладу), який включає всі атрибути:
class="toc-item" href="/books/n/ukhta2333/s5/" id="book-link-29"Спробуйте щось подібне
<div id=foo [href]="url" class (click)="alert('hello')" data-hello=world></div>а потім отримати всі атрибути
const foo = document.getElementById('foo');
// or if you have a jQuery object
// const foo = $('#foo')[0];
function getAttributes(el) {
const attrObj = {};
if(!el.hasAttributes()) return attrObj;
for (const attr of el.attributes)
attrObj[attr.name] = attr.value;
return attrObj
}
// {"id":"foo","[href]":"url","class":"","(click)":"alert('hello')","data-hello":"world"}
console.log(getAttributes(foo));для масиву використання атрибутів
// ["id","[href]","class","(click)","data-hello"]
Object.keys(getAttributes(foo))Дуже просто. Вам просто потрібно перенести елемент атрибутів і просунути їх nodeValues в масив:
let att = document.getElementById('id');
let arr = Array();
for (let i = 0; i < att.attributes.length; i++) {
arr.push(att.attributes[i].nodeValue);
}Якщо потрібно ім'я атрибуту, ви можете замінити 'nodeValue' на 'nodeName'.
let att = document.getElementById('id');
let arr = Array();
for (let i = 0; i < att.attributes.length; i++) {
arr.push(att.attributes[i].nodeName);
}Атрибути для перетворення об'єктів
* Потрібно: лодаш
function getAttributes(element, parseJson=false){
let results = {}
for (let i = 0, n = element.attributes.length; i < n; i++){
let key = element.attributes[i].nodeName.replace('-', '.')
let value = element.attributes[i].nodeValue
if(parseJson){
try{
if(_.isString(value))
value = JSON.parse(value)
} catch(e) {}
}
_.set(results, key, value)
}
return results
}Це перетворить усі атрибути html в вкладений об'єкт
Приклад HTML: <div custom-nested-path1="value1" custom-nested-path2="value2"></div>
Результат: {custom:{nested:{path1:"value1",path2:"value2"}}}
Якщо для parseJson встановлено значення true json, вони будуть перетворені на об'єкти
У JavaScript:
var attributes;
var spans = document.getElementsByTagName("span");
for(var s in spans){
if (spans[s].getAttribute('name') === 'test') {
attributes = spans[s].attributes;
break;
}
}Щоб отримати доступ до імен та значень атрибутів:
attributes[0].nodeName
attributes[0].nodeValue