docs(api): Clarify relationship between get/has/setAttribute() methods for attribute values, nodes & namespaced attrs

files/en-us/web/api/attr/index.md

@@ -7,7 +7,7 @@ browser-compat: api.Attr
 
 {{APIRef("DOM")}}
 
-The **`Attr`** interface represents one of an element's attributes as an object. In most situations, you will directly retrieve the attribute value as a string (e.g., {{domxref("Element.getAttribute()")}}), but certain functions (e.g., {{domxref("Element.getAttributeNode()")}}) or means of iterating return `Attr` instances.
+The **`Attr`** interface represents one of an element's attributes as an object. In most situations, you will directly retrieve the attribute value as a string (e.g., {{domxref("Element.getAttribute()")}}), but some cases may require interacting with `Attr` instances (e.g., {{domxref("Element.getAttributeNode()")}}).
 
 {{InheritanceDiagram}}
 

files/en-us/web/api/element/getattribute/index.md

@@ -15,6 +15,8 @@ element.
 If the given attribute does not exist, the value returned will
 either be `null` or `""` (the empty string); see [Non-existing attributes](#non-existing_attributes) for details.
 
+If you need to inspect the {{domxref("Attr")}} node's properties, you can use the {{domxref("Element.getAttributeNode()", "getAttributeNode()")}} method instead.
+
 ## Syntax
 
 ```js-nolint
@@ -84,3 +86,10 @@ let nonce = script.nonce;
 ## Browser compatibility
 
 {{Compat}}
+
+## See also
+
+- {{domxref("Element.hasAttribute()")}}
+- {{domxref("Element.setAttribute()")}}
+- {{domxref("Element.removeAttribute()")}}
+- {{domxref("Element.toggleAttribute()")}}

files/en-us/web/api/element/getattributenode/index.md

@@ -8,7 +8,10 @@ browser-compat: api.Element.getAttributeNode
 
 {{ APIRef("DOM") }}
 
-Returns the specified attribute of the specified element, as an `Attr` node.
+Returns the specified attribute of the specified element, as an {{domxref("Attr")}} node.
+
+This method is useful if you need the attribute's [instance properties](/en-US/docs/Web/API/Attr#instance_properties).
+If you only need the attribute's value, you can use the {{domxref("Element.getAttribute()", "getAttribute()")}} method instead.
 
 ## Syntax
 
@@ -39,14 +42,16 @@ When called on an HTML element in a DOM flagged as an HTML document, `getAttribu
 
 The `Attr` node inherits from `Node`, but is not considered a part of the document tree. Common `Node` attributes like [parentNode](/en-US/docs/Web/API/Node/parentNode), [previousSibling](/en-US/docs/Web/API/Node/previousSibling), and [nextSibling](/en-US/docs/Web/API/Node/nextSibling) are `null` for an `Attr` node. You can, however, get the element to which the attribute belongs with the `ownerElement` property.
 
-[getAttribute](/en-US/docs/Web/API/Element/getAttribute) is usually used instead of `getAttributeNode` to get the value of an element's attribute.
-
-{{ DOMAttributeMethods() }}
-
 ## Specifications
 
 {{Specifications}}
 
 ## Browser compatibility
 
 {{Compat}}
+
+## See also
+
+- {{domxref("Document.createAttribute()")}}
+- {{domxref("Element.setAttributeNode()")}}
+- {{domxref("Element.removeAttributeNode()")}}

files/en-us/web/api/element/getattributenodens/index.md

@@ -8,7 +8,12 @@ browser-compat: api.Element.getAttributeNodeNS
 
 {{ APIRef("DOM") }}
 
-Returns the `Attr` node for the attribute with the given namespace and name.
+The **`getAttributeNodeNS()`** method of the {{domxref("Element")}} interface returns the namespaced {{domxref("Attr")}} node of an element.
+
+This method is useful if you need the namespaced attribute's [instance properties](/en-US/docs/Web/API/Attr#instance_properties).
+If you only need the namespaced attribute's value, you can use the {{domxref("Element.getAttributeNS()", "getAttributeNS()")}} method instead.
+
+If you need the {{domxref("Attr")}} node of an element in HTML documents and the attribute is not namespaced, use the {{domxref("Element.getAttributeNode()", "getAttributeNode()")}} method instead.
 
 ## Syntax
 
@@ -29,12 +34,16 @@ The node for specified attribute.
 
 `getAttributeNodeNS` is more specific than [getAttributeNode](getAttributeNode) in that it allows you to specify attributes that are part of a particular namespace. The corresponding setter method is [setAttributeNodeNS](/en-US/docs/Web/API/Element/setAttributeNodeNS).
 
-{{ DOMAttributeMethods() }}
-
 ## Specifications
 
 {{Specifications}}
 
 ## Browser compatibility
 
 {{Compat}}
+
+## See also
+
+- {{domxref("Document.createAttribute()")}}
+- {{domxref("Document.createAttributeNS()")}}
+- {{domxref("Element.setAttributeNodeNS()")}}

files/en-us/web/api/element/getattributens/index.md

@@ -14,6 +14,8 @@ name. If the named attribute does not exist, the value returned will either be
 `null` or `""` (the empty string); see [Notes](#notes) for
 details.
 
+If you are working with HTML documents and you don't need to specify the requested attribute as being part of a specific namespace, use the {{domxref("Element.getAttribute()", "getAttribute()")}} method instead.
+
 ## Syntax
 
 ```js-nolint
@@ -58,7 +60,7 @@ custom namespace.
 </svg>
 ```
 
-In an HTML document the attribute has to be accessed with `test:foo` since
+In an HTML document, the attribute has to be accessed with `test:foo` since
 namespaces are not supported.
 
 ```html
@@ -96,13 +98,10 @@ namespaces are not supported.
 
 ## Notes
 
-Namespaces are only supported in XML documents. HTML documents have to use
-`getAttribute()` instead.
-
-`getAttributeNS()` differs from {{domxref("element.getAttribute()",
-  "getAttribute()")}} in that it allows you to further specify the requested attribute as
+`getAttributeNS()` differs from {{domxref("element.getAttribute()", "getAttribute()")}}
+in that it allows you to further specify the requested attribute as
 being part of a particular namespace, as in the example above, where the attribute is
-part of the fictional "specialspace" namespace on Mozilla.
+part of the fictional "test" namespace.
 
 Prior to the DOM4 specification, this method was specified to return an empty string
 rather than null for non-existent attributes. However, most browsers instead returned
@@ -112,12 +111,16 @@ browsers return an empty string. For that reason, you should use
 existence prior to calling `getAttributeNS()` if it is possible that the
 requested attribute does not exist on the specified element.
 
-{{DOMAttributeMethods}}
-
 ## Specifications
 
 {{Specifications}}
 
 ## Browser compatibility
 
 {{Compat}}
+
+## See also
+
+- {{domxref("Element.hasAttributeNS()")}}
+- {{domxref("Element.setAttributeNS()")}}
+- {{domxref("Element.removeAttributeNS()")}}

files/en-us/web/api/element/hasattribute/index.md

@@ -36,14 +36,18 @@ if (foo.hasAttribute("bar")) {
 }
 ```
 
-## Notes
-
-{{DOMAttributeMethods}}
-
 ## Specifications
 
 {{Specifications}}
 
 ## Browser compatibility
 
 {{Compat}}
+
+## See also
+
+- {{domxref("Element.hasAttributes()")}}
+- {{domxref("Element.getAttribute()")}}
+- {{domxref("Element.setAttribute()")}}
+- {{domxref("Element.removeAttribute()")}}
+- {{domxref("Element.toggleAttribute()")}}

files/en-us/web/api/element/hasattributens/index.md

@@ -8,7 +8,9 @@ browser-compat: api.Element.hasAttributeNS
 
 {{ APIRef("DOM") }}
 
-`hasAttributeNS` returns a boolean value indicating whether the current element has the specified attribute.
+The **`hasAttributeNS()`** method of the {{domxref("Element")}} interface returns a boolean value indicating whether the current element has the specified attribute with the specified namespace.
+
+If you are working with HTML documents and you don't need to specify the requested attribute as being part of a specific namespace, use the {{domxref("Element.hasAttribute()", "hasAttribute()")}} method instead.
 
 ## Syntax
 
@@ -37,14 +39,16 @@ if (
 }
 ```
 
-## Notes
-
-{{ DOMAttributeMethods() }}
-
 ## Specifications
 
 {{Specifications}}
 
 ## Browser compatibility
 
 {{Compat}}
+
+## See also
+
+- {{domxref("Element.getAttributeNS()")}}
+- {{domxref("Element.setAttributeNS()")}}
+- {{domxref("Element.removeAttributeNS()")}}

files/en-us/web/api/element/hasattributes/index.md

@@ -47,3 +47,7 @@ if (foo.hasAttributes()) {
 
 - {{domxref("Element.attributes")}}
 - {{domxref("Element.hasAttribute()")}}
+- {{domxref("Element.getAttribute()")}}
+- {{domxref("Element.setAttribute()")}}
+- {{domxref("Element.removeAttribute()")}}
+- {{domxref("Element.toggleAttribute()")}}

files/en-us/web/api/element/removeattribute/index.md

@@ -31,12 +31,8 @@ None ({{jsxref("undefined")}}).
 
 ## Usage notes
 
-You should use `removeAttribute()` instead of setting the attribute value to
-`null` either directly or using {{domxref("Element.setAttribute",
-  "setAttribute()")}}. Many attributes will not behave as expected if you set them to
-`null`.
-
-{{ DOMAttributeMethods() }}
+You should use `removeAttribute()` instead of setting the attribute value to `null` either directly or using {{domxref("Element.setAttribute", "setAttribute()")}}.
+Many attributes will not behave as expected if you set them to `null`.
 
 ## Examples
 
@@ -53,3 +49,10 @@ document.getElementById("div1").removeAttribute("disabled");
 ## Browser compatibility
 
 {{Compat}}
+
+## See also
+
+- {{domxref("Element.hasAttribute()")}}
+- {{domxref("Element.getAttribute()")}}
+- {{domxref("Element.setAttribute()")}}
+- {{domxref("Element.toggleAttribute()")}}

files/en-us/web/api/element/removeattributenode/index.md

@@ -8,8 +8,9 @@ browser-compat: api.Element.removeAttributeNode
 
 {{ APIRef("DOM") }}
 
-The **`removeAttributeNode()`** method of the
-{{domxref("Element")}} interface removes the specified attribute from the element.
+The **`removeAttributeNode()`** method of the {{domxref("Element")}} interface removes the specified {{domxref("Attr")}} node from the element.
+
+If you don't need to inspect the attribute node before removing it, you can use the {{domxref("Element.removeAttribute()")}} method instead.
 
 ## Syntax
 
@@ -51,12 +52,16 @@ There is no `removeAttributeNodeNS` method; the
 `removeAttributeNode` method can remove both namespaced attributes and
 non-namespaced attributes.
 
-{{ DOMAttributeMethods() }}
-
 ## Specifications
 
 {{Specifications}}
 
 ## Browser compatibility
 
 {{Compat}}
+
+## See also
+
+- {{domxref("Document.createAttribute()")}}
+- {{domxref("Element.getAttributeNode()")}}
+- {{domxref("Element.setAttributeNode()")}}

files/en-us/web/api/element/removeattributens/index.md

@@ -9,7 +9,9 @@ browser-compat: api.Element.removeAttributeNS
 {{ APIRef("DOM") }}
 
 The **`removeAttributeNS()`** method of the
-{{domxref("Element")}} interface removes the specified attribute from an element.
+{{domxref("Element")}} interface removes the specified attribute with the specified namespace from an element.
+
+If you are working with HTML and you don't need to specify the requested attribute as being part of a specific namespace, use the {{domxref("Element.removeAttribute()", "removeAttribute()")}} method instead.
 
 ## Syntax
 
@@ -38,10 +40,6 @@ d.removeAttributeNS("http://www.mozilla.org/ns/specialspace", "specialAlign");
 // Now: <div id="div1" width="200px" />
 ```
 
-## Notes
-
-{{ DOMAttributeMethods() }}
-
 ## Specifications
 
 {{Specifications}}
@@ -50,5 +48,8 @@ d.removeAttributeNS("http://www.mozilla.org/ns/specialspace", "specialAlign");
 
 {{Compat}}
 
-In Firefox 3 and later, this method resets DOM values to
-their defaults.
+## See also
+
+- {{domxref("Element.hasAttributeNS()")}}
+- {{domxref("Element.getAttributeNS()")}}
+- {{domxref("Element.setAttributeNS()")}}

files/en-us/web/api/element/setattribute/index.md

@@ -12,9 +12,9 @@ Sets the value of an attribute on the specified element. If
 the attribute already exists, the value is updated; otherwise a new attribute is added
 with the specified name and value.
 
-To get the current value of an attribute, use {{domxref("Element.getAttribute",
-  "getAttribute()")}}; to remove an attribute, call {{domxref("Element.removeAttribute",
-  "removeAttribute()")}}.
+To get the current value of an attribute, use {{domxref("Element.getAttribute", "getAttribute()")}}; to remove an attribute, call {{domxref("Element.removeAttribute", "removeAttribute()")}}.
+
+If you need to work with the {{domxref("Attr")}} node (such as cloning from another element) before adding it, you can use the {{domxref("Element.setAttributeNode()", "setAttributeNode()")}} method instead.
 
 ## Syntax
 
@@ -91,8 +91,6 @@ This demonstrates two things:
   All that matters is that if the attribute is present at all, _regardless of its actual value_, its value is considered to be `true`.
   The absence of the attribute means its value is `false`. By setting the value of the `disabled` attribute to the empty string (`""`), we are setting `disabled` to `true`, which results in the button being disabled.
 
-{{DOMAttributeMethods}}
-
 ## Specifications
 
 {{Specifications}}
@@ -101,9 +99,9 @@ This demonstrates two things:
 
 {{Compat}}
 
-### Gecko notes
+## See also
 
-Using `setAttribute()` to modify certain attributes, most notably
-`value` in XUL, works inconsistently, as the attribute specifies the default
-value. To access or modify the current values, you should use the properties. For
-example, use `Element.value` instead of `Element.setAttribute()`.
+- {{domxref("Element.hasAttribute()")}}
+- {{domxref("Element.getAttribute()")}}
+- {{domxref("Element.removeAttribute()")}}
+- {{domxref("Element.toggleAttribute()")}}

files/en-us/web/api/element/setattributenode/index.md

@@ -8,8 +8,9 @@ browser-compat: api.Element.setAttributeNode
 
 {{ APIRef("DOM") }}
 
-The **`setAttributeNode()`** method adds a new
-`Attr` node to the specified element.
+The **`setAttributeNode()`** method of the {{domxref("Element")}} interface adds a new {{domxref("Attr")}} node to the specified element.
+
+If you don't need to work with the attribute node (such as cloning from another element) before adding it, you can use the {{domxref("Element.setAttribute()", "setAttribute()")}} method instead.
 
 ## Syntax
 
@@ -54,11 +55,6 @@ alert(d2.attributes[1].value);
 If the attribute named already exists on the element, that attribute is replaced with
 the new one and the replaced one is returned.
 
-This method is seldom used, with {{domxref("Element.setAttribute()")}} usually being
-used to change element's attributes.
-
-{{ DOMAttributeMethods() }}
-
 ## Specifications
 
 {{Specifications}}
@@ -70,3 +66,5 @@ used to change element's attributes.
 ## See also
 
 - {{domxref("Document.createAttribute()")}}
+- {{domxref("Element.getAttributeNode()")}}
+- {{domxref("Element.removeAttributeNode()")}}

files/en-us/web/api/element/setattributenodens/index.md

@@ -8,7 +8,11 @@ browser-compat: api.Element.setAttributeNodeNS
 
 {{ APIRef("DOM") }}
 
-`setAttributeNodeNS` adds a new namespaced attribute node to an element.
+The **`hasAttributeNS()`** method of the {{domxref("Element")}} interface adds a new namespaced {{domxref("Attr")}} node to an element.
+
+If you don't need to work with the attribute node (such as cloning from another element) before adding it, you can use the {{domxref("Element.setAttributeNS()", "setAttributeNS()")}} method instead.
+
+If you are working with HTML documents and you don't need to specify the requested attribute as being part of a specific namespace, use the {{domxref("Element.setAttribute()", "setAttribute()")}} method instead.
 
 ## Syntax
 
@@ -43,9 +47,7 @@ alert(d2.attributes[1].value); // returns: `utterleft'
 
 If the specified attribute already exists on the element, then that attribute is replaced with the new one and the replaced one is returned.
 
-Note that if you try to set without cloning the node, Mozilla gives an NS_ERROR_DOM_INUSE_ATTRIBUTE_ERR "Attribute already in use" error, as the DOM requires cloning for Attr to be reused (unlike other Nodes which can be moved).
-
-{{ DOMAttributeMethods() }}
+Note that if you try to set without cloning the node, you may see `NS_ERROR_DOM_INUSE_ATTRIBUTE_ERR` "Attribute already in use" error, as the DOM requires cloning for {{domxref("Attr")}} to be reused (unlike other Nodes which can be moved).
 
 ## Specifications
 
@@ -59,3 +61,4 @@ Note that if you try to set without cloning the node, Mozilla gives an NS_ERROR_
 
 - {{domxref("Document.createAttribute()")}}
 - {{domxref("Document.createAttributeNS()")}}
+- {{domxref("Element.getAttributeNodeNS()")}}