{{APIRef("DOM")}}
-The CharacterData abstract interface represents a {{domxref("Node")}} object that contains characters. This is an abstract interface, meaning there aren't any object of type CharacterData: it is implemented by other interfaces, like {{domxref("Text")}}, {{domxref("Comment")}}, or {{domxref("ProcessingInstruction")}} which aren't abstract.
The CharacterData abstract interface represents a {{domxref("Node")}} object that contains characters. This is an abstract interface, meaning there aren't any objects of type CharacterData: it is implemented by other interfaces like {{domxref("Text")}}, {{domxref("Comment")}}, or {{domxref("ProcessingInstruction")}}, which aren't abstract.
{{InheritanceDiagram}}
Inherits properties from its parent, {{domxref("Node")}}, and implements the {{domxref("ChildNode")}} and {{domxref("NonDocumentTypeChildNode")}} interface.
+CharacterData inherits properties from its parent, {{domxref("Node")}}.
unsigned long representing the size of the string contained in CharacterData.data.null if the specified element is the last one in the list.null if the specified element is the first one in the list.Inherits methods from its parent, {{domxref("Node")}}, and implements the {{domxref("ChildNode")}} and {{domxref("NonDocumentTypeChildNode")}} interface.
+CharacterData inherits methods from its parent, {{domxref("Node")}}.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
-{{Compat("api.CharacterData")}}
Inherits properties from its parent interface, {{DOMxRef("Node")}}, and by extension that interface's parent, {{DOMxRef("EventTarget")}}. It implements the properties of {{DOMxRef("ParentNode")}}, {{DOMxRef("ChildNode")}}, {{DOMxRef("NonDocumentTypeChildNode")}}, and {{DOMxRef("Animatable")}}.
+Element inherits properties from its parent interface, {{DOMxRef("Node")}}, and by extension that interface's parent, {{DOMxRef("EventTarget")}}.
Note: In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the http://www.w3.org/1999/xhtml namespace in both HTML and XML trees. {{ gecko_minversion_inline("1.9.2")}}
null if there's no sibling node.part attribute), returned as a {{domxref("DOMTokenList")}}.null if no prefix is specified.null if there is no sibling element.Inherits methods from its parents {{DOMxRef("Node")}}, and its own parent, {{DOMxRef("EventTarget")}}, and implements those of {{DOMxRef("ParentNode")}}, {{DOMxRef("ChildNode")}}, {{DOMxRef("NonDocumentTypeChildNode")}}, and {{DOMxRef("Animatable")}}.
+Element inherits methods from its parents {{DOMxRef("Node")}}, and its own parent, {{DOMxRef("EventTarget")}}.
The Element.nextElementSibling read-only
+property returns the element immediately following the specified one in its parent's
+children list, or null if the specified element is the last one in the list.
+// Getter +element = el.nextElementSibling; + +// No setter; read-only property ++ +
<div id="div-01">Here is div-01</div>
+<div id="div-02">Here is div-02</div>
+
+<script type="text/javascript">
+ let el = document.getElementById('div-01').nextElementSibling;
+ console.log('Siblings of div-01:');
+ while (el) {
+ console.log(el.nodeName);
+ el = el.nextElementSibling;
+ }
+</script>
+
+
+This example outputs the following into the console when it loads:
+ +Siblings of div-01: +DIV +SCRIPT+ +
| Specification | +
|---|
| {{SpecName('DOM WHATWG', '#dom-nondocumenttypechildnode-nextelementsibling', 'NonDocumentTypeChildNode.nextElementSibling')}} | +
{{Compat("api.Element.nextElementSibling")}}
+ +The Element.previousElementSibling
+read-only property returns the {{domxref("Element")}} immediately prior to the specified
+one in its parent's children list, or null if the specified element is the first one in the list.
+// Getter +element = el.previousElementSibling; + +// No setter; read-only property ++ +
<div id="div-01">Here is div-01</div>
+<div id="div-02">Here is div-02</div>
+<li>This is a list item</li>
+<li>This is another list item</li>
+<div id="div-03">Here is div-03</div>
+
+<script>
+ let el = document.getElementById('div-03').previousElementSibling;
+ document.write('<p>Siblings of div-03</p><ol>');
+ while (el) {
+ document.write('<li>' + el.nodeName + '</li>');
+ el = el.previousElementSibling;
+ }
+ document.write('</ol>');
+</script>
+
+
+This example outputs the following into the page when it loads:
+ +Siblings of div-03 + + 1. LI + 2. LI + 3. DIV + 4. DIV ++ +
| Specification | +
|---|
| {{SpecName('DOM WHATWG', '#dom-nondocumenttypechildnode-previouselementsibling', + 'NonDocumentTypeChildNode.previousElementSibling')}} | +
{{Compat("api.Element.previousElementSibling")}}
+ +The NonDocumentTypeChildNode interface contains methods that are particular to {{domxref("Node")}} objects that can have a parent, but not suitable for {{domxref("DocumentType")}}.
NonDocumentTypeChildNode is a raw interface and no object of this type can be created; it is implemented by {{domxref("Element")}}, and {{domxref("CharacterData")}} objects.
There are no inherited properties.
- -null if there is no {{domxref("Element")}} in the list prior to this node.null if there is no {{domxref("Element")}} in the list following this node.There are neither inherited nor specific methods.
- -| Specification | -Status | -Comment | -
|---|---|---|
| {{SpecName('DOM WHATWG', '#interface-nondocumenttypechildnode', 'NonDocumentTypeChildNode')}} | -{{Spec2('DOM WHATWG')}} | -Splitted the ElementTraversal interface in {{domxref("ParentNode")}}, {{domxref("ChildNode")}}, and NonDocumentTypeChildNode. The previousElementSibling and nextElementSibling are now defined on the latter.- The {{domxref("CharacterData")}} and {{domxref("Element")}} implemented the new interfaces. |
-
| {{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}} | -{{Spec2('Element Traversal')}} | -Added the initial definition of its properties to the ElementTraversal pure interface and use it on {{domxref("Element")}}. |
-
{{Compat("api.NonDocumentTypeChildNode")}}
- -The NonDocumentTypeChildNode.nextElementSibling read-only
- property returns the element immediately following the specified one in its parent's
- children list, or null if the specified element is the last one in the
- list.
var nextNode = elementNodeReference.nextElementSibling;- -
<div id="div-01">Here is div-01</div>
-<div id="div-02">Here is div-02</div>
-
-<script type="text/javascript">
- var el = document.getElementById('div-01').nextElementSibling;
- console.log('Siblings of div-01:');
- while (el) {
- console.log(el.nodeName);
- el = el.nextElementSibling;
- }
-</script>
-
-
-This example outputs the following into the console when it loads:
- -Siblings of div-01: -DIV -SCRIPT- -
This property is unsupported prior to IE9, so the following snippet can be used to add - support to IE8:
- -// Source: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js
-if(!("nextElementSibling" in document.documentElement)){
- Object.defineProperty(Element.prototype, "nextElementSibling", {
- get: function(){
- var e = this.nextSibling;
- while(e && 1 !== e.nodeType)
- e = e.nextSibling;
- return e;
- }
- });
-}
-
-// Source: https://github.com/jserz/js_piece/blob/master/DOM/NonDocumentTypeChildNode/nextElementSibling/nextElementSibling.md
-(function (arr) {
- arr.forEach(function (item) {
- if (item.hasOwnProperty('nextElementSibling')) {
- return;
- }
- Object.defineProperty(item, 'nextElementSibling', {
- configurable: true,
- enumerable: true,
- get: function () {
- var el = this;
- while (el = el.nextSibling) {
- if (el.nodeType === 1) {
- return el;
- }
- }
- return null;
- },
- set: undefined
- });
- });
-})([Element.prototype, CharacterData.prototype]);
-
-| Specification | -Status | -Comment | -
|---|---|---|
| {{SpecName('DOM WHATWG', '#dom-nondocumenttypechildnode-nextelementsibling', - 'ChildNodenextElementSibling')}} | -{{Spec2('DOM WHATWG')}} | -Split the ElementTraversal interface in {{domxref("ChildNode")}},
- {{domxref("ParentNode")}}, and {{domxref("NonDocumentTypeChildNode")}}. This
- method is now defined on the former.- The {{domxref("Element")}} and {{domxref("CharacterData")}} interfaces implemented - the new interface. |
-
| {{SpecName('Element Traversal', '#attribute-nextElementSibling', - 'ElementTraversal.nextElementSibling')}} | -{{Spec2('Element Traversal')}} | -Added its initial definition to the ElementTraversal pure interface
- and use it on {{domxref("Element")}}. |
-
{{Compat("api.NonDocumentTypeChildNode.nextElementSibling")}}
- -The NonDocumentTypeChildNode.previousElementSibling
- read-only property returns the {{domxref("Element")}} immediately prior to the specified
- one in its parent's children list, or null if the specified element is the
- first one in the list.
prevNode = elementNodeReference.previousElementSibling; -- -
<div id="div-01">Here is div-01</div>
-<div id="div-02">Here is div-02</div>
-<li>This is a list item</li>
-<li>This is another list item</li>
-<div id="div-03">Here is div-03</div>
-
-<script>
- let el = document.getElementById('div-03').previousElementSibling;
- document.write('<p>Siblings of div-03</p><ol>');
- while (el) {
- document.write('<li>' + el.nodeName + '</li>');
- el = el.previousElementSibling;
- }
- document.write('</ol>');
-</script>
-
-
-This example outputs the following into the page when it loads:
- -Siblings of div-03 - - 1. LI - 2. LI - 3. DIV - 4. DIV -- -
This property is unsupported prior to IE9, so the following snippet can be used to add - support to IE8:
- -// Source: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js
-if(!("previousElementSibling" in document.documentElement)){
- Object.defineProperty(Element.prototype, "previousElementSibling", {
- get: function(){
- var e = this.previousSibling;
- while(e && 1 !== e.nodeType)
- e = e.previousSibling;
- return e;
- }
- });
-}
-
-// Source: https://github.com/jserz/js_piece/blob/master/DOM/NonDocumentTypeChildNode/previousElementSibling/previousElementSibling.md
-(function (arr) {
- arr.forEach(function (item) {
- if (item.hasOwnProperty('previousElementSibling')) {
- return;
- }
- Object.defineProperty(item, 'previousElementSibling', {
- configurable: true,
- enumerable: true,
- get: function () {
- let el = this;
- while (el = el.previousSibling) {
- if (el.nodeType === 1) {
- return el;
- }
- }
- return null;
- },
- set: undefined
- });
- });
-})([Element.prototype, CharacterData.prototype]);
-
-| Specification | -Status | -Comment | -
|---|---|---|
| {{SpecName('DOM WHATWG', '#dom-nondocumenttypechildnode-previouselementsibling', - 'NonDocumentTypeChildNode.previousElementSibling')}} | -{{Spec2('DOM WHATWG')}} | -Splitted the ElementTraversal interface in
- {{domxref("ChildNode")}}, {{domxref("ParentNode")}}, and
- {{domxref("NonDocumentTypeChildNode")}}. This method is now defined on the
- former.- The {{domxref("Element")}} and {{domxref("CharacterData")}} interfaces implemented - the new interface. |
-
| {{SpecName('Element Traversal', '#attribute-previousElementSibling', - 'ElementTraversal.previousElementSibling')}} | -{{Spec2('Element Traversal')}} | -Added its initial definition to the ElementTraversal pure interface
- and use it on {{domxref("Element")}}. |
-
{{Compat("api.NonDocumentTypeChildNode.previousElementSibling")}}
- -