Como posso classificar elementos no DOM utilizando JavaScript puro, para ser mais claro, supomos que temos uma página de produtos estática, além dos produtos tem um campo para classificar os mesmos pelo preço.
body {
text-align: center
}
select {
border: 0;
font-family: sans-serif !important;
padding: 4px;
text-transform: uppercase;
margin-bottom: 10px;
}
.clearfix {
overflow: auto;
}
.produtos {
display: block;
margin: 0 auto;
width: 90%;
}
.produtos .item {
float: left;
margin-right: 1%;
width: 24%;
}
.produtos .item:nth-child(4n+0) {
margin-right: 0;
}
.produtos .item h2 {
font-family: sans-serif;
font-size: 1.5em;
margin: 0;
padding: 0;
}
.produtos .item h3 {
font-family: sans-serif;
font-size: 1em;
font-weight: 300;
}
<select>
<option>Ordenar por:</option>
<option value="maior_preco">Maior Preço</option>
<option value="menor_preco">Menor Preço</option>
</select>
<div class="produtos clearfix">
<div class="item">
<img src="http://via.placeholder.com/300x150" />
<h2>Produto 04</h2>
<h3>R$ 1.564,00</h3>
</div>
<div class="item">
<img src="http://via.placeholder.com/300x150" />
<h2>Produto 07</h2>
<h3>R$ 322,00</h3>
</div>
<div class="item">
<img src="http://via.placeholder.com/300x150" />
<h2>Produto 01</h2>
<h3>R$ 10,99</h3>
</div>
<div class="item">
<img src="http://via.placeholder.com/300x150" />
<h2>Produto 03</h2>
<h3>R$ 153,99</h3>
</div>
<div class="item">
<img src="http://via.placeholder.com/300x150" />
<h2>Produto 06</h2>
<h3>R$ 2,00</h3>
</div>
<div class="item">
<img src="http://via.placeholder.com/300x150" />
<h2>Produto 08</h2>
<h3>R$ 500,00</h3>
</div>
<div class="item">
<img src="http://via.placeholder.com/300x150" />
<h2>Produto 05</h2>
<h3>R$ 2.999,99</h3>
</div>
<div class="item">
<img src="http://via.placeholder.com/300x150" />
<h2>Produto 02</h2>
<h3>R$ 768,99</h3>
</div>
</div>