Html öğesindeki tüm öznitelikleri bir diziye koymak istiyorum: html şöyle görünüyor bir jQuery nesnesi var gibi:
<span name="test" message="test2"></span>şimdi bir yolu açıklanan xml ayrıştırıcı kullanmaktır burada , ama sonra nasıl benim nesne html kodu almak için bilmek gerekir.
diğer yol jquery ile yapmak, ama nasıl? özniteliklerin sayısı ve adları geneldir.
Teşekkürler
Btw: Öğeye document.getelementbyid veya benzeri bir şeyle erişemiyorum.
Yanıtlar:
Sadece DOM niteliklerini istiyorsanız, muhtemelen attributesöğenin kendisindeki düğüm listesini kullanmak daha kolaydır :
var el = document.getElementById("someId");
for (var i = 0, atts = el.attributes, n = atts.length, arr = []; i < n; i++){
arr.push(atts[i].nodeName);
}Bunun diziyi yalnızca özellik adlarıyla doldurduğunu unutmayın. Özellik değerine ihtiyacınız varsa, özelliği kullanabilirsiniz 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);
}getElementByIdvar el = document.getElementById($(myObj).attr("id"));
getyöntemle alabilirsiniz ... örneğin:var obj = $('#example').get(0);
Bu basit eklentiyi $ ('# some_id') olarak kullanabilirsiniz. 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);Basit:
var element = $("span[name='test']");
$(element[0].attributes).each(function() {
console.log(this.nodeName+':'+this.nodeValue);});Attr.nodeValuevalueGoogle Chrome lehine kullanımdan kaldırıldı , diyor. Yani bu olabilir this.name + ':' + this.value. Attr Arayüzü
IE7'de elem.attributes, yalnızca mevcut olanları değil tüm olası özellikleri listelediğinden, özellik değerini test etmemiz gerekir. Bu eklenti tüm büyük tarayıcılarda çalışır:
(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);Kullanımı:
var attribs = $('#some_id').getAttributes();Setter ve Getter!
(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);kullanın:
// Setter
$('#element').attrs({
'name' : 'newName',
'id' : 'newId',
'readonly': true
});
// Getter
var attrs = $('#element').attrs();jQuery.attr.
jQuery.attrayarlayıcıda kullandığınızı görüyorum , ancak muhtemelen alıcıda da kullanmanız faydalı olacaktır.
.slicedönüştürmek için kullanınattributesattributesDOM düğüm tesisinde olan NamedNodeMapbir dizi benzer bir objeye olan.
Dizi benzeri bir nesne, bir lengthözelliğe sahip olan ve özellik adları numaralandırılan, ancak başka şekilde kendi yöntemlerine sahip olan veArray.prototype
sliceYöntem yeni bir Dizisine Dizi benzeri nesneleri dönüştürmek için kullanılabilir .
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özellik ile özniteliğin adına erişebilirsiniz name.
Bir dizide döndürülen nesnelerde ad ve değer içeren tüm öznitelikleri almanız gerekiyorsa bu yaklaşım iyi çalışır.
Örnek çıktı:
[
{
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>Bu öğe için yalnızca bir dizi özellik adı istiyorsanız, sonuçları yalnızca eşleyebilirsiniz:
var onlyAttrNames = allAttrs.map(attr => attr.name);
console.log(onlyAttrNames); // ["name", "message"]Roland Bouman 'ın cevabı en iyi, basit Vanilya yoludur. JQ fişleri bazı girişimler fark ettim, ama onlar sadece bana "tam" görünmüyordu, bu yüzden kendi yaptı. Şimdiye kadar tek aksilik, doğrudan aramadan dinamik olarak eklenen attr'lere erişemedi elm.attr('dynamicAttr'). Ancak, bu bir jQuery element nesnesinin tüm doğal niteliklerini döndürür.
Eklenti basit jQuery tarzı çağrı kullanır:
$(elm).getAttrs();
// OR
$.getAttrs(elm);Ayrıca yalnızca belirli bir attr elde etmek için ikinci bir dize parametresi ekleyebilirsiniz. Bu, jQuery'nin zaten sağladığı gibi, bir öğe seçimi için gerçekten gerekli değildir $(elm).attr('name'), ancak, bir eklenti sürümüm birden fazla dönüşe izin veriyor. Yani, örneğin,
$.getAttrs('*', 'class');[]Nesnelerin bir dizi döndürülmesine neden olur {}. Her nesne şöyle görünecektir:
{ 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);Bunu yapmanın çok daha kısa yolları:
var element = document.querySelector(/* … */);
[].slice.call(element.attributes).map(function (attr) { return attr.nodeName; });[...document.querySelector(/* … */).attributes].map(attr => attr.nodeName);document.querySelector()belgedeki belirtilen seçiciyle eşleşen ilk Öğeyi döndürür .Element.attributeskarşılık gelen HTML öğesinin atanmış niteliklerini içeren bir NamedNodeMap nesnesi döndürür .[].map() arama dizisindeki her öğede sağlanan bir işlevi çağırmanın sonuçlarıyla yeni bir dizi oluşturur.Bu yardımcı olur mu?
Bu özellik, bir öğenin tüm niteliklerini sizin için bir diziye döndürür. İşte bir örnek.
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>Birçok öğenin özniteliklerini almak ve bunları düzenlemek için, döngü yapmak istediğiniz tüm öğelerin bir dizisini oluşturmanızı ve daha sonra döngüdeki her öğenin tüm öznitelikleri için bir alt dizi oluşturmanızı öneririm.
Bu, toplanan öğeler arasında döngü yapacak ve iki nitelik yazdıracak bir komut dosyası örneğidir. Bu komut dosyası her zaman iki özellik olacağını varsayar, ancak bunu daha fazla eşleme ile kolayca düzeltebilirsiniz.
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>Buradaki her cevap getAttributeNames element yöntemini kullanarak en basit çözümü kaçırıyor !
Öğenin geçerli özniteliklerinin adlarını normal bir Dizi olarak alır ve daha sonra güzel bir anahtar / değer nesnesine indirgeyebilirsiniz.
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>Aşağıdaki gibi bir HTML öğeniz olduğunu düşünün:
<a class="toc-item"
href="/books/n/ukhta2333/s5/"
id="book-link-29"
>
Chapter 5. Conclusions and recommendations
</a>Tüm niteliklerini almanın bir yolu onları bir diziye dönüştürmektir:
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)Ve aşağıda, tüm özellikleri içeren (örnekten) alacağınız dize aşağıdadır:
class="toc-item" href="/books/n/ukhta2333/s5/" id="book-link-29"Böyle bir şey dene
<div id=foo [href]="url" class (click)="alert('hello')" data-hello=world></div>ve sonra tüm özellikleri al
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));özellik dizisi için
// ["id","[href]","class","(click)","data-hello"]
Object.keys(getAttributes(foo))Çok basit. Öznitelikler öğesinin üzerinde döngü yapmanız ve düğüm değerlerini bir diziye aktarmanız yeterlidir:
let att = document.getElementById('id');
let arr = Array();
for (let i = 0; i < att.attributes.length; i++) {
arr.push(att.attributes[i].nodeValue);
}Özniteliğin adını istiyorsanız, 'nodeName' yerine 'nodeValue' ifadesini değiştirebilirsiniz.
let att = document.getElementById('id');
let arr = Array();
for (let i = 0; i < att.attributes.length; i++) {
arr.push(att.attributes[i].nodeName);
}Nesne dönüşümüne ilişkin öznitelikler
* Gerektirir: lodash
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
}Bu, tüm html özniteliklerini iç içe bir nesneye dönüştürür
Örnek HTML: <div custom-nested-path1="value1" custom-nested-path2="value2"></div>
Sonuç: {custom:{nested:{path1:"value1",path2:"value2"}}}
ParseJson true olarak ayarlanırsa json değerleri nesnelere dönüştürülür
Javascript dilinde:
var attributes;
var spans = document.getElementsByTagName("span");
for(var s in spans){
if (spans[s].getAttribute('name') === 'test') {
attributes = spans[s].attributes;
break;
}
}Özellik adlarına ve değerlerine erişmek için:
attributes[0].nodeName
attributes[0].nodeValue