জাভাস্ক্রিপ্ট / jQuery সহ এইচটিএমএল উপাদান থেকে সমস্ত বৈশিষ্ট্য পান


161

আমি এইচটিএমএল উপাদানের সমস্ত বৈশিষ্ট্যগুলিকে একটি অ্যারেতে রাখতে চাই: যেমন আমার কাছে একটি jQuery অবজেক্ট রয়েছে, যা এইচটিএমএল দেখতে এমন দেখাচ্ছে:

<span name="test" message="test2"></span>

এখন একটি উপায় হ'ল এখানে বর্ণিত এক্সএমএল পার্সার ব্যবহার করা , তবে তারপরে আমার কীভাবে আমার অবজেক্টের এইচটিএমএল কোড পাবেন তা জানতে হবে।

অন্য উপায় এটি jquery দিয়ে তৈরি করা হয়, কিন্তু কিভাবে? গুণাবলীর সংখ্যা এবং নামগুলি জেনেরিক।

ধন্যবাদ

বিটিডব্লিউ: আমি ডকুমেন্ট.জেটলেটমেন্টবিড বা অনুরূপ কিছু দিয়ে উপাদানটি অ্যাক্সেস করতে পারি না।

উত্তর:


218

আপনি যদি কেবল ডিওএম বৈশিষ্ট্যগুলি চান তবে 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 ব্যবহার করতে পারি না, এটি একটি jquery অবজেক্ট। এমন কি কোনও উপায় আছে যা আমি জেকুয়ারির মতো প্রসঙ্গে অভ্যন্তরে জেটিলিটিব্লাসের নাম তৈরি করতে পারি?
নি

4
আপনি ব্যবহার করতে পারেন getElementById-var el = document.getElementById($(myObj).attr("id"));
সাম্পসন

45
আপনি getপদ্ধতির মাধ্যমে jQuery অবজেক্ট থেকে DOM অবজেক্টটি পেতে পারেন ... উদাহরণস্বরূপ:var obj = $('#example').get(0);
ম্যাট হাগিনস

3
@ k0ni - আপনি যেমন var atts = $ (মাইবজেক্ট) [0] ব্যবহার করতে পারবেন? ?
রাল্ফ কাউলিং

12
সতর্কতা: আইই তে এটি কেবল নির্দিষ্ট করা হয়নি, তবে সমস্ত সম্ভাব্য বৈশিষ্ট্য
অ্যালেক্সি লেবেদেভ

70

আপনি এই সহজ প্লাগইনটি $ ('# কিছু_id') হিসাবে ব্যবহার করতে পারেন get 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);

4
এফওয়াইআই: এটি কেবল নির্বাচকের প্রথম উপাদানটিকেই প্রকাশ করে।
ব্রেট Veenstra

আমি পরীক্ষা করেছি এবং এটি গতিশীল যুক্ত বৈশিষ্ট্যগুলির সাথে কাজ করে (ক্রোম)
কোডটয়েড

57

সরল:

var element = $("span[name='test']");
$(element[0].attributes).each(function() {
console.log(this.nodeName+':'+this.nodeValue);});

এর কোন ডাউনসাইড?
rzr

7
Attr.nodeValuevalueগুগল ক্রোম বলছে, অনুকূলে হ্রাস করা হয় । সুতরাং এটি হতে পারে this.name + ':' + this.valueঅ্যাটার ইন্টারফেস
থাই

20

কারণ আই 7 ele এ এলম.অ্যাট্রিবিউটস সমস্ত উপস্থিত বৈশিষ্ট্যগুলি তালিকাভুক্ত করে, কেবলমাত্র বর্তমানগুলি নয়, আমাদেরকে গুণকের মানটি পরীক্ষা করতে হবে। এই প্লাগইনটি সমস্ত বড় ব্রাউজারগুলিতে কাজ করে:

(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();

1
এতে টাইপ করুন - এল লাইনে (0) লাইন 6 এ এলেম.জেট (0) হওয়া উচিত।
গ্রাহাম চার্লস

আমার অভিজ্ঞতা থেকে এখন এটি আসলে এর থেকে কিছুটা জটিল। কমপক্ষে কিছু ক্ষেত্রে। উদাহরণস্বরূপ, এর মধ্যে 'নাল' (স্ট্রিংয়ের মান) মান সহ 'ডেটাএফএলডি' নামের একটি বৈশিষ্ট্য অন্তর্ভুক্ত হবে বা এটি বাদ দেবে?
শক্তিশালী

এটি গতিশীল যুক্ত হওয়া বৈশিষ্ট্যগুলির সাথে কাজ করে না, কারণ বৈশিষ্ট্য এবং বৈশিষ্ট্যগুলি সবসময় সিঙ্ক হয় না।
DUzun

18

সেটার এবং গেটর!

(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();

2
ভাল লাগল, আমার এই উত্তরটি সবচেয়ে ভাল লেগেছে। সঙ্গে পুরোপুরি ভাল ফিট jQuery.attr
স্কট রিপ্পি

1
দুটি সুপারিশ: আপনি "অ-মিনফাইড" ভেরিয়েবলের নাম ব্যবহার করতে আপডেট করতে পারবেন? এবং আমি দেখতে পাচ্ছি যে আপনি jQuery.attrসেটারে ব্যবহার করছেন তবে এটি সম্ভবত গিটারে ব্যবহার করা সুবিধাজনক হবে।
স্কট রিপ্পি

এছাড়াও, ছোট জিনিস - আপনার () স্টেটমেন্টের জন্য প্রথমবারের পরে একটি সেমিকোলন হওয়া উচিত নয়।
jbyrd

6

বৈশিষ্ট্যটিকে অ্যারেতে .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>


1
এটি স্ট্রিং হিসাবে অ্যাট্রিবিউট নামের নয়, বস্তুর অ্যারে ফিরিয়ে দেবে, যদিও
প্রেজেক

1
ওপি স্ট্রিং হিসাবে নামের একটি অ্যারে নির্দিষ্ট করে নি: "আমি এইচটিএমএল উপাদানগুলিতে সমস্ত বৈশিষ্ট্যকে একটি অ্যারেতে রাখতে চাই" " এটি যে।
গুলফ্লাম

ঠিক আছে,
প্রেজেক

1
আইটেমগুলির মধ্যে পুনরাবৃত্তি করার সময় attrs, আপনি nameআইটেমটির বৈশিষ্ট্য সহ বৈশিষ্ট্যের নাম অ্যাক্সেস করতে পারেন ।
tyler.frankenstein

3

এই অ্যারেও ভাল কাজ করে যদি আপনার অ্যারেতে ফিরে আসা অবজেক্টগুলিতে নাম এবং মান সহ সমস্ত গুণাবলী পাওয়া প্রয়োজন।

উদাহরণ আউটপুট:

[
    {
        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"]

2

রোল্যান্ড Bouman এর উত্তর ভাল, সহজ ভ্যানিলা উপায়। আমি জেকিউ প্লাগগুলিতে কিছু প্রচেষ্টা লক্ষ্য করেছি, তবে সেগুলি কেবল আমার পক্ষে যথেষ্ট "পূর্ণ" বলে মনে হচ্ছে না, তাই আমি নিজের তৈরি করেছি। এখন পর্যন্ত একমাত্র ধাক্কা সরাসরি কল না করেই গতিযুক্ত যুক্ত অ্যাটর্সগুলিতে অ্যাক্সেস করতে অক্ষম 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);

jsFiddle


2

এটি করার আরও অনেক সংক্ষিপ্ত উপায়:

পুরানো উপায় (আই 9 +):

var element = document.querySelector(/* … */);
[].slice.call(element.attributes).map(function (attr) { return attr.nodeName; });

ES6 উপায় (প্রান্ত 12+):

[...document.querySelector(/* … */).attributes].map(attr => attr.nodeName);
  • document.querySelector()দস্তাবেজের মধ্যে প্রথম এলিমেন্টটি প্রদান করে যা নির্দিষ্ট নির্বাচকটির সাথে মেলে।
  • Element.attributesসংশ্লিষ্ট HTML উপাদানটির নির্ধারিত বৈশিষ্ট্যযুক্ত একটি নেমডনোডম্যাপ অবজেক্ট প্রদান করে।
  • [].map() কলিং অ্যারেতে প্রতিটি উপাদানগুলিতে সরবরাহ করা ফাংশন কল করার ফলাফল সহ একটি নতুন অ্যারে তৈরি করে।

ডেমো:


1

এটা কি সাহায্য করে?

এই সম্পত্তিটি আপনার জন্য একটি উপাদানের সমস্ত বৈশিষ্ট্যকে অ্যারেতে ফিরিয়ে দেয়। এখানে একটি উদাহরণ।

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>


1

এখানে প্রতিটি উত্তরে 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>


1

কল্পনা করুন যে আপনি নীচের মত একটি এইচটিএমএল উপাদান পেয়েছেন:

<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"

0

এরকম কিছু চেষ্টা করুন

    <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))

0
Element.prototype.getA = function (a) {
        if (a) {
            return this.getAttribute(a);
        } else {
            var o = {};
            for(let a of this.attributes){
                o[a.name]=a.value;
            }
            return o;
        }
    }

থাকার <div id="mydiv" a='1' b='2'>...</div> ব্যবহার করতে পারেন

mydiv.getA() // {id:"mydiv",a:'1',b:'2'}

0

খুব সহজ. আপনাকে কেবল বৈশিষ্ট্যগুলির উপাদানটি লুপ করতে হবে এবং তাদের নোডভ্যালুগুলিকে একটি অ্যারেতে ঠেলাতে হবে:

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);
}

0

অবজেক্ট রূপান্তর বৈশিষ্ট্য

* প্রয়োজন: লোডাশ

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
}

এটি সমস্ত এইচটিএমএল বৈশিষ্ট্যগুলিকে নেস্টেড অবজেক্টে রূপান্তর করবে

এইচটিএমএল উদাহরণ: <div custom-nested-path1="value1" custom-nested-path2="value2"></div>

ফলাফল: {custom:{nested:{path1:"value1",path2:"value2"}}}

পার্সজেসনকে সত্যে সেট করা থাকলে জসন মানগুলিকে বস্তুতে রূপান্তর করা হবে


-8

জাভাস্ক্রিপ্টে:

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

সমস্ত স্প্যান উপাদানগুলির মধ্য দিয়ে যাওয়া খুব ধীর হবে
0-0
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.