day35/36-DOM编程

一.获取元素

dom对象和dom集合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    用户名:<input type="text" id="username" value="小宝">
    密码:<input type="text" id="passwd" value="小宝">
    兴趣爱好:吃<input type="checkbox" name="hobby" value="eat">
              喝<input type="checkbox" name="hobby" value="drink">
              玩<input type="checkbox" name="hobby" value="play">
    <p>今天星期三</p>

    <script>
        let usernamenode = document.getElementById("username");
        alert(usernamenode);
        let nodes = document.getElementsByTagName("input");
        alert(nodes[0]);
        let hobbynodes = document.getElementsByName("hobby");
        alert(hobbynodes[0]);
        let pnode = document.getElementsByTagName("p")[0];
        alert(pnode.parentNode.nodeName);


    </script>
</body>
</html>

  

二. 元素的属性

innerText和innerHTML区别
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p class="c1">今天星期三</p>

    <script>
        let pnode = document.getElementsByClassName("c1")[0];
        alert(pnode.innerHTML);
        pnode.innerHTML = "<h1>更改html</h1>";
        alert(pnode.innerText);
        alert(pnode.innerHTML);
    </script>
</body>
</html>

  

三.value属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" id="username" value="凤姐">
    <input type="button" onclick="set()" value="设置输入框">
    <input type="button" onclick="get()" value="获取输入框">
    <script>
        function set() {
            document.getElementById("username").value="奥巴马";
        }
        function get() {
            value = document.getElementById("username").value;
            alert(value);
        }
    </script>
</body>
</html>

  

四. 购物车案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function selectAll() {
            //获取第一个checkbox的状态
            var status = document.getElementById("cb").checked;
            //alert(status);
            //获取所有checkbox
            var cbNodes = document.getElementsByTagName("input");
            for (var i = 1; i < cbNodes.length; i++) {
                cbNodes[i].checked = status;
            }
        }
    </script>
</head>
<body>
    <table border="1" cellspacing="0" width="600">
        <tr>
            <th><input type="checkbox" id="cb" onclick="selectAll()"/></th>
            <th>商品名称</th>
            <th>价格</th>
            <th>库存</th>
        </tr>
        <tr align="center">
            <td><input type="checkbox"/></td>
            <td>电冰箱</td>
            <td>2000</td>
            <td>100</td>
        </tr>
        <tr align="center">
            <td><input type="checkbox"/></td>
            <td>洗衣机</td>
            <td>2500</td>
            <td>100</td>
        </tr>
        <tr align="center">
            <td><input type="checkbox"/></td>
            <td>空调器</td>
            <td>3000</td>
            <td>100</td>
        </tr>
    </table>
</body>
</html>

  

五. 创建/删除/插入节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>编程</p>
    <p>python</p>

    <script>
        let node = document.createElement("p");
        node.innerHTML = "<h1>go</h1>";
        let bodynode = document.body;
        bodynode.appendChild(node);


        setTimeout(function () {
            let node1 = document.getElementsByTagName("p")[0];
            document.body.removeChild(node1);
        },1000);

        let node2 = document.createElement("p");
        node2.innerHTML = "<h1>java</h1>";
        let node3 = document.getElementsByTagName("p")[0];
        document.body.insertBefore(node2,node3);
    </script>
</body>
</html>

  

 六. 添加和删除附件

inputnode传参
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table>
        <tr>
            <td><input type="file"/></td>
            <!-- this代表当前的input元素 -->
            <td><input type="button" value="删除" onclick="delRow(this)"/></td>
        </tr>
        <tr>
            <td><input type="file"/></td>
            <td><input type="button" value="删除" onclick="delRow(this)"/></td>
        </tr>
        <tr id="lastRow">
            <td colspan="2">
                <input type="button" value="添加" onclick="addRow()"/>
            </td>
        </tr>
    </table>


    <script>

        function delRow(inputnode) {
            let trnode = inputnode.parentNode.parentNode;
            let tbodynode = trnode.parentNode;
            tbodynode.removeChild(trnode);
        }
        
        function addRow() {
            let trnode = document.createElement("tr");
            let td1 = document.createElement("td");
            let td2 = document.createElement("td");
            td1.innerHTML = "<input type=\"file\"/>";
            td2.innerHTML = "<input type=\"button\" value=\"删除\" onclick=\"delRow(this)\"/>";
            trnode.appendChild(td1);
            trnode.appendChild(td2);
            let tbodynode = document.getElementsByTagName("tbody")[0];
            let lastnode = document.getElementById("lastRow");
            tbodynode.insertBefore(trnode,lastnode);
        }
    </script>
</body>
</html>

  

七. 生成并显示验证码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>



</head>
<body>
    <span id="vrcode" style="display: none"></span>
    <script>
        var arr = ["中", "a", "9", "国", "c", "3"]; //0~5
        //生成四位数验证码
        var vrcode = "";
        for (var i = 0; i < 4; i++) {
            var index = Math.floor(Math.random() * arr.length);
            vrcode += arr[index];
        }
        let spannode = document.getElementById("vrcode");
        spannode.innerText = vrcode;
        spannode.style.backgroundColor = "grey";
        spannode.style.color = "#fff";
        spannode.style.fontSize = "20px";
        spannode.style.textDecoration = "line-through";
        spannode.style.display = "block";
        spannode.style.width = "80px";
        spannode.style.textAlign = "center";




    </script>
</body>
</html>

  

八. 计时器

绑定事件两种方式:

1. 在body中onclick函数

2. 在script中node.onclick=函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input id="timer" type="text" value="">
    <button class="start">start</button>
    <button class="stop">stop</button>
    <script>
        let startnode = document.getElementsByClassName("start")[0];
        let stopnode = document.getElementsByClassName("stop")[0];
        let inputnode = document.getElementById("timer");
        let ID;
        startnode.onclick = function () {
            if (ID === undefined){
                start();
                ID = setInterval(start,1000);
            }

        }
        function start() {
            let now = (new Date()).toLocaleString();
            inputnode.value = now;
        }
        stopnode.onclick = function () {
            clearInterval(ID);
            ID = undefined;
        }
    </script>
</body>
</html>

  

九. 菜单栏案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
          .left{
              width: 20%;
              height: 500px;
              float: left;
              background-color: wheat;
          }

          .right{
              float: left;
              width: 80%;
              height: 500px;
              background-color: lightgray;

          }

           .title{
               text-align: center;
               line-height: 40px;
               background-color: #0e90d2;
               color: white;
           }
        .item{
            padding: 10px;
        }

        .hide{
            display: none;
        }
    </style>
</head>
<body>



<div class="outer">
      <div class="left">
           <div class="item">
               <div class="title">菜单一</div>
               <ul class="con">
                   <li>111</li>
                   <li>111</li>
                   <li>111</li>
               </ul>
           </div>
          <div class="item">
               <div class="title">菜单二</div>
               <ul class="con hide">
                   <li>222</li>
                   <li>222</li>
                   <li>222</li>
               </ul>
           </div>
          <div class="item">
               <div class="title">菜单三</div>
               <ul class="con hide">
                   <li>333</li>
                   <li>333</li>
                   <li>333</li>
               </ul>
           </div>
      </div>
      <div class="right"></div>
</div>
<script>
    let titlenode = document.getElementsByClassName("title");
    for (var i=0;i<titlenode.length;i++){
        titlenode[i].onclick = function () {
            for (var j=0;j<titlenode.length;j++){
                titlenode[j].nextElementSibling.classList.add("hide");
            }
            this.nextElementSibling.classList.remove("hide");
        }
    }

</script>


</body>
</html>

  

 

posted @ 2019-06-22 16:22  475297133czt  阅读(102)  评论(0编辑  收藏  举报