Javascript:การ Javascript แบบไม่ต้องพึ่ง Jquery โดยใช้ getElementsByTagName
200909 Jun
วันนี้เรามาดูการเขียน Javascript แบบไม่ต้องพึ่ง Jquery ในกรณีต้องการ Element เป็น iindex
โดยปรกติถ้าเรา Jquery ก้อคงจะง่าย ๆ ในการดึง innerHTML มาใช้จากตัวอย่างจากตัวอย่างเราจะเอาค่าใน Span ออกมาเป็นตัวเลขอย่างเดียวโดยไม่มี HTML ออกมาหลังจากนั้นนำมา Compare ค่าแล้วทำการ Visibility
วิธีการจะเกิดตามลำดับ
getElementById() - >getElementsByTagName('span') array(index 1) --> string replace() --> parseFloat() มาแปลงทศนิยม
<div id="price">€ 40.15</div>
<div id="was">
<span class="waslabel">Was</span>
<span>€ 40.00</span>
</div>
<script>
if(document.getElementById("was")){
var price_text =parseFloat(document.getElementById("price").innerHTML.replace(/€/g,""));
var span_text =parseFloat(document.getElementById("was").getElementsByTagName("span")[1].innerHTML.replace(/€ /g,""));
if(price_text > span_text){ document.getElementById("was").style.visibility = 'hidden'; }
}
</script>
<div id="was">
<span class="waslabel">Was</span>
<span>€ 40.00</span>
</div>
<script>
if(document.getElementById("was")){
var price_text =parseFloat(document.getElementById("price").innerHTML.replace(/€/g,""));
var span_text =parseFloat(document.getElementById("was").getElementsByTagName("span")[1].innerHTML.replace(/€ /g,""));
if(price_text > span_text){ document.getElementById("was").style.visibility = 'hidden'; }
}
</script>
สั้นกระทัดรัดตาม Style Jquery
J query Style
var span_text =parseFloat($("#was span:eq(1)").html().replace(/€ /g,""));
var span_text =parseFloat($("#was span:eq(1)").html().replace(/€ /g,""));
ยาวได้ใจแต่เข้าใจว่า แบบ Javascript function ถ้าไม่มี Jquery คงลำบากขนาดไม่ลงไม่ถึงระดับ classname ซึ่งอาจจะต้องหา Function getElementsByClassName ซึ่งต้องเขียนเองอีกต่างหาก แต่บทความนี้สื่อให้รู้ว่าถ้าไม่ Jquery ก้อสามารถใช้ dom selector ได้ตามแบบ Javascript
JavaScript standard
var span_text =parseFloat(document.getElementById("was").getElementsByTagName("span")[1].innerHTML.replace(/€ /g,""));
var span_text =parseFloat(document.getElementById("was").getElementsByTagName("span")[1].innerHTML.replace(/€ /g,""));