个人学习笔记---JavaScript BOM,DOM对象和事件

最新推荐文章于 2021-12-01 20:57:19 发布

原创最新推荐文章于 2021-12-01 20:57:19 发布 · 597 阅读

0 ·

CC 4.0 BY-SA版权

本文深入解析了浏览器对象模型(BOM)和文档对象模型(DOM)的概念、组成及应用，包括Window、Location、History等对象的使用，并通过实例展示了如何利用BOM和DOM实现轮播图、自动跳转、动态表格操作等功能。

之前的笔记都是自己写在本子上的,朋友说写博客面试可以加分,故从今天起开始每天一篇博客记录学习内容.

BOM:

1.概念：Browser Object Model 浏览器对象模型
	* 将浏览器的各个组成部分封装成对象。

2. 组成：
	* Window：窗口对象
	* Navigator：浏览器对象      //用不到
	* Screen：显示器屏幕对象     //用不到
	* History：历史记录对象
	* Location：地址栏对象

3. Window：窗口对象
    1. 方法
         1. 与弹出框有关的方法：
            alert()	显示带有一段消息和一个确认按钮的警告框。
            confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
                * 如果用户点击确定按钮，则方法返回true
                * 如果用户点击取消按钮，则方法返回false
            prompt()	显示可提示用户输入的对话框。
                * 返回值：获取用户输入的值 
                例:var result =prompt("提示信息");
         2. 与打开关闭有关的方法：
            open()	打开一个新的浏览器窗口
                * 返回新的Window对象
            close()	关闭浏览器窗口。
                * 谁调用此方法 ，关闭谁	           
         3. 与定时器有关的方式
         	1.一次性定时器
                *setTimeout()	在指定的毫秒数后调用函数或计算表达式。
                    * 参数：
                        1. js代码或者方法对象
                        2. 毫秒值
                    * 返回值：唯一标识，用于取消定时器
                *clearTimeout()	取消由 setTimeout() 方法设置的 timeout。
			2.循环定时器,使用方法同上
                *setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
                *clearInterval()	取消由 setInterval() 设置的 timeout。
	
    2. 属性：
        1. 获取其他BOM对象：
            history
            location
            Navigator
            Screen
        2. 获取DOM对象
            document
    3. 特点
        * Window对象不需要创建可以直接使用 window使用。 例:window.方法名();
        * window引用可以省略。  例:方法名();


4. Location：地址栏对象
	1. 创建(获取)：
		1. window.location
		2. location	
	2. 方法：
		* reload()	重新加载当前文档。即刷新
	3. 属性
		* href	设置或返回完整的 URL。改变它的值可以改变当前页面网址
				例:location.href="https://www.baidu.com/";


5. History：历史记录对象
    1. 创建(获取)：
        1. window.history
        2. history

    2. 方法：
        * back()	加载 history 列表中的前一个 URL。
        * forward()	加载 history 列表中的下一个 URL。
        * go(参数)	加载 history 列表中的某个具体页面。
            * 参数：
                * 正数：前进几个历史记录
                * 负数：后退几个历史记录
    3. 属性：
        * length	返回当前窗口历史列表中的 URL 数量。

案例1:轮播图
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>

</head>
<body>
    <img id="img" src="image1/picture_1.jpg" width="100%">

<script>
    var i=1;
     function fun() {
         i++;
         if(i>3){    //形成轮回
             i=1;
         }
         var img=document.getElementById("img");
         img.src="image1/picture_"+i+".jpg";   //更换图片
     }
    setInterval(fun,2000);
</script>
</body>
</html>

案例2:自动跳转
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动跳转首页</title>
    <style>
        p{
         text-align: center;
        }
        span{
            color: red;
        }
    </style>
</head>
<body>

    <p >
        <span id="time">5</span>秒后跳转...
    </p>
    <script>
        var time=5;   //起始时间
        function fun() {
            time--;  //每次调用时间-1
            if(time==0)
                location.href="https://www.baidu.com/";
            document.getElementById("time").innerHTML=time+"";
        }
        setInterval(fun,1000); //每秒调用一次fun方法
    </script>
</body>
</html>

DOM：

* 概念： Document Object Model 文档对象模型
	* 将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作

* W3C DOM 标准被分为 3 个不同的部分：

	* 核心 DOM - 针对任何结构化文档的标准模型
		* Document：文档对象
		* Element：元素对象
		* Attribute：属性对象
		* Text：文本对象
		* Comment:注释对象

		* Node：节点对象，其他5个的父对象
	* XML DOM - 针对 XML 文档的标准模型
	* HTML DOM - 针对 HTML 文档的标准模型

* 核心DOM模型：
	* Document：文档对象
		1. 创建(获取)：在html dom模型中可以使用window对象来获取
			1. window.document
			2. document
		2. 方法：
			1. 获取Element对象：
				1. getElementById()	： 根据id属性值获取元素对象。id属性值一般唯一
				2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
				3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
				4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
			2. 创建其他DOM对象：
				createAttribute(name)
            	createComment()
            	createElement()
            	createTextNode()
		3. 属性
	* Element：元素对象
		1. 获取/创建：通过document来获取和创建
		2. 方法：
			1. removeAttribute()：删除属性
			2. setAttribute()：设置属性
	* Node：节点对象，其他5个的父对象
		* 特点：所有dom对象都可以被认为是一个节点
		* 方法：
			* CRUD dom树：
				* appendChild()：向节点的子节点列表的结尾添加新的子节点。
				* removeChild()	：删除（并返回）当前节点的指定子节点。
				* replaceChild()：用新节点替换一个子节点。
		* 属性：
			* parentNode 返回节点的父节点。


* HTML DOM
	1. 标签体的设置和获取：innerHTML
	2. 使用html元素对象的属性,具体内容查看文档
	3. 控制元素样式
		1. 使用元素的style属性来设置
			如：
				 //修改样式方式1
		        div1.style.border = "1px solid red";
		        div1.style.width = "200px";
		        //font-size--> fontSize
		        div1.style.fontSize = "20px";
		2. 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。

案例3:动态表格添加删除
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>
	<!--使用CSS定义表格样式-->
    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>

</head>
<body>
	<!--输入框初始化-->
<div>
    <input type="text" id="id" placeholder="请输入编号">
    <input type="text" id="name"  placeholder="请输入姓名">
    <input type="text" id="gender"  placeholder="请输入性别">
    <input type="button" value="添加" id="btn_add">

</div>

	<!--表格初始化-->
    <table>
        <caption>学生信息表</caption>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>操作</th>
        </tr>

        <tr>
            <td>1</td>
            <td>令狐冲</td>
            <td>男</td>
            <td><a href="javascript:void (0)" onclick=delet(this)>删除</a></td>
        </tr>

        <tr>
            <td>2</td>
            <td>任我行</td>
            <td>男</td>
            <td><a href="javascript:void (0)" onclick=delet(this)>删除</a></td>
        </tr>

        <tr>
            <td>3</td>
            <td>岳不群</td>
            <td>?</td>
            <td><a href="javascript:void (0)" onclick=delet(this)>删除</a></td>
        </tr>


    </table>
    <script>
    	//添加操作
        var btn = document.getElementById("btn_add");
        btn.onclick=function () {
            var id = document.getElementById("id").value;
            var name = document.getElementById("name").value;
            var gender = document.getElementById("gender").value;
            var tab = document.getElementsByTagName("table")[0];
            tab.innerHTML+="<tr>\n" +
                "            <td>"+id+"</td>\n" +
                "            <td>"+name+"</td>\n" +
                "            <td>"+gender+"</td>\n" +
                "            <td><a href=\"javascript:void (0)\" οnclick=delet(this)>删除</a></td>\n" +
                "        </tr>"
        }
        //删除函数
        function delet(a) {
            a.parentNode.parentNode.parentNode.removeChild(a.parentNode.parentNode);
        }
    </script>
</body>
</html>

事件监听机制：

* 概念：某些组件被执行了某些操作后，触发某些代码的执行。	
	* 事件：某些操作。如： 单击，双击，键盘按下了，鼠标移动了
	* 事件源：组件。如： 按钮 文本输入框...
	* 监听器：代码。
	* 注册监听：将事件，事件源，监听器结合在一起。 当事件源上发生了某个事件，则触发执行某个监听器代码。


* 常见的事件：
	1. 点击事件：
		1. onclick：单击事件
		2. ondblclick：双击事件
	2. 焦点事件
		1. onblur：失去焦点
		2. onfocus:元素获得焦点

	3. 加载事件：
		1. onload：一张页面或一幅图像完成加载

	4. 鼠标事件：
		1. onmousedown	鼠标按钮被按下
			*当要判断哪个鼠标键被点下时,先在监听器中接受调用onmousedown方法传递的event对象,再输出其button属性
				例:function fun(event) {
				        alert(event.button);
				    }
		2. onmouseup	鼠标按键被松开
		3. onmousemove	鼠标被移动
		4. onmouseover	鼠标移到某元素之上
		5. onmouseout	鼠标从某元素移开
	
	5.键盘事件:
		1. onkeydown	某个键盘按键被按下
			*与鼠标点击事件类似,使用event.keyCode判断哪个键被点下
		2. onkeyup		某个键盘按键被松开
		3. onkeypress	某个键盘按键被按下并松开

	6. 选择和改变
		1. onchange	域的内容被改变。
		2. onselect	文本被选中。

	7. 表单事件：
		1. onsubmit	确认按钮被点击。
			*如果此方法返回false,则阻止表单提交
		2. onreset	重置按钮被点击。

案例4:表格全选练习
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格全选</title>
    <style>
        table{
            border: 1px solid;
            width: 500px;
            margin-left: 30%;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            margin-top: 10px;
            margin-left: 30%;
        }
    </style>
</head>
<body>

<table>
    <caption>学生信息表</caption>
    <tr>
        <th><input type="checkbox" class="check" id="first_cb" onclick=fun(this)></th>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

    <tr>
        <td><input type="checkbox" class="check"></td>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

    <tr>
        <td><input type="checkbox" class="check"></td>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

    <tr>
        <td><input type="checkbox" class="check"></td>
        <td>3</td>
        <td>岳不群</td>
        <td>?</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

</table>
<div>
    <input type="button" id="selectAll" value="全选">
    <input type="button" id="unSelectAll" value="全不选">
    <input type="button" id="selectRev" value="反选">
</div>
</body>
<script>
    //全选设置
    var check = document.getElementsByClassName("check");
    document.getElementById("selectAll").onclick=function (ev) {
        for (var i=0;i<check.length;i++){
            check[i].checked=true;
        }
    };
    //全不选设置
    document.getElementById("unSelectAll").onclick=function (ev) {
        for (var i=0;i<check.length;i++){
            check[i].checked=false;
        }
    };
    //反选设置
    document.getElementById("selectRev").onclick=function (ev) {
        for (var i=0;i<check.length;i++){
            check[i].checked=!check[i].checked;
        }
    };
    //第一行checkbox设置
    function fun(ev){
        for (var i=0;i<check.length;i++){
            check[i].checked=ev.checked;
        }
    }
</script>
</html>