मैं एक एचटीएमएल तत्व में सभी विशेषताओं को एक सरणी में रखना चाहता हूं: जैसे मेरे पास एक jQuery ऑब्जेक्ट है, जो html इस तरह दिखता है:
<span name="test" message="test2"></span>अब एक तरीका यहाँ वर्णित xml पार्सर का उपयोग करना है , लेकिन फिर मुझे यह जानना होगा कि मेरी वस्तु का HTML कोड कैसे प्राप्त करें।
दूसरा तरीका यह है कि इसे jquery के साथ बनाया जाए, लेकिन कैसे? विशेषताओं की संख्या और नाम सामान्य हैं।
धन्यवाद
Btw: मैं document.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विधि के माध्यम से एक jQuery वस्तु से डोम ऑब्जेक्ट प्राप्त कर सकते हैं ... उदाहरण के लिए: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 का कहना है कि इसके पक्ष में पदावनत किया गया है । तो यह हो सकता है 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बदलने के लिए उपयोग करेंattributesattributesDOM नोड्स की संपत्ति एक है NamedNodeMap, जो एक Array जैसी वस्तु है।
ऐरे जैसी वस्तु एक ऐसी वस्तु है जिसमें ए 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"]रोलैंड बोमन का जवाब सबसे अच्छा, सरल वेनिला तरीका है। मैंने jQ प्लग में कुछ प्रयासों पर ध्यान दिया, लेकिन वे मुझे "पर्याप्त" नहीं लगे, इसलिए मैंने अपना बनाया। अब तक का एकमात्र झटका सीधे कॉलिंग के बिना गतिशील रूप से जोड़े गए अटार्स तक पहुंचने में असमर्थता है elm.attr('dynamicAttr')। हालाँकि, यह किसी jQuery तत्व ऑब्जेक्ट की सभी प्राकृतिक विशेषताओं को लौटाएगा।
प्लगइन सरल jQuery शैली कॉलिंग का उपयोग करता है:
$(elm).getAttrs();
// OR
$.getAttrs(elm);आप केवल एक विशिष्ट पोशाक प्राप्त करने के लिए एक दूसरा स्ट्रिंग परम जोड़ सकते हैं। यह वास्तव में एक तत्व चयन के लिए आवश्यक नहीं है, क्योंकि 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संबंधित HTML तत्व की असाइन की गई विशेषताओं वाला एक NamedNodeMap ऑब्जेक्ट देता है ।[].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))बहुत आसान। आपको केवल गुण तत्व पर लूप करने की जरूरत है और उनके नोड्यूल्स को एक सरणी में धकेलें:
let att = document.getElementById('id');
let arr = Array();
for (let i = 0; i < att.attributes.length; i++) {
arr.push(att.attributes[i].nodeValue);
}यदि विशेषता का नाम आप चाहते हैं तो आप 'नोडवैल्यू' को 'नोडनेम' के लिए बदल सकते हैं।
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 को सही json मानों पर सेट किया जाता है, तो इसे ऑब्जेक्ट में बदल दिया जाएगा
जावास्क्रिप्ट में:
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