按HTML查找

按HTML查找: 在整个页面或指定父元素下，查找属性或标签符合要求得元素对象。
何时: 只要按基本的条件有选择的查找元素时
4种:
1. 按id查找:
var elem=document.getElementById("id");
强调: 只能用document调用！
仅返回一个元素!
2. 按标签名查找:
var elems=parent.getElementsByTagName("标签名");
强调: 任何父元素都能调用！
返回父元素下所有同名标签的元素的集合!
即使仅返回一个元素，也会放在集合中
如果想取出唯一的一个元素，必须加[0]
不仅查找直接子节点，而且查找所有子代节点
3. 按name属性查找: (了解)
var elems=document.getElementsByName("name");

4. 按class属性查找: (了解) (兼容性问题)
var elems=parent.getElementsByClassName("class");

html

<!DOCTYPE HTML>
<html>
<head>
    <title>使用Selector API实现购物车客户端计算</title>
    <meta charset="utf-8"/>
    <style>
        table {
            width: 600px;
            text-align: center;
            border-collapse: collapse;
        }

        td, th {
            border: 1px solid black
        }

        td[colspan="3"] {
            text-align: right;
        }
        /*设置id为data的tacle的tbody中每行最后一个td背景为红色*/
        table#data>tbody td:last-child{
            background:red;
        }
        /*设置id为data的table的tfoot中最后一个td背景颜色为绿色*/
        table#data>tfoot td:last-child{
            background: green;
        }
    </style>
    <script src="js/6_2.js"></script>
</head>
<body>
<table id="data">
    <thead>
    <tr>
        <th>商品名称</th>
        <th>单价</th>
        <th>数量</th>
        <th>小计</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>iPhone6</td>
        <td>&yen;4488</td>
        <td>
            <button>-</button>
            <span>1</span>
            <button>+</button>
        </td>
        <td>&yen;4488</td>
    </tr>
    <tr>
        <td>iPhone6 plus</td>
        <td>&yen;5288</td>
        <td>
            <button>-</button>
            <span>1</span>
            <button>+</button>
        </td>
        <td>&yen;5288</td>
    </tr>
    <tr>
        <td>iPad Air 2</td>
        <td>&yen;4288</td>
        <td>
            <button>-</button>
            <span>1</span>
            <button>+</button>
        </td>
        <td>&yen;4288</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td colspan="3">Total:</td>
        <td>&yen;14064</td>
    </tr>
    </tfoot>
</table>
<script src="js/6_2.js"></script>
</body>
</html>

js

//找到id为data的table
var tabel=document.getElementById("data");
//在table下找button元素保存在btns中
var btns=tabel.getElementsByTagName("button");
//遍历btns中每个btn
for(var i=0,len=btns.length;i<len;i++){
  //为当前btn绑定单击事件为calc
    btns[i].onclick=calc;
}
//定义函数calc，相应单击事件
function calc() {//this->btn
    //数量变化
    var span=//找到当前点中的按钮旁边的span
        this.parentNode.getElementsByTagName("span")[0];
    //获得span的内容
    var n=parseInt(span.innerHTML);
    //如果按钮是+就n+1，否则，如果n>1，就可-1，否则n不变
    n+=this.innerHTML=="+"?1:n>1?-1:0;
    //设置span的内容为n
    span.innerHTML=n;

    //小计变化
    //获得当前按钮的父节点的前一个兄弟的内容，选取1到结尾的子字符串，转为浮点数，保存在price中
    var price=parseFloat(
        this.parentNode
            .previousElementSibling
            .innerHTML
            .slice(1)
    );
    //获得当前按钮的父节点的后一个兄弟，设置其内容为
       //price*n按2位小数四舍五入，再开头拼¥
    this.parentNode.nextElementSibling.innerHTML="¥"+(price*n).toFixed(2);

    //计算总计
    //获得id为data的table下的tbody中的每行最后一个td
    var tds=document.querySelectorAll(
        "table#data>tbody td:last-child"
    );
    //遍历tds中每个td，同时定义sum=0
    for (i=0,sum=0;i<tds.length;i++){
      //获得当前td的内容，选取1到结尾的子字符串，转为浮点数，累加到sum
    sum+=parseFloat(tds[i].innerHTML.slice(1));
} //（遍历结束）
    //获得id为data的table下的tfoot中的最后一个td
    var td=document.querySelector(
        "table#data>tfoot td:last-child"
    );
    //设置td的内容为¥+sum按2位小数四舍五入
    td.innerHTML="¥"+sum.toFixed(2);
}

猜你喜欢