javascript day06 查询，增加，删除节点，事件

1.查询节点

1.根据节点的层级查询节点

2.通过标签名查询节点 - 返回数组

1.查询节点

1.根据节点的层级查询节点

2.通过标签名查询节点 - 返回数组

       document | elem.getElementsByTagName("标签名")
           docement:整个文档内查找
           elem:某个元素内查找

<body>
    <div id="poem1">
        <h3>静夜思</h3>
        <p>床前明月光</p>
        <p>疑是地上霜</p>
        <p>举头望明月</p>
        <p>低头思故乡</p>
    </div>
    <div id="poem2">
        <h3>春晓</h3>
        <p>春眠不觉晓</p>
        <p>处处闻啼鸟</p>
        <p>夜来风雨声</p>
        <p>花落知多少</p>
    </div>
    <button onclick="getAllp()">所有p</button>
    <button onclick="getPoem1p()">POEM1的p</button>
    <script src="common.js"></script>
    <script>
        function getPoem1p(){
            var poem1 = $("poem1");
            var pArr = poem1.getElementsByTagName("p");
            for(var i=0;i<pArr.length;i++){
                pArr[i].style.backgroundColor="yellow";
            }
        }
        function getAllp(){
            var pArr = document.getElementsByTagName("p");
            console.log(pArr);
            for(var i = 0;i<pArr.length;i++){
                pArr[i].style.color = "#f00";
                pArr[i].style.fontWeight = "bold";
            }
        }
    </script>
</body>
</html>

3.通过元素的name属性值查询节点

       语法:document.getElementsByName("name属性值")
       返回值：包含指定name属性值的元素的数组
       练习:
           1.创建一个网页，包含多个单选按钮
           2.创建一个普通按钮
           3.单机普通按钮的时候
               多个单选按钮中必须有一个被选中

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Document</title>
</head>
<body>
    <p>        
        <input type="radio" name="gender" >男
        <input type="radio" name="gender" >女
    </p>
    <button onclick="checkRadio()">普通按钮</button>
    <script>
        function checkRadio(){
            // 得到页面中name=gender的所有元素
            var arr = document.getElementsByName("gender");
            // 声明变量用于记录radio的选中状态
            var isChecked = false;
            for(var i=0;i<arr.length;i++){
                console.log(arr[i].checked)
                if(arr[i].checked){
                    isChecked = true;
                    break;
                }
            }
            if(isChecked){
                alert('通过');
            }else{
                alert('请选中一项');
            }
        }
        
    </script>
    <p>
        <input type="checkbox" id="chkAll" onclick="checkAll()">全选
    </p>
    <p>
        <input type="checkbox" name="hobby">吃
    </p>
    <p>        
        <input type="checkbox" name="hobby">喝
    </p>
    <p>        
        <input type="checkbox" name="hobby">玩
    </p>
    <p>        
        <input type="checkbox" name="hobby">乐
    </p>
    <script src="common.js"></script>
    <script>
        function checkAll(){
            // 先获取 chkAll 的选中状态
            var isChk = $("chkAll").checked;
            // 获取所有的hobby并循环将d所有hobby的checked更改为isChk
            var all = document.getElementsByName("hobby")
            for(var i=0;i<all.length;i++){
                all[i].checked = isChk;
            }
        }
    </script>
</body>
</html>

4.通过元素的class值查询节点

语法：document|elem.getElementsByClassName("class");
返回：返回包含指定class属性值的所有元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="poem1">
        <h3 class="title">静夜思</h3>
        <p>床前明月光</p>
        <p>疑是地上霜</p>
        <p>举头望明月</p>
        <p>低头思故乡</p>
    </div>
    <div id="poem2">
        <h3 class="title">春晓</h3>
        <p>春眠不觉晓</p>
        <p>处处闻啼鸟</p>
        <p>夜来风雨声</p>
        <p>花落知多少</p>
    </div>
    <button onclick="getAllp()">所有P</button>
    <button onclick="getPoem1p()">POEM1的P</button>
    <button onclick="getTitle()">CLASS=TITLE</button>
    <script src="common.js"></script>
    <script>
        function getTitle(){
            var titleArr = document.getElementsByClassName("title");
            for(var i=0;i<titleArr.length;i++){
                titleArr[i].style.fontSize="48px";
            }
        }

        function getPoem1p(){
            var poem1 = $("poem1");
            var pArr=poem1.getElementsByTagName("p");
            for(var i=0;i<pArr.length;i++){
                pArr[i].style.backgroundColor="yellow";
            }
        }

        function getAllp(){
            var pArr=document.getElementsByTagName("p");
            for(var i=0;i<pArr.length;i++){
                pArr[i].style.color = "#f00";
                pArr[i].style.fontWeight="bold";
            }
        }
    </script>
</body>
</html>

2.增加节点

1.创建元素节点

       语法：
           var elem = document.createElement("元素名");
       ex:
           var div = document.createElement("div");
           div.setAttribute("id","container");
           div.innerHTML="动态创建的文本";

2.增加节点到网页上

       1.document.body.appendChild(elem);
           向body中追加elem的新元素
       2.parentNode.appendChild(elem);
           向parentNode内部追加elem新元素
       3.parentNode.insertBefore(newElem,oldElem)
           将newElem元素插入到parentNode中oldElem元素之前

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="main"></div>
    <button onclick="createElem()">创建元素</button>
    <script src="common.js"></script>
    <script>
        function createElem(){
            //创建一个div,文本为 :动态创建的div,id属性值为 container,文本颜色为 红色,加粗效果
            var div = document.createElement("div");
            div.innerHTML = "动态创建的div";
            div.id="container";
            div.style.color="#f00";
            div.style.fontWeight="bold";
            //将 div 加载到网页中
            //document.body.appendChild(div);
            $("main").appendChild(div);
        }
    </script>
</body>
</html>

练习步骤:
   点击按钮时
   1.先获取三个文本框的值
   2.创建两个按钮 - 删除按钮 , 修改按钮
   3.先创建四个td
       将三个文本框的值追加到前三个td
       将两个按钮追加到第四个td中
   4.创建一个tr
       将四个td追加到tr中
   5.将 tr 追加到 table 中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>
        <input type="text" id="gname" placeholder="商品名称">
        <input type="text" id="gprice" placeholder="商品价格">
        <input type="text" id="gcount" placeholder="购买数量">
        <button onclick="btnBuy()">购买</button>
    </p>
    <table border="1" width="600">
        <thead>
            <tr>
                <td>商品名称</td>
                <td>商品价格</td>
                <td>购买数量</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody id="content"></tbody>
    </table>
    <script src="common.js"></script>
    <script>
        function btnBuy(){
            //1.获取三个文本框的值
            var gname = $("gname").value;
            var gprice = $("gprice").value;
            var gcount = $("gcount").value;
            //2.创建两个按钮
            var btnUpdate = document.createElement("button");
            btnUpdate.innerHTML="修改";
            var btnDelete = document.createElement("button");
            btnDelete.innerHTML="删除";
            //为 btnDelete 绑定 单击事件
            btnDelete.onclick = function(){
                $("content").removeChild(this.parentNode.parentNode);
            }
            //3.创建4个td,分别追加值
            var tdName = document.createElement("td");
            tdName.innerHTML = gname;

            var tdPrice = document.createElement("td");
            tdPrice.innerHTML = gprice;

            var tdCount = document.createElement("td");
            tdCount.innerHTML = gcount;

            var tdOper = document.createElement("td");
            tdOper.appendChild(btnUpdate);
            tdOper.appendChild(btnDelete);

            //4.创建1个tr,追加td
            var tr = document.createElement("tr");
            tr.appendChild(tdName);
            tr.appendChild(tdPrice);
            tr.appendChild(tdCount);
            tr.appendChild(tdOper);
            //5.将tr追加到tbody中
            $("content").appendChild(tr);
        }
    </script>
</body>
</html>

3.删除节点

   在DOM中，删除节点的行为只能由父元素发起
   语法:parentNode.removeChild(elem);
       删除parentNode 中的 elem 元素

4.事件

   1.什么是事件
       通常都是由用户的行为来激发的操作
   2.触发事件的行为
       所有的事件在绑定时，必须加on
       1.鼠标事件
           1.click 事件
               当鼠标单击元素时触发该事件
           2.mouseover 事件
               当鼠标移入进元素时的事件
           3.mouseout 事件
               当鼠标移出元素时的事件
           4.mousemove 事件
               当鼠标在元素内移动时的事件
       2.键盘事件
           1.keydown 事件
               当键位按下时所激发的事件
           2.keypress 事件
               当键位按下时所激发的事件
           3.keyup 事件
               当键位抬起时所激发的事件
       3.状态改变事件
           1.load事件
               当元素加载完成时所触发的事件(body)
           2.change事件
               当选项发生改变时所触发的事件(select)
           3.focus事件
               当元素获取焦点时所触发的事件(文本框类)
           4.onblur 事件
               当元素失去焦点时所触发的事件(文本框类)
           5.submit 事件
               当表单被提交时所触发的事件(表单)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script src="common.js"></script>

    <p>
        用户名称:
        <input id="uname" type="text" onfocus="txtFocus()" onblur="txtBlur()">
        <span id="show"></span>
    </p>
    <p>
        用户密码:
        <input type="password" id="upwd">
        <span id="upwd-show"></span>
    </p>
        <script>
        function txtFocus(){
            $("show").innerHTML = "请输入6-18位的用户名";
        }

        function txtBlur(){
            //验证文本框中的值,如果值得长度在6-18位之间,提示通过
            //否则,提示用户名必须是6-18位的字符

            var val = $("uname").value;
            if(val.length >= 6 && val.length <= 18){
                $("show").innerHTML="通过";
            }else{
                $("show").innerHTML="用户名必须是6-18位的字符";
            }
        }

        //获取 id 为 upwd 的元素 并绑定 focus 事件
        $("upwd").onfocus = function(){
            $("upwd-show").innerHTML = "请输入密码!";
        }

        //为 upwd 绑定 失去焦点事件,如果密码长度低于6位,则提示密码不符合规范,否则,提示通过
        $("upwd").onblur = function(){

            if(this.value.length >= 6){
                $("upwd-show").innerHTML = "通过";
            }else{
                $("upwd-show").innerHTML = "密码不符合规范";
            }

            /*if($("upwd").value.length >= 6){
                $("upwd-show").innerHTML = "通过";
            }else{
                $("upwd-show").innerHTML = "密码不符合规范";
            }*/
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button onclick="btnClick()">测试this1</button>
    <button id="btn">测试this2</button>
    <script src="common.js"></script>
    <script>
        function btnClick(){
            // this 表示的是 window
            console.log(this);
        }

        $("btn").onclick = function(){
            // this 表示的是 当前触发事件的元素 - #btn
            console.log(this);
        }

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

3.绑定的方式

       1.在元素中绑定事件
           <元素 on事件名=""></元素>
       2.在js中动态的为元素绑定事件
           ex:
               DOM对象.on事件名=function(){

               }
           ex:
               var main = document.getElementById("main");
               main.onclick = function(){

}
注意:在JS动态绑定的事件中，允许使用this来表示触发当前事件的DOM元素

4.事件行为

       1.状态改变事件
           1.load 事件
               通常为 body 绑定 load 事件，目的是为了在所有内容都加载完成之后再实现一些初始化的操作
               1.<body onload="函数()">
               2.JS中动态绑定
               window.onload = function(){
                   网页加载完成后，要执行的操作
               }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script src="common.js"></script>
    <script>
        window.onload = function(){

            $("btn").onclick = function(){
                alert("点你咋的!!!");
            }
            
        }
    </script>
    <button id="btn">点我试试!!!</button>

</body>
</html>

           2.submit 事件
               只有表单被提交时才会被触发
               注意:该事件需要一个boolean返回值来通知表单是否要继续被提交，
               如果返回true，则可以提交表单,否则，阻止表单提交

               JS中动态绑定:
               表单对象.onsubmit = function(){
                   return true/false;
               }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="/login/" id="frm">
        <p>
            用户名称: <input type="text">
        </p>
        <p>
            <input type="submit">
        </p>
    </form>
    <script src="common.js"></script>
    <script>
        window.onload = function(){
            $("frm").onsubmit = function(){
                return true;
            }
        }
    </script>
</body>
</html>