前端技术（JavaScript）学习笔记（四）HTML事件、DOM对象、BOM对象

秒速五厘米 2022-05-26 07:19 195阅读 0赞

**1、HTML事件**  
html事件，是html元素提供的响应外部动作的唯一途径，也就是说，html的事件可以响应外部动作。比如你希望当鼠标移动到div元素区域内时弹出一个一个消息框，或者鼠标离开div区域后也弹出一个消息框即需要html事件支持才能完成，若html没有事件支持的话，这个需求是无法完成的。

**2、常用的HTML事件**  
常用事件  
8、关于html元素的事件  
①、onload事件，在浏览器装载页面时触发  
②、onunload事件，在浏览器卸载页面时触发  
③、onchange事件，在文本域中的内容发生改变时触发  
④、onmouseover事件，在鼠标进入到元素区域内时触发  
⑤、onmouseout事件，在鼠标离开元素区域时触发  
⑥、onclick事件，在鼠标单击时触发  
⑦、onmousedown&onmouseup事件，在按下鼠标左键还没送开时触发，在弹起时触发  
⑧、onfocus事件，在获取焦点时触发  
⑨、onkeydown、onkeyup、onkeypress ，在按下键盘时、在弹开键盘时，按下和弹开时触发  
⑩、onblur事件，失去焦点事件

**3、添加事件的语法规则**  
①、在html元素的开始标记内通过事件名称添加事件，同时指定事件处理程序  
②、除了以上方法外，还可以通过在JavaScript绑定html元素时间  
案例代码：

<div onmouseout="alert('拜走啊，坐会啊');" onclick="run();">我是div元素的值</div>

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
        </head>
        <body>
            <div id="d1">我是div元素的值</div>
            <script type="text/javascript"> // 获得div元素的dom对象 var divObject=document.getElementById("d1"); // 为div元素绑定鼠标进入事件 divObject.onmouseover=function(){ // 在javascript中可以通过dom对象对html元素的css样式进行设置,注意样式名称和css样式名称的区别 divObject.style.backgroundColor="#FF0000"; }; // 为div元素绑定鼠标离开事件 divObject.onmouseout=function(){ divObject.style.backgroundColor="#FFFFFF"; }; </script>
        </body>
    </html>

相关事件案例代码如下：

![这里写图片描述][70]

![这里写图片描述][70 1]

![这里写图片描述][70 2]

4、JavaScript中的DOM对象。DOM：Document Object Model 文档对象模型。在JS中，要对html元素进行操作，利用dom对象是唯一的一种方式。所以，**要操作html元素首先要获取对应的dom对象**

javascript中，开发人员不单单可以自定义对象，js还提供了诸多对象，比如stirng,number,date,同时在这些对象中  
有一部分对象专门用于对html元素进行操作，所以把这些对html元素进行操作的对象统称为DOM对象（文档对象模型）

![这里写图片描述][70 3]

利用js中的dom对象可以  
①、动态的去管理html元素 （删除html元素，新增html元素等）  
②、完成对html元素中的所有属性进行操作（添加属性，删除属性，修改属性的值）  
③、可以通过dom对象对html元素的css样式进行操作  
④、可以对html元素的所有事件进行响应

5、在js中怎样获取html元素的dom对象呢？  
方法有几种，本节需要掌握第一种方法  
①、var domObject=document.getElementById(“idValue”); //前提：html元素具有id属性  
HTML:`<span id="sp1">我是span元素的值</span>`  
JS: `var so=document.getElementById("sp1");`

![这里写图片描述][70 4]

6、利用DOM对象以及相关事件对form表单元素进行验证。表单项必填验证  
![这里写图片描述][70 5]

7、BOM对象，（Browser Object Model）BOM称为浏览器对象模型。提供了操作浏览器的功能（提供了和浏览器进行对话的功能）。  
①、Window对象：所有浏览器都支持 window 对象。它表示浏览器窗口。  
②、Screen对象：屏幕对象，利用Screen可以获取到屏幕的宽度和高度等信息。  
③、Location对象：对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。  
④、History对象：history 对象包含浏览器的历史。  
⑤、Navigator对象：navigator 对象包含有关访问者浏览器的信息。  
![这里写图片描述][70 6]

![这里写图片描述][70 7]

![这里写图片描述][70 8]

8、JavaScript获取dom对象方式  
①、通过html元素的id属性值获取对应的dom对象

var spanObj=document.getElementById("d1");

②、根据html元素的元素名称获取dom对象  
语法：var domArrays=document.getElementsByTagName(“元素名”);  
注意：spans是dom对象的数组，其中可以包含了多个dom对象  
案例：

var spans=document.getElementsByTagName("span");
    console.log(spans.length);
    //遍历spans这个数组
    for(var i=0;i<spans.length;i++){
        var a=spans[i];//a是dom对象，
    // console.log(a.innerHTML);
    }

③、根据html元素的name属性值获取dom对象  
var domArrays=document.getElementsByName(“name属性值”);  
注意：ps是一个dom对象数组  
案例：

var ps=document.getElementsByName("arts");
                    for(var i=0;i<ps.length;i++){
    //                  console.log(ps[i].innerHTML);
                    }

④、根据html元素的class属性值获取dom对象  
var cs=document.getElementsByClassName(“class属性值”);  
注意：cs是一个dom对象数组  
案例：

var cs=document.getElementsByClassName("c1");
    for(var i=0;i<cs.length;i++){
        console.log(cs[i].innerHTML);
    }

综合案例：  
![这里写图片描述][70 9]

9、DOM对象对html元素的操作  
①、设置|获取HTML元素的值（内容）  
语法：domObj.innerHTML|domObj.innerText;  
案例：

"<span id=""d1"">我是<b>span</b>的值1</span>
    
    var spanObj=document.getElementById(""d1"");
    var valueHTML=spanObj.innerHTML;
    var valueText=spanObj.innerText;
    console.log(valueHTML);
    console.log(valueText);"

②、设置|获取HTML元素的属性值  
语法：domObj.属性名  
案例：

"<img src="img/a0.jpg" id="imgid"/>
    
    var imgObj=document.getElementById("imgid");
    //获取src属性值
    var srcValue=imgObj.src;
    console.log(srcValue);
    设置src属性值
    imgObj.src="img/a1.jpg";

案例：图片轮播  
![这里写图片描述][70 10]

③、设置|获取HTML元素的CSS样式  
语法：domObj.style.样式名称  
案例：

<div id="d1">我是div元素的值</div>   
    
      <script type="text/javascript"> var divObj=document.getElementById("d1"); divObj.onmouseover=function(){ /* 通过dom对象设置html元素的css样式 注意,js设置样式和css设置样式的样式名不同 */ divObj.style.backgroundColor="red"; } divObj.onmouseout=function(){ divObj.style.backgroundColor="#00BFFF"; } </script>

④、添加|删除HTML元素 在JavaScript中，将元素及元素内容都分别定位不同的节点  
案例：  
![这里写图片描述][70 11]

⑤、通过DOM对象对html元素的属性进行操作  
A：设置html元素的属性的值 domObj.setAttribute(“属性名”,”属性值”);  
B：获取HTML元素的属性值 domObj.getAttribute(“属性名”);  
C：删除HTML元素的属性 domObj.removeAttribute(“属性名”);

案例：鼠标经过行高亮显示  
![这里写图片描述][70 12]

10、JSON对象：JSON是JavaScript的对象表示法，json是数据交换的产物，json一般用来完成数据交换，也就是json是为了存储数据来用的一个技术  
语法：  
var jsonObj=\{  
属性名1:属性值1，  
属性名2:属性值2,  
。。。。。。。。  
属性n：属性值n  
\}  
案例：  
var userJson=\{  
userid:”刘备”,  
password:”admin”,  
address:”三国”  
\};  
案例：  
![这里写图片描述][70 13]

页面效果如下：  
![这里写图片描述][70 14]

11、Json对象与String之间的类型转化，在实际项目中往往涉及到字符串类型的json格式数据，有时也需要将json对象数据转化成String类型的字符串数据  
如下案例展示如何完成类型转化  
![这里写图片描述][70 15]

浏览器F12查看结果如下：  
![这里写图片描述][70 16]

[70]: /images/20220526/ca8b77dc6f63455eb4630874d517bbb2.png
[70 1]: /images/20220526/05f6ad91bb0e461aa50848059494a357.png
[70 2]: /images/20220526/6770612f256141bab0bebb9ac420a3f4.png
[70 3]: /images/20220526/871968c57f9f4d3dbf3a362e07907c8e.png
[70 4]: /images/20220526/086ec52473424163a46efbefe6a8ade1.png
[70 5]: /images/20220526/66cee3e6dec948bda337b2f37e09c7d9.png
[70 6]: /images/20220526/88436d11d2144c03a28b66d9bd56f9d1.png
[70 7]: /images/20220526/0ad66e6d69a04b40b9b567c1e648099c.png
[70 8]: /images/20220526/f9634c434c404a1f819e6e6fd9015851.png
[70 9]: /images/20220526/ade53ad8cb1f4b7a8cd5bc9c772358c1.png
[70 10]: /images/20220526/156bac574dec4329981a37cb6a0249a6.png
[70 11]: /images/20220526/090b38d490dd48268bbf2548ff474329.png
[70 12]: /images/20220526/227bb5d22fff4b21abfe8dc0d7369693.png
[70 13]: /images/20220526/19fd48b4716146c38700d642428d1ff8.png
[70 14]: /images/20220526/1ae19128309b4e13aa13b2d1ecef205a.png
[70 15]: /images/20220526/23e94b0e50874984b9caa7002ff5d23b.png
[70 16]: /images/20220526/d6602c166a6d4a84b36e7611674e2de4.png