Day04 JS 事件 BOM DOM 表单操作

最新推荐文章于 2023-06-25 16:19:00 发布

何以所谓

最新推荐文章于 2023-06-25 16:19:00 发布

阅读量179

点赞数

分类专栏： JAVAEE笔记文章标签： JS 事件 BOM DOM 表单操作

本文链接：https://blog.csdn.net/weixin_44695396/article/details/90644778

版权

JAVAEE笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一事件

1.三要素

(1)、事件源
(2)、事件名称
(3)、处理函数

2.常用事件

(1)、点击事件   onclick
(2)、失焦事件   onBlur
(3)、聚焦事件 onfocus
(4)、改变域对象 onchange
(5)、鼠标悬停事件 onmouserover
(6)、鼠标移开事件   onmouseout
(7)、键盘按下事件 onkeydown
(8)、键盘弹起事件 onkeyup

3.事件处理程序

(1)DOM0 级事件处理程序
不能绑定同一个元素同一个事件多次

// 获取元素
       var btn4 = document.getElementById("btn4");
       // 绑定事件
       btn4.addEventListener("click",function(){
           console.log("这是第4个按钮...");
       });
       btn4.addEventListener("click",function(){
           console.log("这是第4个按钮。。。。");
       });

       btn4.addEventListener("mouseout",function(){
           console.log("离开第4个按钮...");

           // 移除事件
           btn4.removeEventListener("click",tt,true)

       });

       btn4.addEventListener("click",tt);

       function tt() {
           console.log("第三次被打印...");
       }

二 BOM

1.window对象

(1)系统对话框
               浏览器通过（实际是 window 对象的方法）alert()、confirm()、prompt()方法可以调用对话框向用户显示消息。
            1）消息框:alert，常用。
               alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。
            2）输入框:prompt，返回提示框中的值。
               prompt() 方法用于显示可提示用户进行输入的对话框。
               参数（可选）：
              第一个参数：要在对话框中显示的纯文本。
                  第二个参数：默认的输入文本。
           3）确认框:confirm，返回 true/false.
              confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。

(2)打开窗口
window.open()方法既可以导航到一个特定的 URL 也可以用来打开一个新的窗口
_self、_parent、_top、_blank

function openPage () {
           //window.open();// 打开新的空白页(新开的)
           // window.open("http://www.baidu.com");
           // window.open("http://www.baidu.com",'_self');
           // window.open("index.html");
           window.open("01-window对象.html","_self");
       }
(3)关闭窗口
               window.close()：关闭窗口。
               只能关闭被open打开的窗口

2.时间函数

setTimeout() : 在指定的毫秒数后调用函数或计算表达式。通过返回的标识也可以cliearTimeout(id) 来清除指定函数的执行在 times 毫秒后执行 function 指定的方法，执行之前也可以取消
setInterval():可按照指定的周期（以毫秒计）来调用函数或计算表达式，也可根据返回的标识用来结束。该方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。

function openBaidu(){
           alert("3秒钟跳转到百度...");
           setTimeout(function(){
               // 打开到百度
               window.open("http://www.baidu.com");
           },3000);
       }

//停止函数

function stopPrint() {
clearTimeout(id);
}

3.history对象

history 对象的属性：

      length，返回浏览器历史列表中的 URL 数量。
history 对象的方法：
           back()：加载 history 列表中的前一个 URL。
           forward()：加载历史列表中的下一个 URL。当页面第一次访问时，还没有下一个 url。
           go(number|URL): URL 参数使用的是要访问的 URL。而 number 参数使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。go(-1)，到上一个页面

4.location对象

location 对象的属性

             href：设置或返回完整的 URL
location 对象的方法
           reload()：重新加载当前文档。
           replace()：用新的文档替换当前文档。

        // 得到当前的url
       var url = window.location.href;
       console.log(url);

       // 跳转到指定页面
       //window.location.href = "03-history对象.html";
       // window.location.href = "http://www.baidu.com";

       function reload1() {
           // 刷新页面
           //window.location.reload();
           // 用指定页面替换当前页面
           window.location.replace("http://www.baidu.com");

5.document对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。Document 对象是 Window 对象的一部分，也可通过 window.document 属性对其进行访问。document 对象的 body 属性，提供对<body>元素的直接访问，

cookie 属性，用来设置或返回与当前文档有关的所有 cookie，

write()方法，向文档写 HTML 表达式或 JavaScript 代码。还有其他属性和方法

        // 向浏览器窗口写数据
       document.write("Hello");

       // 设置cookie
       document.cookie = "zhangsan-123456";

       var cook = document.cookie;
       console.log(cook);

       // 分隔字符串
       var user = cook.split("-");

       // 给表单元素赋值 value
       document.getElementById("uname").value=user[0];
       document.getElementById("upwd").value=user[1];

三 DOM

1.预加载事件

等文档中的元素及资源加载完毕后才执行的事件

(1)、window.οnlοad=function(){

               }
(2)、在body标签上写onload事件

               html代码从上往下执行，当获取的元素写在dom元素之前时，代码还未走到dom元素，此时无法找到dom对象，会返回null；

2.获取节点

方法                                           描述
getElementById()                         根据 id 获取 dom 对象，如果 id 重复，那么以第一个为准
getElementsByTagName()           根据标签名获取 dom 对象数组
getElementsByClassName()        根据样式名获取 dom 对象数组
getElementsByName()           根据 name 属性值获取 dom 对象数组，常用于多选获取值


javascript: void(0); 伪协议，表示a标签不执行href属性的跳转行为，而去执行点击事件
javascript: 函数名();   不执行跳转，执行函数

<body>

<button id="btn">按钮</button>
       <div id="div1">
           DOM对象
       </div>

       <br /><hr />

       <p id="p1" class="para">这是一个段落<span>文本</span></p>
       <p id="p1" class="para">这又是一个段落</p>
       <input type="text" name="txt" class="para" />
       <input type="checkbox" name="hobby" value="swimming" checked />游泳
       <input type="checkbox" name="hobby" value="basketball" />篮球
       <input type="checkbox" name="hobby" value="football" />足球
       <hr />

       <a href="javascript:testById();" >按照 id获取元素</a>
       <a href="javascript:void(0);" οnclick="testByName();">按照 name获取元素</a>
       <a href="javascript:void(0);" οnclick="testByTagName();">按照标签名获取元素</a>
       <a href="javascript:void(0);" οnclick="testByClass();">按照class获取元素</a>


   </body>

   <script type="text/javascript">
       // 按照 id获取元素只会获取一个dom对象，如果出现多个同名Id，则以第一个id的元素为准
       function testById (){
           var p1 = document.getElementById("p1");
           console.log(p1);
       }

       // 按照 name获取元素
       function testByName() {
           var hobbys = document.getElementsByName("hobby");
           console.log(hobbys);

       }

       // 按照标签名获取元素
       function testByTagName() {
           var inputs = document.getElementsByTagName("input");
           console.log(inputs.length);

           // 定义变量，接收被选中的复选框的值
           var cks = "";

           // 获取元素的类型（input中有text、button、radio、checkbox等）
           for (var i = 0; i < inputs.length; i++) {

               var ty = inputs[i].type;
               console.log(ty);
               if (ty == "text") { // 获取文本框
                   // 给文本赋值
                   inputs[i].value = "admin";

               } else if (ty == "checkbox") { // 获取复选框
                   //console.log(inputs[i].checked);
                   // 判断复选框是否被选中
                   if (inputs[i].checked) {
                       cks += inputs[i].value + ",";
                   }
               }
           }
           console.log(cks);
           // 截取字符串
           cks = cks.substring(0,cks.length -1);
           console.log(cks);

       }

       // 按照class获取元素
       function testByClass() {
           var cls = document.getElementsByClassName("para");
           console.log(cls);
       }

</script>

3.创建节点,插入节点

创建节点
方法                        描述
createElement()        创建一个新的节点，需要传入节点的标签名称，返回创建的元素对象
createTextNode()        创建一个文本节点，可以传入文本内容
innerHTML                   给元素赋值,也能达到创建节点的效果，直接添加到指定位置了

插入节点
方法                        描述
write()                       将任意的字符串插入到文档中
document.write()   在加载文档时使用，会和当前文档使用同一个document对象，所以写入的内容会显示在原来的内容之后；
document.write()   在加载文档之后使用（点击按钮触发事件使用），此时document是一个新的对象，会将原来的document对象覆盖，所以原来页面中的内容也会被覆盖。
不要在使用document.write()方法之后去获取元素节点
appendChild()            向元素中添加新的子节点，作为最后一个子节点
insertBefore()            向指定的已有的节点之前插入新的节点
newItem：要插入的节点
exsitingItem：参考节点
需要参考父节点

// 得到div元素（获取容器）
       var mydiv = document.getElementById("container");

       /**
       * 添加段落
       */
       function addPara() {
           /* 方式一： */
           // 创建p元素
           var p = document.createElement("p");
           // 创建文本节点
           var ptxt = document.createTextNode("哈哈哈哈");
           // 将文本节点追加到p元素节点里面的最后
           p.appendChild(ptxt);
           console.log(p);
           // 将p元素节点追击到指定容器中
           mydiv.appendChild(p);


           /*方式二*/
           // 创建p元素
           var p2 = document.createElement("p");
           // 给p标签赋值
           p2.innerHTML = "嘻嘻嘻嘻嘻";
           // 将p标签追击到指定容器中    appendChild(节点)
           mydiv.appendChild(p2);

           /*方式三*/
           var p3 = "<p>嘿嘿嘿嘿</p>";
           mydiv.innerHTML += p3;
       }

4.间接查找节点

方法|属性描述

            children:                 获取指定元素的所有子元素(不包含文本节点)
           childNodes ()        返回元素的一个子节点的数组（包括文本节点）
           firstChild()        返回元素的第一个子节点
           lastChild()        返回元素的最后一个子节点
           nextSibling        返回元素的下一个兄弟节点
           parentNode            返回元素的父节点
           previousSibling    返回元素的上一个兄弟节点

        // nextSibling        返回元素的下一个兄弟节点
       console.log(div1.nextElementSibling); // 下一个元素节点（元素）
       console.log(div1.nextSibling); // 下一个节点（包含文本节点）

       //   previousSibling    返回元素的上一个兄弟节点
       console.log(div1.previousElementSibling); // 上一个元素节点（元素）
       console.log(div1.previousSibling); // 上一个节点（包含文本节点）

5.替换节点,克隆节点

替换节点
           方法|属性                            描述
           replaceChild(newNode,oldNode)    用新的节点替换旧的节点
            oldNode.parentNode.replaceChild(newNode,oldNode)
               首先通过旧节点定位到父节点，然后用新的节点替换旧节点
克隆节点
              方法|属性                描述
              cloneNode()        复制节点
               var 复制好的节点 = 被复制的节点.cloneNode([true/false]);
               true：深度克隆，可以克隆结构和内容
               false(默认值)：只克隆结构

//替换元素

function replaceNode() {
           // oldNode.parentNode.replaceChild(newNode,oldNode)
           // 首先通过旧节点定位到父节点，然后用新的节点替换旧节点
           var cxy = document.getElementById("test");
           // 创建新节点
           var span = document.createElement("span");
           span.innerHTML = "攻城狮";
           cxy.parentNode.replaceChild(span,cxy);
       }

//克隆节点

function cloneValue() {
           // 得到被克隆的对象
           var cloneValue = document.getElementById("music");
           var newValue = cloneValue.cloneNode(false); // 浅度克隆，只克隆结构
           console.log(newValue);
           var deepValue = cloneValue.cloneNode(true); // 克隆结构及内容
           console.log(deepValue);

           // 将克隆好的结果追加到div中
           document.getElementById("mydiv").appendChild(deepValue);
       }

6.删除节点

             方法|属性            描述
           removeChild()    从元素中移除子节点

           从父元素中删除节点，获取要删除对象的父元素，然后从父元素中删除该对象

function removeNode() {
           // 得到被删除的节点的对象
           var del = document.getElementById("test");
           // 从父元素中删除节点，获取要删除对象的父元素，然后从父元素中删除该对象
           del.parentNode.removeChild(del);
       }

四表单操作

1.获取表单

(1)、document.表单名称
(2)、document.getElementById(表单 id);
(3)、document.forms[表单名称]
(4)、document.forms[索引]; //从 0 开始

        // 1、document.表单名称
       console.log(document.myform);

       // 2、document.getElementById(表单 id);
       console.log(document.getElementById("myform"));

       // 获取文档做所有的表单集合
       console.log(document.forms);

       // 3、document.forms[表单名称]
       console.log(document.forms["myform2"]);

       // 4、document.forms[索引]; //从 0 开始
       console.log(document.forms[1]);

2.获取input元素

如 text password hidden textarea 等，前两种常用。
(1)、通过 id 获取：document.getElementById(元素 id);
(2)、通过 form.名称形式获取: myform.元素名称;    name 属性值
(3)、通过 name 获取 :document.getElementsByName(元素名称)[索引] //从 0 开始
(4)、通过 tagName 数组 :document.getElementsByTagName('input')[索引] //从 0 开始
function getTxt() {
           // 获取表单对象
           var myform = document.myform; // document.表单的name属性值
           // 获取表单元素
           // 1)、通过 id 获取：document.getElementById(元素 id);
           console.log(document.getElementById("uname"));
           console.log(document.getElementById("uname").value);

           // 2)、通过 form.名称形式获取: myform.元素名称;  name 属性值
           console.log(myform.upwd);
           console.log(myform.upwd.value);

           // 3)、通过 name 获取 :document.getElementsByName(元素名称)[索引] //从 0 开始
           console.log(document.getElementsByName("uno")[0]);
           console.log(document.getElementsByName("uno")[0].value);

           // 4)、通过 tagName 数组 :document.getElementsByTagName('input')[索引] //从 0 开始
           console.log(document.getElementsByTagName("textarea")[0]);
           console.log(document.getElementsByTagName("textarea")[0].value);
       }

3.获取单选按钮

            前提：将一组单选按钮设置相同的 name 属性值
           (1)获取单选按钮组：
           document.getElementsByName("name 属性值");
           (2)遍历每个单选按钮，并查看单选按钮元素的 checked 属性
           若属性值为 true 表示被选中，否则未被选中
           选中状态设定： checked=’checked’ 或 checked=’true’ 或 checked
           未选中状态设定：没有 checked 属性或 checked=’false’

// 获取一组单选按钮
       var radios = document.getElementsByName("sex");
       // 遍历数组，得到选中项的值
       for (var i = 0; i < radios.length; i++) {
           // 判断是否被选中
           if (radios[i].checked) {
               console.log("选中的值是：" + radios[i].value);
           } else {
               console.log("未选中的值是：" + radios[i].value);
           }
       }

4.获取多选按钮

           前提：将一组多选按钮设置相同的 name 属性值
           (1)获取多选按钮组：
               document.getElementsByName("name 属性值");
           (2)遍历每个多选按钮，并查看多选按钮元素的 checked 属性
           若属性值为 true 表示被选中，否则未被选中
           选中状态设定： checked=’checked’ 或 checked=’true’ 或 checked
           未选中状态设定：没有 checked 属性或 checked=’false’

// 获取一组多选按钮
       var checkboxs = document.getElementsByName("hobby");

       var cks = "";
       // 遍历数组，得到选中项的值
       for (var i = 0; i < checkboxs.length; i++) {
           // 判断是否被选中
           if (checkboxs[i].checked) {
               console.log("选中的值是：" + checkboxs[i].value);
               cks += checkboxs[i].value+ ",";
           } else {
               console.log("未选中的值是：" + checkboxs[i].value);
           }
       }
       // 截取字符串
       cks = cks.substring(0,cks.length - 1);
       console.log("选中的值为：" + cks);

5.获取下拉框

           （1）获取 select 对象：
           var ufrom = document.getElementById("ufrom");
           （2）获取选中项的索引：
           var idx=ufrom.selectedIndex ;
           （3）获取选中项 options 的 value 属性值：
           var val = ufrom.options[idx].value;
           注意：当通过 options 获取选中项的 value 属性值时，
           若没有 value 属性，则取 option 标签的内容
           若存在 value 属性，则取 value 属性的值
           （4）获取选中项 options 的 text：
           var txt = ufrom.options[idx].text;
           选中状态设定：selected='selected'、selected=true、selected
           未选中状态设定：不设 selected 属性

// （1）获取 select 对象
       var sel = document.getElementById("ufrom");

       // （2）获取选中项的索引
       var selectIndex = sel.selectedIndex;
       console.log("当前选中项的索引：" + selectIndex);

       // （3）获取选中项 options 的 value 属性值
       var value1 = sel.value;
       var value2 = sel.options[selectIndex].value;
       console.log("当前选中项的值：" + value1 + "," + value2);

       // （4）获取选中项 options 的 text
       var text1 = sel.options[selectIndex].innerHTML;
       var text2 = sel.options[selectIndex].text;
       console.log("当前选中项的文本：" + text1 + "," + text2);

6.提交表单

注：提交表单时，表单元素必须设置name属性值

提交类型：
               get请求
                   参数会直接跟在地址栏后面显示，请求参数的长度有限，相对post而言不安全，不会自动刷新缓存；每次访问时优先获取缓存中的数据，所以请求速度快。
               post请求（需要服务器的支持）
                   参数不会跟在地址栏后面显示，请求参数长度不限（其实是有长度限制，与服务器相关），相对而言安全，会自动刷新缓存；请求速度相对而言慢。

               通常做查询操作，使用GET请求；增删改使用POST请求。

提交表单
           （1）使用普通 button 按钮+onclick 事件+事件中编写代码:
           获取表单.submit();
           （2）使用 submit 按钮 + οnclick="return 函数()" +函数编写代码:
           最后必须返回：return true|false;
           （3）使用 submit 按钮/图片提交按钮 + 表单 οnsubmit="return 函数();" +函数编写代码:
           最后必须返回：return true|false;

/*提交方式一：submit按钮 + onclick事件*/
       // 给submit按钮绑定点击事件，调用时需要使用"return 函数名()"，定义的函数中需要return true或false；
       //如果return true，则提交表单；return false不提交；若直接return也会提交表单
       function checkForm1() {
           //return true; // 提交表单
           return false; // 不提交表单
           //return; // 无效，不会阻止表单提交
       }


       /*提交方式二：submit按钮 + onsubmit事件*/
       // 给表单对象绑定onsubmit事件，调用时需要使用"return 函数名()"，定义的函数中需要return true或false；
       //如果return true，则提交表单；return false不提交；若直接return也会提交表单
       function checkForm2() {
           return true; // 提交表单
           //return false; // 不提交表单
           //return; // 无效，不会阻止表单提交
       }

       /*提交方式三：button按钮+点击事件*/
       // 给button按钮绑定点击事件，调用时需要使用"函数名()"，如果满足要求则手动提交表单，否则return
       function checkForm3() {
           var uname = document.getElementsByName("uname1")[0].value;
           if ( uname == null || uname.trim() == "") {
               console.log("用户名不能为空！");
               document.getElementById("msg").innerHTML = "用户名不能为空！";
               return;
           }

           // 手动提交表单
           document.forms[2].submit();
       }