복붙노트

[JQUERY] 자바 스크립트 / jQuery를 가진 HTML 요소에서 모든 속성을

JQUERY

자바 스크립트 / jQuery를 가진 HTML 요소에서 모든 속성을

해결법

  1. 1.그냥 DOM 속성을 원하는 경우에는이 요소 자체에 노드 목록 속성을 사용하는 아마 간단합니다 :

    그냥 DOM 속성을 원하는 경우에는이 요소 자체에 노드 목록 속성을 사용하는 아마 간단합니다 :

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

  2. 2.$ ( '#이 SOME_ID')로이 간단한 플러그인을 사용하려면, getAttributes ().;

    $ ( '#이 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);

  3. 3.단순한:

    단순한:

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

  4. 4.IE7에 나열 가능한 모든 속성뿐만 아니라 본 사람을 elem.attributes 때문에, 우리는 속성 값을 테스트해야합니다. 이 플러그인은 모든 주요 브라우저에서 작동 :

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

  5. 5.세터와 게터!

    세터와 게터!

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

  6. 6.는 DOM 노드의 속성 배열과 같은 객체이다 NamedNodeMap입니다입니다 속성.

    는 DOM 노드의 속성 배열과 같은 객체이다 NamedNodeMap입니다입니다 속성.

    목적 한 - 같은 배열 속성 이름을 열거 길이 속성과를 가진 개체이지만, 그렇지 않으면 자신의 방법을 가지고 있으며, Array.prototype으로 상속하지 않습니다

    슬라이스 방법은 새로운 배열로 배열과 같은 오브젝트를 변환 할 수 있습니다.

    VAR ELEM document.querySelector = ( '[NAME = 시험]) 바인드합니다 = Array.prototype.slice.call (elem.attributes); CONSOLE.LOG (바인드합니다); <스팬 이름 = "테스트"메시지 = "TEST2"> 참조 콘솔.

  7. 7.당신이 배열로 반환 객체에 이름과 값 모든 속성을 취득해야하는 경우이 방법은 잘 작동합니다.

    당신이 배열로 반환 객체에 이름과 값 모든 속성을 취득해야하는 경우이 방법은 잘 작동합니다.

    출력 예 :

    [
    {
        name: 'message',
        value: 'test2'
    }
    ...
]

    기능 getElementAttrs (엘) { 창 [] .slice.call (el.attributes) .MAP ((ATTR) => { 반환 { 이름 : attr.name를, 값 : attr.value } }); } VAR allAttrs = getElementAttrs (document.querySelector ( '범위')); CONSOLE.LOG (allAttrs); <스팬 NAME = "테스트"메시지 = "TEST2">

    해당 요소에 대한 속성 이름의 배열을 원하는 경우에, 당신은 단지 결과를 매핑 할 수 있습니다 :

    var onlyAttrNames = allAttrs.map(attr => attr.name);
console.log(onlyAttrNames); // ["name", "message"]

  8. 8.롤랜드 보우만의 대답은 최고에, 간단한 바닐라 방법입니다. 나는 JQ 플러그에서 몇 가지 시도를 발견,하지만 난 내 자신을 만든 그래서 그들은 단지 나에게 "전체"충분히 보이지 않았다. 유일한 차질은 지금까지 직접 elm.attr ( 'dynamicAttr')를 호출하지 않고 액세스를 동적으로 추가 바인드합니다 무능력하고있다. 그러나이 jQuery를 요소 객체의 모든 자연의 속성을 반환합니다.

    롤랜드 보우만의 대답은 최고에, 간단한 바닐라 방법입니다. 나는 JQ 플러그에서 몇 가지 시도를 발견,하지만 난 내 자신을 만든 그래서 그들은 단지 나에게 "전체"충분히 보이지 않았다. 유일한 차질은 지금까지 직접 elm.attr ( 'dynamicAttr')를 호출하지 않고 액세스를 동적으로 추가 바인드합니다 무능력하고있다. 그러나이 jQuery를 요소 객체의 모든 자연의 속성을 반환합니다.

    플러그인을 호출하는 간단한 jQuery를 스타일을 사용합니다 :

    $(elm).getAttrs();
// OR
$.getAttrs(elm);

    또한 하나의 특정 ATTR를 얻기위한 두 번째 문자열 PARAM를 추가 할 수 있습니다. jQuery를 이미 $을 제공하기 때문에 이것은 정말 하나의 요소 선택을 위해 필요하지 않습니다 (느릅 나무) .attr ( '이름') 그러나, 플러그인의 나의 버전은 여러 반환 수 있습니다. 그래서, 예를 들어, 전화 등

    $.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

    / * BEGIN PLUGIN * / ; (함수 ($) { $ .getAttrs || ($ .extend ({ getAttrs : 함수 () { var에 A = 인수, C, B; 경우 (a.length) (a에서 x)는 스위치 (대해서 typeof A [X]) {대 경우 "개체" A [X] instanceof는 F && (b = A [X]); 단절; 경우 "문자열" B? C || (c는 [X] =) : B = $ (a [X]) } 경우 (b에서의 instanceof F) { 경우 (1 b.length를 ==) { 대 (VAR의 D = [], E = 0, G = B [0] .attributes, H = g.length, E 아래의 모든 단지에 테스트 플러그인을위한 물건입니다. 자세한 내용은 개발자 콘솔을 참조하십시오.

      롤랜드 보우만의 대답은 최고에, 간단한 바닐라 방법입니다. 나는 JQ 플러그에서 몇 가지 시도를 발견,하지만 난 내 자신을 만든 그래서 그들은 단지 나에게 "전체"충분히 보이지 않았다. 유일한 차질은 지금까지 직접 <코드> ​​elm.attr ( 'dynamicAttr') 를 호출하지 않고 액세스를 동적으로 추가 바인드합니다 무능력하고있다. 그러나 이것은 jQuery를 요소 객체의 모든 자연의 속성을 반환합니다. 플러그인은 간단한 jQuery를 스타일의 호출을 사용 : <프리 클래스 = "기본 prettyprint은 prettyprinted"> <코드> ​​<스팬 클래스 = "PLN"> $ <스팬 클래스 = "말장난"> ( <스팬 클래스 = "PLN"> 느릅 나무 <스팬 클래스 = "웃기">) <스팬 클래스 = "PLN"> getAttrs <스팬 클래스 = "웃기"> (). <스팬 클래스 = "PLN "> <스팬 클래스 = "COM"> // OR <스팬 클래스 = "PLN"> $ <스팬 클래스 = "웃기">. <스팬 클래스 = "PLN"> getAttrs <스팬 클래스 = "웃기"> ( <스팬 클래스 = "PLN "> 엘름 <스팬 클래스 ="웃기 ">);

      또한 하나의 특정 ATTR를 얻기위한 두 번째 문자열 PARAM를 추가 할 수 있습니다. 이것은 정말 하나의 요소 선택에 필요한 jQuery를 이미 제공하기 때문에 <코드> ​​$은 (느릅 나무) .attr ( '이름') 그러나, 플러그인의 나의 버전은 여러 반환을 허용하지 않습니다. 그래서, 예를 들어, 같은 호 <프리 클래스 = "기본 prettyprint은 prettyprinted"> <코드> ​​<스팬 클래스 = "PLN"> $ <스팬 클래스 = "말장난">. <스팬 클래스 = "PLN"> getAttrs <스팬 클래스 = "웃기"> ( <스팬 클래스 = "STR"> '*' <스팬 클래스 = "웃기"> <스팬 클래스 = "PLN" > <스팬 클래스 = "STR '>'클래스 ' <스팬 클래스 ="웃기 ">); 배열 될 것인가의 [] 객체 리턴 <코드> ​​{} . 각 객체는 다음과 같이 표시됩니다 <프리 클래스 = "기본 prettyprint가 prettyprinted"> <부호> <스팬 클래스 = "웃기"> { <스팬 클래스 = "PLN"> <스팬 클래스 = "KWD"> 클래스 <스팬 클래스 = "웃기"> <스팬 클래스 = "PLN"> <스팬 클래스 = "STR '>'클래스 이름 ' <스팬 클래스 ="웃기 "> <스팬 클래스 = "PLN"> 엘름 <스팬 클래스 = "웃기"> <스팬 클래스 = "PLN"> $ <스팬 클래스 = "웃기 "> ( <스팬 클래스 ="PLN "> 엘름 <스팬 클래스 ="웃기 ">), <스팬 클래스 ="PLN "> 지수 <스팬 클래스 = "웃기"> <스팬 클래스 = "PLN"> I <스팬 클래스 = "웃기">} <스팬 클래스 = "PLN"> <스팬 클래스 = "COM"> // 인덱스 $ (느릅 나무)있는 .index ()

    • 9.훨씬 더 간결 방법은 그것을 할 수 있습니다 :

      훨씬 더 간결 방법은 그것을 할 수 있습니다 :

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

      [...document.querySelector(/* … */).attributes].map(attr => attr.nodeName);

      CONSOLE.LOG ( ... document.querySelector가 ( "IMG ')가. 특성] .MAP (ATTR => attr.nodeName) ); 서식 / * 출력 콘솔 * / 이 .as 콘솔 래퍼 {총수 : 절대; 최고 : 0; } ...

    • 10.아주 간단합니다. (가) 요소를 속성 및 배열에 자신의 nodeValues를 밀어을 통해 당신은 루프가 필요합니다

      아주 간단합니다. (가) 요소를 속성 및 배열에 자신의 nodeValues를 밀어을 통해 당신은 루프가 필요합니다

      let att = document.getElementById('id');

let arr = Array();

for (let i = 0; i < att.attributes.length; i++) {
    arr.push(att.attributes[i].nodeValue);
}

      경우는 '여기서 nodeName'에 대한 'nodeValue를'을 대체 할 수있는 속성의 이름을합니다.

      let att = document.getElementById('id');

let arr = Array();

for (let i = 0; i < att.attributes.length; i++) {
    arr.push(att.attributes[i].nodeName);
}

    • 11.이 도움말을합니까?

      이 도움말을합니까?

      이 속성은 당신을 위해 배열에 요소의 모든 속성을 반환합니다. 다음은 예이다.

      window.addEventListener ( '부하', 함수 () { VAR 결과 = document.getElementById를 ( '결과'); VAR spanAttributes = document.getElementsByTagName ( '범위') [0] .attributes; 대한 (var에 나는 = 0; I = spanAttributes.length;! 내가 ++) { result.innerHTML spanAttributes + = [I] .value + ','; } }); <스팬 NAME = "테스트"메시지 = "TEST2">

      많은 요소의 속성을 얻으려면 그들을 구성, 난 당신을 반복하려는 요소 모두의 배열을 만드는 것이 좋습니다 다음을 통해 루프 각 요소의 모든 속성에 대한 하위 배열을 만들 수 있습니다.

      이것은 및 수집 요소를 통해 의지 루프는 두 개의 속성을 출력하는 스크립트의 예입니다. 이 스크립트가 항상 두 가지 속성이 될 것입니다하지만 당신은 쉽게 더 매핑이 문제를 해결할 수 있다고 가정합니다.

      window.addEventListener ( '부하', 함수 () { / * 이 속성을 원하는 모든 요소를 ​​수집 의 변수로 "elementsToTrack" * / VAR elementsToTrack = $ ( '몸 스팬, 바디 사업부'); // 변수는 각 요소에 대한 모든 속성을 저장하기 VAR 속성 = []; // 선택한 요소의 모든 속성을 수집 대한 (var에 나는 = 0;! I = elementsToTrack.length을 내가 ++) { VAR currentAttr elementsToTrack = [I] .attributes; (currentAttr) attributes.push; } // 모든 attrbute의 이름과 값을 출력 VAR 결과 = document.getElementById를 ( '결과'); 대한 (! I = attributes.length; var에 나는 = 0 내가 ++) { result.innerHTML + = 속성 [I] [0] .name을 + ','+ 속성 [I] [0] .value + '| '+ 속성 [I] [1] .name을 +', '+ 속성 [I] [1] .value +'로
      '; } }); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> <스팬 NAME = "테스트"메시지 = "TEST2"> <스팬 NAME = "테스트"메시지 = "TEST2"> <스팬 NAME = "테스트"메시지 = "TEST2"> <스팬 NAME = "테스트"메시지 = "TEST2"> <스팬 NAME = "테스트"메시지 = "TEST2"> <스팬 NAME = "테스트"메시지 = "TEST2"> <스팬 NAME = "테스트"메시지 = "TEST2">

    • 12.모든 해답은 여기에 대해 getAttributeNames 요소 방법을 사용하여 간단한 해결책이 없습니다!

      모든 해답은 여기에 대해 getAttributeNames 요소 방법을 사용하여 간단한 해결책이 없습니다!

      그것은 당신이 다음 키 / 값의 좋은 개체를 줄일 수, 정규 배열로 모든 요소의 현재 속성의 이름을 검색합니다.

      const를 getAllAttributes = 엘 => 엘 .getAttributeNames () .reduce (OBJ (이름) => ({ ... OBJ, [이름] el.getAttribute (이름) }) {}) CONSOLE.LOG (getAllAttributes (document.querySelector ( 'DIV')))

    • 13.아래처럼 HTML 요소를 가지고 상상 :

      아래처럼 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"

    • 14.이 같은 시도

      이 같은 시도

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

    • 15.

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

      ... 를 갖는 사용할 수 있습니다

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

    • 16.개체 변환 속성

      개체 변환 속성

      * 요구 사항 : 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
}

      이 중첩 된 객체에 모든 HTML 속성을 변환합니다

      예 HTML :

      결과 : {사용자 정의 : {중첩 : {경로 1 : "값 1", 경로 2 : "값 2를"}}}

      parseJson가 true JSON 값으로 설정되어있는 경우 객체로 변환됩니다

    • 17.자바 스크립트에서 :

      자바 스크립트에서 :

      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

    from https://stackoverflow.com/questions/2048720/get-all-attributes-from-a-html-element-with-javascript-jquery by cc-by-sa and MIT license

    'JQUERY' 카테고리의 다른 글

    [JQUERY] jQuery로 요소의 내용의 변화를 감지  (0) 2020.09.28
    [JQUERY] 어떻게 초기에 가까운 연결을합니까?  (0) 2020.09.28
    [JQUERY] JSON으로 변환 배열  (0) 2020.09.28
    [JQUERY] AJAX 호출 결과의 방지 브라우저 캐싱  (0) 2020.09.28
    [JQUERY] jQuery를 사용하여 URL에서 쿼리 문자열 가져 오기 [중복]  (0) 2020.09.28
,

티스토리툴바