1.dom元素对象

html中每个标签都可以看做一个元素对象
可以通过document对象获取如何通过document对象获取document.getElementById(“id属性值”);
返回对拥有指定 id 的第一个对象的引用。
document.getElementsByClassName(“class属性值”);
返回文档中所有指定类名的元素数组
document.getElementsByName(“name属性值”);
返回带有指定名称的对象数组。
document.getElementsByTagName(“标签名”)
返回带有指定标签名的对象数组。常用属性

className 设置/获取class属性
innerText 设置/获取标签内部文本，如果文本包含html标签，不会被解析
innerHTML 设置/获取标签内部html，如果文本包含html标签，会被解析
parentNode 获取当前标签父标签
style 设置或返回元素的样式属性(元素对象.style.css属性 = 值) 常用方法
removeAttribute(“属性名”)；删除该属性
getElementsByTagName(“标签名”)；根据标签名获取该元素内的元素对象
getElementsByClassName(“class属性名”)；根据class属性值获取该元素内的元素对象
remove()；删除该元素对象
setAttribute(“属性名”,”值”); 设置该元素对象的该属性值
1.1霓虹灯案例
所用的属性和方法
className 设置/获取class属性

removeAttribute(“属性名”)；删除该属性

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <title></title>
      <style type="text/css">
          .pc {
              color: blue;
          }
      </style>
  </head>
  <body>
      <h3>登高</h3>
      <p>风急天高猿啸哀，</p>
      <p>渚清沙白鸟飞回。</p>
      <p>无边落木萧萧下，</p>
      <p>不尽长江滚滚来。</p>
      <button type="button" onclick="changeColor();">修改标题颜色</button>
  </body>
  <!-- 
      元素对象：
          属性
              className  设置或获取class属性
          方法
              removeAttribute("属性名")
   -->
  <script type="text/javascript">
      function changeColor() {
          /* 
              length
              可以通过下标获取
           */
          var ps = document.getElementsByTagName("p");
          var index = 0;
          setInterval(function(){
              //每次都先把所有样式删除
              for(var i=0; i<ps.length; i++) {
                  ps[i].removeAttribute("class");
              }
              //为指定标签添加样式
              ps[index++%4].className = "pc";
          },500);
      }
  </script>
</html>

1.2跑马灯案例

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <title></title>
      <style type="text/css">
          div {
              width: 100px;
              height: 100px;
              border: 1px solid #0000FF;
              margin: 10px;
              float: left;
          }
          .pc {
              background-color: #FF0000;
          }
      </style>
  </head>
  <body>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <button type="button" onclick="changeColor();">修改标题颜色</button>
  </body>
  <script type="text/javascript">
      function changeColor() {
          /* 
              length
              可以通过下标获取
           */
          var divs = document.getElementsByTagName("div");
          var index = 0;
          setInterval(function(){
              //每次都先把所有样式删除
              for(var i=0; i<divs.length; i++) {
                  divs[i].removeAttribute("class");
              }
              //为指定标签添加样式
              divs[index++%4].className = "pc";
          },500);
      }    
  </script>
</html>

1.3计算总金额案例

所用到的属性和方法

innerText

getElementsByTagName(“标签名”) ```html <!DOCTYPE html>

  <meta charset="utf-8">
  <title></title>

  <table border="1px" >
      <tr>
          <td>商品名称</td>
          <td>价格</td>
          <td>数量</td>
          <td>金额</td>
      </tr>
      <tr>
          <td>iphone14</td>
          <td>8000</td>
          <td>2</td>
          <td>16000</td>
      </tr>
      <tr>
          <td>特斯拉Model4</td>
          <td>300000</td>
          <td>3</td>
          <td>900000</td>
      </tr>
      <tr>
          <td>外星人</td>
          <td>20000</td>
          <td>3</td>
          <td>60000</td>
      </tr>
      <tr>
          <td colspan="3" style="text-align: right;">
              <button type="button" onclick="totalMoney();">总计</button>
          </td>
          <td id="totalMoney"></td>
      </tr>
  </table>

</body>
<script type="text/javascript">
/* 
    元素：
        属性
            innerText   : 获取标签内的文本
            innerHTML   : 获取标签内的html
        方法
            getElementsByTagName("标签名")
            getElementsByClassName("class属性名")
 */
    function totalMoney() {
        //1. 获取当前当前table    元素对象
        var table = document.getElementsByTagName("table")[0];
        //2. 获取table中 所有的tr
        var trs = table.getElementsByTagName("tr");
        var sum = 0;
        for(var i=1; i<trs.length-1; i++) {
            var tr = trs[i];
            //获取每个tr中的第四个td
            var td = tr.getElementsByTagName("td")[3];
            //获取td中文本（string）
            var money = td.innerText;
            sum += parseFloat(money);
        }
        //为元素的innerText属性赋值
        document.getElementById("totalMoney").innerHTML = sum;
    }
</script>

<a name="kN7pt"></a>
## 1.3通过js设置标签内容
所用的属性
- innerHTML
- innerText
```html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <p id="pi" class="pc" name="pn">
        </p>
        <p></p>
    </body>
    <script>
        var p1 = document.getElementById("pi");
        var p2 = document.getElementsByTagName("p")[1];
        var p3 = document.getElementsByClassName("pc")[0];
        var p4 = document.getElementsByName("pn")[0];
        /* 
            innerHTML : 设置一个标签内部的html
                如果文本包含html标签，会被解析
            innerText ： 设置一个标签内部的文本
                如果文本包含html标签，不会被解析
         */
        p1.innerHTML = '江郎<span style="color: red;">才</span>尽';
        p2.innerText = '江郎<span style="color: red;">才</span>尽';
    </script>
</html>

1.4删除商品案例

所用的属性和方法

parentNode

remove() ```html <!DOCTYPE html>

  <meta charset="utf-8">
  <title></title>

  <table border="1px" width="400px">
      <tr>
          <td>商品名称</td>
          <td>价格</td>
          <td>数量</td>
          <td>金额</td>
          <td>操作</td>
      </tr>
      <tr>
          <td>iphone14</td>
          <td>8000</td>
          <td>2</td>
          <td>16000</td>
          <td>
              <button type="button" onclick="del(this)">删除</button>
          </td>
      </tr>
      <tr>
          <td>特斯拉Model4</td>
          <td>300000</td>
          <td>3</td>
          <td>900000</td>
          <td>
              <button type="button" onclick="del(this)">删除</button>
          </td>
      </tr>
      <tr>
          <td>外星人</td>
          <td>20000</td>
          <td>3</td>
          <td>60000</td>
          <td>
              <button type="button" onclick="del(this)">删除</button>
          </td>
      </tr>
  </table>

</body>
<script type="text/javascript">
    /* 
        在点击事件中执行的方法，可以通过this关键，把当前标签（元素传到）方法中
     */
    function del(btn) {
        var flag = confirm("确认删除该商品？");
        if (flag) {
            btn.parentNode.parentNode.remove();
        }
    }
</script>

<a name="Clqya"></a>
## 1.5通过js修改样式
修改样式：<br />元素对象.style.css属性 = 值;
```html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            div {
                color: red;
                background-color: #0000FF;
                font-size: 20px;
                font-weight: 900;
            }
        </style>
    </head>
    <body>
        <p id="pi">江郎才尽</p>
        <div>大郎才不尽</div>
    </body>
    <script type="text/javascript">
        /* 
            可以通过元素对象的style属性定义该标签的样式
            样式属性名和css属性名相对应
                css名使用中杠，style属性使用驼峰法
                color        --   color
                font-size    --   fontSize
         */
        var p = document.getElementById("pi");
        p.style.color = "red";
        p.style.backgroundColor="yellow";
        p.style.fontSize = "20px";
        p.style.fontWeight = 900;
    </script>
</html>

2.html对象

每个标签，都是一个元素对象，但同时又是其独特的html对象
如：
input 是元素对象同时它又是一个type=text的input对象
p 是元素对象同时它又是一个p对象
因为不同的标签的html标签，可能会拥有自己独特的属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        用户名：<input id="realName" type="text" value="dd"/>
        <p id="pi"></p>
        <button type="button" onclick="disable(this)">禁用此按钮</button>
    </body>
    <script type="text/javascript">
        //元素对象
        var input = document.getElementById("realName");
        var p = document.getElementById("pi");
        /* 
            input  元素对象  同时它又是一个type=text的input对象
            p      元素对象  同时它又是一个p对象
            因为不同的标签的html标签，可能会拥有自己独特的属性
         */
        /* 
            input是元素对象
                    可以使用元素对象，所有的属性和方法
                同时它又是type=text的input  html对象
                    可以使用该html对象的属性和方法
         */
        input.value = "hiahia";
        function disable(btn) {
            btn.disabled = true;
        }
    </script>
</html>

3.购物车案例

1.1 添加购物车
1.2 计算总金额
1.3 删除商品
1.4 修改商品数量
1.5 如果添加重复商品，不新增一行，而是修改商品数量
1.6 添加，修改，删除商品，修改库存

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            table {
                border-collapse: collapse;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <h3 align="center">商品列表</h3>
        <table border="1px" width="400px" align="center">
            <tr>
                <td>商品名称</td>
                <td>价格</td>
                <td>库存</td>
                <td>操作</td>
            </tr>
            <tr>
                <td>iphone14</td>
                <td>8800</td>
                <td>10</td>
                <td>
                    <button type="button" onclick="addCar(this)">加入购物车</button>
                </td>
            </tr>
            <tr>
                <td>华为mate50</td>
                <td>9000</td>
                <td>30</td>
                <td>
                    <button type="button" onclick="addCar(this)">加入购物车</button>
                </td>
            </tr>
            <tr>
                <td>bate耳机</td>
                <td>1400</td>
                <td>30</td>
                <td>
                    <button type="button" onclick="addCar(this)">加入购物车</button>
                </td>
            </tr>
            <tr>
                <td>VR眼睛</td>
                <td>4000</td>
                <td>15</td>
                <td>
                    <button type="button" onclick="addCar(this)">加入购物车</button>
                </td>
            </tr>
            <tr>
                <td>PS5</td>
                <td>4000</td>
                <td>3</td>
                <td>
                    <button type="button" onclick="addCar(this)">加入购物车</button>
                </td>
            </tr>
        </table>
        <h3 align="center">购物车</h3>
        <table border="1px" width="500px" align="center">
            <thead>
                <tr>
                    <td>商品名称</td>
                    <td>价格</td>
                    <td>商品数量</td>
                    <td>金额</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody id="productCar">
                <!-- <tr>
                    <td>iphone14</td>
                    <td>8800</td>
                    <td>
                        <button type="button">-</button>
                        <span>1</span>
                        <button type="button">+</button>
                    </td>
                    <td>8800</td>
                    <td>
                        <button type="button">删除</button>
                    </td>
                </tr> -->
            </tbody>
            <tr>
                <td colspan="4">总计</td>
                <td id="totalMoney">0</td>
            </tr> 
        </table>
    </body>
    <script type="text/javascript">
        //添加购物车的方法
        function addCar(btn){
            //获取tr
            var tr = btn.parentNode.parentNode;
            //获取当前tr下所有td
            var tds = tr.getElementsByTagName("td");
            //获取商品名称
            var proName = tds[0].innerText;
            //获取商品价格
            var proPrice = tds[1].innerText;
            //获取商品的库存对象
            var inventory = tds[2];
            //获取库存的数量
            var inNum = inventory.innerText;
            //判断库存是否为0
            if(inNum == 0){
                alert("没有库存了，加入购物车失败");
                return;
            }
            //获取购物车中的所有商品的名称
            var tbody = document.getElementById("productCar");
            var proCarTrs = tbody.getElementsByTagName("tr");
            for (var i = 0; i < proCarTrs.length; i++) {
                //如果商品已经存在，则只增加商品的数量
                if(proName == proCarTrs[i].getElementsByTagName("td")[0].innerText){
                    changeNum(proCarTrs[i].getElementsByTagName("button")[1],1)
                    return;
                }
            }
            var html =  '<tr>'+
                            '<td>'+proName+'</td>'+
                            '<td>'+proPrice+'</td>'+
                            '<td>'+
                                '<button type="button" onclick="changeNum(this,-1)">-</button>'+
                                 ' <span>1</span> ' +
                                '<button type="button" onclick="changeNum(this,1)">+</button>'+
                            '</td>'+
                            '<td>8800</td>'+
                            '<td>'+
                                '<button type="button" onclick="del(this)">删除</button>'+
                            '</td>'+
                        '</tr>';
            var newTr = tbody.insertRow();
            newTr.innerHTML = html;
            inventory.innerText = parseInt(inventory.innerText) - 1;    
            sumMoney();
        }
        //计算总金额方法
        function sumMoney(){
            //获取所有商品金额
            var proCar = document.getElementById("productCar");
            //获取所有tr
            var trs = proCar.getElementsByTagName("tr");
            var sum = 0;
            //获取每个商品的金额
            for (var i = 0; i < trs.length; i++) {
                var money = trs[i].getElementsByTagName("td")[3].innerText;
                sum += parseFloat(money);
            }
            //将金额总计写入
            document.getElementById("totalMoney").innerText = sum;
        }
        //删除商品的方法
        function del(btn){
            if(confirm("是否删除该商品")){
                var tr = btn.parentNode.parentNode;
                var num = tr.getElementsByTagName("td")[2].getElementsByTagName("span")[0].innerText;
                carNum(btn,parseInt(num))
                btn.parentNode.parentNode.remove();    
            }
            sumMoney();
        }
        //修改商品数量的方法
        function changeNum(btn,n){
            //获取商品的数量
            var td = btn.parentNode;
            var span = td.getElementsByTagName("span")[0];
            var num = span.innerText;
            //获得商品价格
            var tr = td.parentNode;
            var price = tr.getElementsByTagName("td")[1].innerText;
            //获取商品金额
            var money = tr.getElementsByTagName("td")[3];
            //判断商品数量是否大于0
            if(n == -1){
                if(num == 0){
                    alert("数量为0");
                    return;
                }
            }
            var flag = carNum(btn,-n);
            if(flag){
                return;
            }
            //商品数量写入span标签中
            span.innerText = parseInt(num)+n;
            //更新商品金额
            money.innerText = (parseInt(num)+n)*parseFloat(price);
            //更新总金额
            sumMoney();
        }
        //修改库存的方法
        function carNum(btn,n){
            //获取tr
            var trs = btn.parentNode.parentNode;
            //获取购物车的商品名称
            var td = trs.getElementsByTagName("td")[0];
            var CarName = td.innerText;
            //获取商品列表的对应商品
            var table = document.getElementsByTagName("table")[0];
            var tr = table.getElementsByTagName("tr");
            for (var i = 1; i < tr.length; i++) {
                var tds = tr[i].getElementsByTagName("td");
                if(CarName == tds[0].innerText){
                    if(n == -1){
                        if(tds[2].innerText == 0){
                            alert("库存不足");
                            return true;
                        }
                    }
                    tds[2].innerText = parseInt(tds[2].innerText) + n;
                }
            }
        }
    </script>
</html>

第二阶段

JS-03