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