[javascript] JavaScript에서 setAttribute vs.attribute =를 사용하는시기

이 답변은 실제로 속성 과 속성 사이의 큰 혼란을 해결하지 못합니다. . 또한 Javascript 프로토 타입에 따라 요소의 속성을 사용하여 속성에 액세스 할 수도 있고 때로는 속성에 액세스 할 수도없는 경우도 있습니다.

먼저, HTMLElement는 자바 스크립트 객체라는 것을 기억해야 합니다. 모든 객체와 마찬가지로 속성이 있습니다. 물론 원하는 거의 모든 속성을 만들 수 HTMLElement있지만 DOM (페이지의 내용)과 관련이있는 것은 아닙니다. 점 표기법 ( .)은 속성을 위한 것 입니다. 이제는 속성 에 매핑되는 몇 가지 특수 속성 이 있으며 그 시점이나 글을 쓸 때 보장되는 속성은 4 개뿐입니다 (나중에 자세히 설명).

모두 HTMLElement라는 속성이 포함되어 있습니다 attributes. HTMLElement.attributesA는 라이브 NamedNodeMap 는 DOM의 요소에 관련 개체. “실시간”은 DOM에서 노드가 변경 될 때 JavaScript 측에서 변경되고 그 반대로도 변경됨을 의미합니다. 이 경우 DOM 속성이 문제의 노드입니다. A Node에는 .nodeValue변경할 수 있는 속성이 있습니다. NamedNodeMap객체에는 setNamedItem전체 노드를 변경할 수 있는 함수 가 있습니다. 키를 사용하여 노드에 직접 액세스 할 수도 있습니다. 예를 들어, (Side note, 대소 문자를 구분하지 않으므로을 전달할 수 있음) .attributes["dir"]과 같은 것을 말할 수 있습니다 ..attributes.getNamedItem('dir');NamedNodeMap'DIR'

존재 하지 않는 노드 를 자동으로 생성 하고 설정 하는 노드를HTMLElement 호출 할 수 있는 비슷한 기능이 있습니다 . 도 있습니다 어떤 당신이 속성으로 직접 액세스 할 수있는 속성 을 통해 특별한 속성 등은 . 다음은 모양에 대한 대략적인 매핑입니다.setAttributenodeValueHTMLElementdir

HTMLElement {
  attributes: {
    setNamedItem: function(attr, newAttr) {
      this[attr] = newAttr;
    },
    getNamedItem: function(attr) {
      return this[attr];
    },
    myAttribute1: {
      nodeName: 'myAttribute1',
      nodeValue: 'myNodeValue1'
    },
    myAttribute2: {
      nodeName: 'myAttribute2',
      nodeValue: 'myNodeValue2'
    },
  }
  setAttribute: function(attr, value) {
    let item = this.attributes.getNamedItem(attr);
    if (!item) {
      item = document.createAttribute(attr);
      this.attributes.setNamedItem(attr, item);
    }
    item.nodeValue = value;
  },
  getAttribute: function(attr) {
    return this.attributes[attr] && this.attributes[attr].nodeValue;
  },
  dir: // Special map to attributes.dir.nodeValue || ''
  id:  // Special map to attributes.id.nodeValue || ''
  className: // Special map to attributes.class.nodeValue || '' 
  lang: // Special map to attributes.lang.nodeValue || ''

}

따라서 dir속성을 6 가지 방법으로 변경할 수 있습니다 .

  // 1. Replace the node with setNamedItem
  const newAttribute = document.createAttribute('dir');
  newAttribute.nodeValue = 'rtl';
  element.attributes.setNamedItem(newAttribute);

  // 2. Replace the node by property name;
  const newAttribute2 = document.createAttribute('dir');
  newAttribute2.nodeValue = 'rtl';
  element.attributes['dir'] = newAttribute2;
  // OR
  element.attributes.dir = newAttribute2;

  // 3. Access node with getNamedItem and update nodeValue
  // Attribute must already exist!!!
  element.attributes.getNamedItem('dir').nodeValue = 'rtl';

  // 4. Access node by property update nodeValue
  // Attribute must already exist!!!
  element.attributes['dir'].nodeValue = 'rtl';
  // OR
  element.attributes.dir.nodeValue = 'rtl';

  // 5. use setAttribute()  
  element.setAttribute('dir', 'rtl');

  // 6. use the UNIQUELY SPECIAL dir property
  element["dir"] = 'rtl';
  element.dir = 'rtl';

당신은 방법 # 1-5 모든 속성을 업데이트,하지만 수 dir, id, lang, 및 className방법 # 6.

HTMLElement의 확장

HTMLElement그 4 가지 특별한 속성이 있습니다. 일부 요소는 HTMLElement더 많은 속성이 매핑 된 확장 클래스입니다 . 예를 들어, HTMLAnchorElement이 HTMLAnchorElement.href, HTMLAnchorElement.rel그리고 HTMLAnchorElement.target. 하지만, 조심 당신이 (A에서와 같이 그 특별한 속성이없는 요소에 이러한 속성을 설정하면 HTMLTableElement) 다음 속성이 변경되지 않으며 그들은 단지, 일반 사용자 정의 속성입니다. 더 잘 이해하기 위해 다음은 상속의 예입니다.

HTMLAnchorElement extends HTMLElement {
  // inherits all of HTMLElement
  href:    // Special map to attributes.href.nodeValue || ''
  target:  // Special map to attributes.target.nodeValue || ''
  rel:     // Special map to attributes.ref.nodeValue || '' 
}

맞춤 속성

이제 큰 경고 : 모든 Javascript 객체와 마찬가지로 사용자 정의 속성을 추가 할 수 있습니다. 그러나 이것들은 DOM에서 아무것도 변경하지 않습니다. 넌 할 수있어:

  const newElement = document.createElement('div');
  // THIS WILL NOT CHANGE THE ATTRIBUTE
  newElement.display = 'block';

그러나 그것은

  newElement.myCustomDisplayAttribute = 'block';

이는 사용자 정의 속성 추가 가에 연결되지 않음을.attributes[attr].nodeValue 의미합니다 .

공연

차이점을 보여주기 위해 https://jsperf.com/set-attribute-comparison jsperf 테스트 사례를 작성했습니다 . 기본적으로 순서대로 :

1. 사용자 지정 속성은이 DOM에 영향을 미칠 수 있습니다하지 않기 때문에 속성이 없습니다 .
2. 브라우저에서 제공하는 특별 매핑 ( dir, id, className).
3. 속성이 이미 존재하는 경우element.attributes.ATTRIBUTENAME.nodeValue =
4. setAttribute ();
5. 속성이 이미 존재하는 경우element.attributes.getNamedItem(ATTRIBUTENAME).nodeValue = newValue
6. element.attributes.ATTRIBUTENAME = newNode
7. element.attributes.setNamedItem(ATTRIBUTENAME) = newNode

결론 (TL; DR)

• 에서 특별한 프로퍼티 매핑을 사용하여 HTMLElement: element.dir, element.id, element.className, 또는 element.lang.

• 요소가 HTMLElement특수 특성으로 확장 되었음을 100 % 확신하는 경우 해당 특수 맵핑을 사용하십시오. (로 확인할 수 있습니다 if (element instanceof HTMLAnchorElement)).

• 속성이 이미 존재하는지 100 % 확신하는 경우을 사용하십시오 element.attributes.ATTRIBUTENAME.nodeValue = newValue.

• 그렇지 않은 경우을 사용하십시오 setAttribute().

답변

var posElem = document.getElementById('animation');
var newStyle = 'background: ' + newBack + ';' +
'color: ' + newColor + ';' +
    'border: ' + newBorder + ';';
if(typeof(posElem.style.cssText) != 'undefined') {
    posElem.style.cssText = newStyle;
} else {
    posElem.setAttribute('style', newStyle);
}