Definition and Usage nextSibling ..
The nextSibling property returns the node immediately following the specified node, in the same tree level.
The returned node is returned as a Node object.
The difference between this property and nextElementSibling, is that nextSibling returns the next sibling node as an element node, a text node or a comment node, while nextElementSibling returns the next sibling node as an element node (ignores text and comment nodes).
This property is read-only.
Tip: Use the previousSibling property to return the previous node of the specified node, in the same tree level.
Definition and Usage nextElementSibling..
The nextElementSibling property returns the element immediately following the specified element, in the same tree level.
The difference between this property and nextSibling, is that nextSibling returns the next sibling node as an element node, a text node or a comment node, while nextElementSibling returns the next sibling node as an element node (ignores text and comment nodes).
This property is read-only.
Tip: Use the previousElementSibling property to return the previous element of the specified element.
CODING:The nextSibling property returns the node immediately following the specified node, in the same tree level.
The returned node is returned as a Node object.
The difference between this property and nextElementSibling, is that nextSibling returns the next sibling node as an element node, a text node or a comment node, while nextElementSibling returns the next sibling node as an element node (ignores text and comment nodes).
This property is read-only.
Tip: Use the previousSibling property to return the previous node of the specified node, in the same tree level.
Return Value: A Node object, representing the next sibling of the node, or null if there is no next sibling
Syntax :node.nextSibling
Syntax :node.nextSibling
The nextElementSibling property returns the element immediately following the specified element, in the same tree level.
The difference between this property and nextSibling, is that nextSibling returns the next sibling node as an element node, a text node or a comment node, while nextElementSibling returns the next sibling node as an element node (ignores text and comment nodes).
This property is read-only.
Tip: Use the previousElementSibling property to return the previous element of the specified element.
Return Value: A Node object, representing the next sibling of an element, or null if there is no next sibling.
Syntax : node.nextElementSibling
Syntax : node.nextElementSibling
Differents way how to declare nextSibling & nextElementSibling Property in program.
<!DOCTYPE html>
<html>
<body>
<h4 id="h4">Soft Languages:</h4>
<ul>
<li id="lan">C++</li><li>JAVA</li><li>PYTHON</li></ul>
<button onclick="con()">Next of C++</button>
<h4 id="h42">Web Languages:</h4>
<select size="4">
<option id="Select">HTML</option><option>CSS</option><option>JAVA SCRIPT</option><option>XML</option></select><br><br>
<button onclick="con2()">Next of HTML</button>
<p><strong>Note:</strong> Whitespace inside elements is considered as text, and text is considered as nodes.If you add whitespace before the first LI element, the result will be "undefined".</p>
<script>
function con() {
var x = document.getElementById("lan").nextSibling.innerHTML;
document.getElementById("h4").innerHTML += x;
}
function con2() {
var a = document.getElementById("Select").nextElementSibling;
document.getElementById("h42").innerHTML += a.text;
}
</script>
</body>
</html>
<html>
<body>
<h4 id="h4">Soft Languages:</h4>
<ul>
<li id="lan">C++</li><li>JAVA</li><li>PYTHON</li></ul>
<button onclick="con()">Next of C++</button>
<h4 id="h42">Web Languages:</h4>
<select size="4">
<option id="Select">HTML</option><option>CSS</option><option>JAVA SCRIPT</option><option>XML</option></select><br><br>
<button onclick="con2()">Next of HTML</button>
<p><strong>Note:</strong> Whitespace inside elements is considered as text, and text is considered as nodes.If you add whitespace before the first LI element, the result will be "undefined".</p>
<script>
function con() {
var x = document.getElementById("lan").nextSibling.innerHTML;
document.getElementById("h4").innerHTML += x;
}
function con2() {
var a = document.getElementById("Select").nextElementSibling;
document.getElementById("h42").innerHTML += a.text;
}
</script>
</body>
</html>
Comments
Post a Comment