HTML | DOM anteriorPropiedad del hermano

La propiedad previousSibling se usa para devolver el Node anterior del Node especificado como objeto Node o nulo si el Node especificado es el primero en la lista. Es una propiedad de sólo lectura. 

Sintaxis:

node.previousSibling

Valor devuelto: esta propiedad devuelve un hermano anterior del Node especificado o nulo si el Node actual no tiene ningún hermano anterior. 

Ejemplo: 

html

<html>
    <head>
       <title>DOM previousSibling Property</title>
    </head>
    <body style = "text-align: center">
        <h1 style = "color:green">
            GeeksforGeeks
        </h1>
         
        <h2>
            DOM previousSibling Property
        </h2>
         
        <div>
            <span id="p1">GeeksforGeeks! </span><span id="p2">
               A computer science portal for geeks.
            </span>
        </div>
        <br>
         
        <button onclick="geek()">Click me!</button>
        <br><br>
        <p id="p" style = "margin:auto; width: 40%"></p>
 
        <!-- Function to return the previous node.-->
 
        <script>
        function geek() {
          var x =
              document.getElementById("p2").previousSibling.innerHTML;
          document.getElementById("p").innerHTML = x;
          document.getElementById("p").style.color = "white";
          document.getElementById("p").style.background = "green";
        }
        </script>
    </body>
</html>

Producción: 

Antes de hacer clic en el botón: 

previousSibling 

Después de hacer clic en el botón:

 previousSibling 

Nota: No coloque espacios en blanco entre dos elementos hermanos, de lo contrario, el resultado será «indefinido». 

Navegadores compatibles: los navegadores compatibles con la propiedad PreviousSibling se enumeran a continuación:

  • Google Chrome 1 y superior
  • Borde 12 y superior
  • Internet Explorer 5.5 y superior
  • Firefox 1 y superior
  • Ópera 12.1 y superior
  • Safari 1 y superior

Publicación traducida automáticamente

Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *