02.WEB前端~JavaScript事件机制与BOM和DOM

本文是上一篇文章的后续详情点击该链接,

#### 事件机制

可以被浏览器侦测到的人或者浏览器的行为,人对浏览器或者浏览器对网页做了什么事,js可以根据不同行为.绑定一些不同的响应代码处理,让浏览器和人的行为之间有一个交互

属性	当以下情况发生时，出现此事
onabort	图像加载被中断
onblur	元素失去焦点
onchange	用户改变域的内容
onclick	鼠标点击某个对象
ondblclick	鼠标双击某个对象
onerror	当加载文档或图像时发生某个错误
onfocus	元素获得焦点
onkeydown	某个键盘的键被按下
onkeypress	某个键盘的键被按下或按住
onkeyup	某个键盘的键被松开
onload	某个页面或图像被完成加
onmousedown	某个鼠标按键被按下
onmousemove	鼠标被移动
onmouseout	鼠标从某元素移开
onmouseover	鼠标被移到某元素之上
onmouseup	某个鼠标按键被松开
onreset	重置按钮被点击
onresize	窗口或框架被调整尺寸
onselect	文本被选定
onsubmit	提交按钮被点击
onunload	用户退出页面

单击事件

<body>
    <!-- 单击事件  -->
    <input type="button" name="" id="" value="单击事件" onclick="demo1()"/>
    <script type="text/javascript">
        function demo1(){
            alert("单击事件已触发");
        }
    </script>
</body>

双击事件

<input type="button" name="" id="" value="双击事件" ondblclick="demo1()"/>

鼠标事件

<body>
    <!-- 鼠标事件  -->
    <div style="width: 300px;height: 300px; background-color: red;" onmousemove="demo()"></div>
    <script type="text/javascript">
        function demo(){
            alert("鼠标事件已触发");
        }
    </script>
</body>

认识BOM和DOM

什么是BOM

BOM是Browser Object Model的简写，即浏览器对象模型。

BOM有一系列对象组成，是访问、控制、修改浏览器的属性的方法

BOM没有统一的标准(每种客户端都可以自定标准)。

BOM的顶层是window对象

什么是DOM

DOM是Document Object Model的简写，即文档对象模型。

DOM用于XHTML、XML文档的应用程序接口(API)。

DOM提供一种结构化的文档描述方式，从而使HTML内容使用结构化的方式显示。

DOM由一系列对象组成，是访问、检索、修改XHTML文档内容与结构的标准方法。

DOM标准是由w3c制定与维护。DOM是跨平台与跨语言的。

DOM的顶层是document对象

BOM对象 window

Window 对象描述

Window 对象简单理解就是把浏览器抽象成一个对象,它表示一个浏览器窗口或一个框架。在客户端 JavaScript中，Window 对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。例如，可以只写document，而不必写 window.document。同样，可以把当前窗口对象的方法当作函数来使用，如只写
alert()，而不必写 Window.alert()

Window对象属性

属性	描述
closed	返回窗口是否已被关闭。
defaultStatus	设置或返回窗口状态栏中的默认文本。
document	对 Document 对象的只读引用。请参阅 Document 对象
history	对 History 对象的只读引用。请参数 History 对象
innerheight	返回窗口的文档显示区的高度。
innerwidth	返回窗口的文档显示区的宽度。
length	设置或返回窗口中的框架数量。
location	用于窗口或框架的 Location 对象。请参阅 Location 对象。
name	设置或返回窗口的名称。
Navigator	对 Navigator 对象的只读引用。请参数 Navigator 对象。
opener	返回对创建此窗口的窗口的引用。
outerheight	返回窗口的外部高度。
outerwidth	返回窗口的外部宽度。
pageXOffset	设置或返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset	设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
parent	返回父窗口。
Screen	对 Screen 对象的只读引用。请参数 Screen 对象。
self	返回对当前窗口的引用。等价于 Window 属性。
status	设置窗口状态栏的文本。
top	返回最顶层的先辈窗口。
window	window 属性等价于 self 属性，它包含了对窗口自身的引用。

Window 对象方法

alert()	显示带有一段消息和一个确认按钮的警告框。
blur()	把键盘焦点从顶层窗口移开。
clearInterval()	取消由 setInterval() 设置的 timeout。
clearTimeout()	取消由 setTimeout() 方法设置的 timeout。
close()	关闭浏览器窗口。
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
createPopup()	创建一个 pop-up 窗口。
focus()	把键盘焦点给予一个窗口。
moveBy()	可相对窗口的当前坐标把它移动指定的像素。
moveTo()	把窗口的左上角移动到一个指定的坐标。
open()	打开一个新的浏览器窗口或查找一个已命名的窗口。
print()	打印当前窗口的内容。
prompt()	显示可提示用户输入的对话框。
resizeBy()	按照指定的像素调整窗口的大小。
resizeTo()	把窗口的大小调整到指定的宽度和高度。
scrollBy()	按照指定的像素值来滚动内容。
scrollTo()	把内容滚动到指定的坐标。
setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()	在指定的毫秒数后调用函数或计算表达式。

三种弹框

<body>
    <input type="button" value="弹框A" onclick="demo1()">
    <input type="button" value="弹框B" onclick="demo2()">
    <input type="button" value="弹框C" onclick="demo3()">
    <script type="text/javascript">
        //三种弹框
        function demo1(){
            //含有确定按钮的弹框
            window.alert("弹框A");
        }
        function demo2(){
            //含有确定和取消两个按钮的弹框
            var flag = window.confirm("是否删除?");   //返回布尔值
            document.write(flag);
        }
        function demo3(){
            //含有输入框和确认取消两个按钮的弹框
            var name =  window.prompt("请输入昵称");
            document.write(name);
        }
    </script>
</body>

计时器练习

<body>
    <span id="time"></span>
    <input type="button" value="停止时间" onclick="demo()"/>
    <script type="text/javascript">
        function getTime(){
            var date = new Date();
            //获得时间
            var time = date.toLocaleString();
            //获得id名称和span的对象
            var span = document.getElementById("time");
            span.innerHTML = time;
        }
        function demo(){
            //清除定时器
            window.clearInterval(inl);
        }
        //1秒之后进行方法调用,但只调用一次
        //window.setTimeout("getTime()",1000);
        //每间隔一秒就会调用方法一次
        var inl = window.setInterval("getTime()",1000);
    </script>
</body>

location对象:

//http://localhost:63342/Project/HTML/Project.html
var href = window.location.href;
//localhost
var hostname = window.location.hostname;
//63342
var port = window.location.port;
//localhost:63342
var host = window.location.host;
//刷新按钮
window.location.reload();

History对象:

<body>
    <input type="button" value="history" onclick="demo()"/>
    <input type="button" value="history" onclick="testScreen()"/>
    <input type="button" value="history" onclick="testNavigator()"/>
    <script type="text/javascript">
        function demo() {
            //返回浏览器历史列表中的URL数量
            var len = window.history.length;
            alert(len);
            //前进操作,前进一个网页
            window.history.forward();
            //后退操作,后退一个网页
            window.history.back();
            //前进或后退多个
            window.history.go(5);//正数前进,负数后退.0为刷新
        }
        function testScreen(){
            //获得当前屏幕的分辨率
            var he = window.screen.height;  //高度
            var wi = window.screen.width;   //宽度
            alert(he + "-----" + wi);
        }
        function testNavigator(){
            //用户代理
            var us = window.navigator.userAgent;
            alert(us);
        }
    </script>
</body>

open和close方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function fun1(){
				window.open("http://www.baidu.com")
			}
			function fun2(){
				window.close()
			}
		</script>
	</head>
	<body>
		<input type="button" value="open" onclick="fun1()" />
		<input type="button" value="close" onclick="fun2()" />
	</body>
</html>

screen和navigator

screen代表屏幕,navigator代表浏览器软件本身,通过这两个对象可以获得屏幕和浏览器软件的一些信息

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function fun(){
				console.info(window.screen.width)
				console.info(window.screen.height)
				console.info(navigator.userAgent)
				console.info(navigator.appName)
			}
		</script>
	</head>
	<body onload="fun()">
	</body>
</html>

DOM编程

什么是DOM编程

简单来说:DOM编程就是使用document对象的API完成对网页HTML文档进行动态修改,以实现网页数据和样式动态变化效果的编程.

什么是document

document对象代表整个html文档，可用来访问页面中的所有元素，是最复杂的一个dom对象，可以说是学习好dom编程的关键所在。

DOM编程获得节点的方式

HTML

<body>
        <form action="">
            用户名: <input type="text" name="username" id="username" value="请输入用户名"/><br/>
            密&nbsp;码:<input type="password" name="pwd" id="pwd" value="请输入密码"/><br/>
            爱好:<input type="checkbox" name="hobby" value="music"/> 音乐
                 <input type="checkbox" name="hobby" value="sports"/>体育
                 <input type="checkbox" name="hobby" value="art"/> 美术 <br/>
            职业: <select name="professional" id="professional">
                        <option>工人</option>
                        <option>农民</option>
                        <option>程序员</option>
                        <option>解放军</option>
                  </select><br/>
            <input type="button" value="提交" onclick="demoPlus()"/>
        </form>
</body>

JavaScript操作

直接获得

<script type="text/javascript">
    //-------直接获得节点对象的方式-------
    function demo(){
    //id方式直接获得----单个对象
    var username = document.getElementById("username");
    alert(username);
}
function demoS(){
    //通过标签名称来获得我们元素的对象
    var inp = document.getElementsByTagName("input");
    alert(inp.length);
}
function demoPlus(){
    //通过name获得我们元素的对象
    var name = document.getElementsByName("hobby");
    alert(name.length);
}
</script>

间接获得

//-------直接获得节点对象的方式-------
function demo(){
    var professional = document.getElementById("professional");
    //获得对应的子元素   注意:空白的文档也是一个子节点
    var child = professional.childNodes;
    alert(child.length);    //9
}
function demoS(){
    var p2 = document.getElementById("p2");
    //获得父节点
    var par = p2.parentNode;
    alert(par.length);  //4
}
function demoPlus(){
    var p2 = document.getElementById("p2");
    //获得下一个节点 包含空白文档
    //var next = p2.nextSibling.nextSibling;
    var next = p2.nextElementSibling;   //不包含空白文档
    var up = p2.previousSibling;    //上一个节点对象,包含空白文档
    var Up = p2.previousElementSibling; //不包含空白
    alert(next);    //text
}

DOM操作属性

<body>
    <input type="text" id="inpl" value="张三" name="uname"/><hr/>
    <input type="button" name="" id="" value="测试元素属性" onclick="demo()"/>
    <script type="text/javascript">
        function demo(){
            //获得id名称是inpl的节点
            var inpl = document.getElementById("inpl");
            //获得节点对象的属性
            var ty = inpl.type;		//true
            var va = inpl.value;	//张三
            var na = inpl.name;		//uname
            alert(ty + " " + va + " " + na);
        }
    </script>
</body>

操作属性

方法一(常用)

//操作元素的属性
inpl.type="button";
inpl.value="测试改变";

方法二

//获得元素的属性
var ty1 = inpl.getAttribute("type");
var var2 = inpl.getAttribute("value");
//操作元素的属性
inpl.setAttribute("type","button");

DOM操作样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function  demo1(){
				//获得id名称是div1的对象
				var div =document.getElementById("div1");
				//获得css样式  只是支持行内样式的css
				var  wi=div.style.width;
				var  hi=div.style.height;
//				alert(wi+"----"+hi);
				//操作元素的css样式    对于 background-color格式的样式在js中需要使用驼峰规则进行改变
				div.style.width="300px";
				div.style.height="300px";
				div.style.backgroundColor="red";
				//通过增加class类来增加对应的css样式   注意：className 
				div.className="div2";
			}
		</script>
		<style>
			.div2{	
				border: 3px solid  green;
			}
		</style>
	</head>
	<body>
		<div id="div1"  style="width: 200px; height: 200px; background-color: palegreen;"></div>
		<hr />
		<input type="button" name="" id="" value="css样式的操作" onclick="demo1()" />
	</body>
</html>

DOM操作文本的和值

<!DOCTYPE html>
<head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
        #div1{
            width:200px;
            heigh:200px;
            border:2px solid red;
        }
    </style>
    <script type="text/javascript">
        function demo(){
            //获得div的对象
            var div = document.getElementById("div1");
            //获得元素的文本内容
            //获得HTML的内容包括标签
            var inn = div.innerHTML;    //<span>我们不一样</span>
            //只会获得文本信息
            var inn2 = div.innerText;   //我们不一样
            //console.log(inn + " " + inn2);
           // div.innerHTML="<h1>我们没有什么不一样</h1>"; //会识别HTML信息
            //不会识别HTML信息,会把标签当成文本内容原封不动的输出
            div.innerText += "<h1>我们没有什么不一样</h1>";//使用+=就是追加,=就是覆盖
            /*
                双标签innerHTML 和 innerText
                单标签获得的时候都是用value获得
                特殊的标签:select,textarea
             */
        }
        function demo2(){
            //获得select对象
            var sel = document.getElementById("sele");
            alert(sel.value);
        }
        function  demo3(){
            var  te= document.getElementById("tex");
            alert(te.value);
        }
    </script>
</head>
<body>
    <div id="div1">
        <span>我们不一样</span>
    </div>
    <input type="button" onclick="demo()" value="显示"/>
    <input type="text" name="inp2" id="inp2" value=""/>
    <!--  特殊的操作  -->
    <select id="sele" onchange="demo2()">
        <option value="0">选择</option>
        <option value="1">中国</option>
        <option value="2">美国</option>
        <option value="3">法国</option>
    </select><br/>
        <textarea rows="20" cols="20" id="tex"></textarea>
        <input type="button" value="操作元素的文本内容" onclick="demo3()"/>
</body>
</html>

DOM操作元素节点对象

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script>
        function  addNode(){
            //获得表单对象
            var  fom=document.getElementById("fom");
            //创建节点的方法
            var  p=	document.createElement("p");
            p.innerText="照片： "
            var  inp=document.createElement("input");
            inp.type="file";
            var  inp2=document.createElement("input");
            inp2.type="button";
            inp2.value="删除";
            inp2.onclick=function(){
                //移除子节点；
                p.removeChild(inp);
                p.removeChild(inp2);
                //移除本身
                p.remove();
            }
            //添加节点对象
//		     fom.appendChild(p);
            //获得最后一个节点对象
            var  lastNode=document.getElementById("lastNode");
            //在指定元素之前添加节点
            fom.insertBefore(p,lastNode);
            p.appendChild(inp);
            p.appendChild(inp2);
        }
    </script>
</head>
<body>
<form  id="fom">
    <p>
        用户名：<input type="text" />
    </p>
    <p>
        照片：<input type="file" />
        <input type="button" value="添加"  onclick="addNode()"/>
    </p>
    <p id="lastNode">
        <input type="button" name="" id="" value="提交" />
        <input type="button" name="" id="" value="清空" />
    </p>
</form>
</body>
</html>