BOM对象和DOM对象
BOM对象
BOM对象（浏览器对象模型）：可以对浏览器窗口进行访问和操作
使用BOM，开发者可以对移动窗口，改变状态栏中的文本以及执行其他和页面内容不相关的操作
window对象
所有浏览器都支持window对象，一个HTML对应一个window对象，用于控制窗口，window对象不用创建对象可以直接使用
window对象方法
alert() 显示带有一段消息和一个确认按钮的警告弹出框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的警告弹出框。
prompt() 显示带有一段消息以及可提示用户输入的对话框和确认，取消的警告弹出框。
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
close() 关闭浏览器窗口。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。每隔多长时间执行一下这个函数
clearInterval() 取消由 setInterval() 设置的 timeout。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
scrollTo() 把内容滚动到指定的坐标。
<body> <input type="text" id="id1" onclick="begin()"> <button onclick="end()">stop</button> <script> begin(); function showtime(){ var nowdate = new Date().toLocaleString(); /*获取时间，并以字符串形式显示*/ var ele = document.getElementById("id1"); /*获取id标签*/ ele.value = nowdate; } var clock1; function begin(){ if(clock1 == undefined) { showtime(); clock1 = setInterval(showtime,1000); /*设定函数每隔多长时间执行一次*/ } } function end() { clearInterval(clock1); /*停止周期性执行函数*/ clock1 == undefined; } </script>
History对象
history对象属性：保存用户在浏览器窗口中访问过的URL，length：返回浏览器历史中URL的数量
history对象方法
history.back() 加载 history 列表中的前一个 URL。
history.forward() 加载 history 列表中的下一个 URL。
history.go() 加载 history 列表中的某个具体页面。
Location对象
location.href 跳转到指定链接
location.assign(URL) 跳转到指定链接页面上，可以退回到原页面
location.reload() 刷新
location.replace(newURL) 用新的链接替换原先的页面，不能退回到原页面，注意与assign的区别
location.hash 链接地址#号后面的内容
location.host 主机和端口号
location.hostname 主机名
location,pathname 相对路径
location,port 端口号
location,search 搜索内容
location,protocal 协议
navigator对象
navigator.platform 判断浏览器所在平台系统
DOM对象
DOM是w3c的标准，定义了一个访问HTML和xml文档的标准
w3c文档对象模型是中立与平台和语言的接口，它允许程序和脚本动态的访问和更新文档内容，结构和样式
w3c文档标准被分为3个部分
核心 DOM：针对任何结构化文档的标准模型
xml DOM：针对xml结构化的文档模型
HTML DOM：针对HTML结构化的文档模型
DOM节点
根据W3C 的HTML DOM标准，HTML文档的所有内容都是节点（NODE）
整个文档是一个文档节点（document对象）
每个HTML元素都是一个元素节点（element对象）
HTML元素里的文本是文本节点（text对象）
每个元素的属性是一个属性节点（attribute对象）
注释是注释节点（comment对象）
节点自身属性
attributes：节点元素的属性节点
nodeType：节点类型：1----标签，2---属性，3---文本
nodeValue：节点值
nodeName：节点名称
innerHTML：节点元素的文本值
导航属性（节点获取）
parentNode：节点的父节点
previousSibling：节点的同级的上一个节点
nextSibling：节点的同层级的下一个节点
firstChild：节点的第一个子节点
lastChild：节点的最后一个子节点
childNodes：节点的所有子节点
导航属性（元素获取）
parentElemnet：父节点的标签元素
children：所有子标签
firstElementChild：第一个子标签
lastElementChild：最后一个子标签
previousElementSibling：同级的上一个标签
nextElementSibling：同级的下一个标签
<script>
//element.firstChild ：谷歌，火狐获取的是第一个子节点
//element.firstChild :IE8获取的是第一个子元素
//element.firstElementChild :谷歌，火狐获取第一个子元素，IE8不支持（undefined）
//凡是获取节点的方法，在谷歌，火狐中获得的是节点
//凡是获取元素的方法，在谷歌，火狐中获取的是元素
//对于子元素，同级元素，获取节点的方式 IE8 中获取的是元素，获取元素的方法 IE8 获取的是undefined
//兼容代码
//获取父节点第一个子元素
function getFirstElemntChild(element) {
if (element.firstElementChild) { /*turn支持*/
return element.firstElementChild;
}else{ /*False不支持*/
var node = element.firstChild; /*获取第一个节点*/
while (node && node != 1){ /*判断第一个节点是否是元素*/
node.nextSibling;
}
return node;
}
}
//获取父节点的最后一个元素
function getLastElemntChild(element) {
if (element.lastElementChild) { /*turn支持*/
return element.lastElementChild;
}else{ /*False不支持*/
var node = element.lastChild; /*获取最后一个节点*/
while (node && node != 1){ /*判断最后一个节点是否是元素，不是循环到是标签为止*/
node.previousSibling;
}
return node;
}
}
</script>
节点树的节点存在层级关系
节点树中，顶端称为根（root）
每个节点都有父节点，除了根节点
一个节点可以有多个子节点
同胞节点拥有相同的父节点
访问HTML元素等同访问节点，可以通过不同的方法访问HTML元素
getElementById（），getElementsByClassName（），getElementsByTagName（），getElementsByName（）
在哪个节点下查找就用哪个节点调用这些方法，但要注意不是document节点，不支持ById，ByName这两个方法调用
<body>
<div class="div1">
<p class="p1">hello</p>
<div class="div2">word</div>
</div>
<script>
var ele = document.getElementsByClassName("p1")[0]; /*拿到这个相同class名的标签集合,因为class名可以相同*/
console.log(ele.nodeName);
console.log(ele.nodeType);
console.log(ele.nodeValue);
console.log(ele.innerHTML); /*拿到标签中的文本*/
ele.innerHTML="hello ss"; /*修改标签中的文本内容*/
var p_ele = ele.parentNode;
var b_ele = ele.nextElementSibling; /*获取和自己标签的同层级的标签*/
console.log(p_ele);
console.log(b_ele);
</script>
HTML DOM Event（事件）
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 //练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseleave 鼠标从元素离开
onselect 文本被选中。
onsubmit 确认按钮被点击。
绑定事件
1、对象.on事件名 = function(){}
2、对象.addEventListener(type,function(){},boolean) //谷歌，火狐支持，IE8不支持
type:事件（字符串类型），注意这个事件是不带有on的，如：click
Boolean类型一般是False
3、对象.attachEvent("有on的事件"，事件处理函数） //IE8支持，谷歌，火狐不支持
两种不同：this在addEventListener中代指当前的绑定事件，而在attachEvent中代指window
解绑事件
用什么方法绑定事件就用对应的方法解绑事件
1、对象.on事件名 = null;
2、对象.removeEventListener("事件名",事件函数，false)
3、对象.detattachEvent("on事件名"，事件函数)
<body>
<input type="text" id="search" value="请输入" onfocus="f1()" onblur="f2()">
<script>
var ele = document.getElementById("search");
function f1(){
if (ele.value == "请输入") {
ele.value="";
}
}
function f2(){
if(!ele.value.trim()){ /*如果这个标签值为空*/
ele.value="请输入";
}
}
</script>
</body>
<body> <input type="button" value="点击事件" id="btn"> <script> document.getElementById("btn").onclick = function () { alert("被点击了"）; }; </script> </body>
事件绑定
<body>
<div class="v1">
<div class="v2">ddd</div>
<div class="v2">ddd</div>
<div class="v2">ddd</div>
<div class="v2">ddd</div>
<div class="v2">ddd</div>
<p class="p1" onclick="func(this)">ppp</p> <!--this 获取自身的本身标签-->
</div>
<script>
function func(args){ /*获取自身标签后就可以查找父级，子级，同级标签*/
console.log(args);
console.log(args.previousElementSibling);
}
// var ele = document.getElementsByClassName("p1")[0];
// ele.onclick = function () {
// alert(123);
// };
//事件绑定
var ele2 = document.getElementsByClassName("v2");
for(var i=0;i<ele2.length;i++){
ele2[i].onclick = function(){
alert(111);
};
}
</script>
</body>
onsubmit
提交表单时触发，该属性只用于form元素使用。当表单提交前验证用户输入是否正确，验证失败，则阻止表单提交
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="" id="f1"> <input type="text" name="username"> <input type="submit" value="submit"> </form> <script> var ele = document.getElementById("f1"); ele.onsubmit = function () { alert("err"); return false; /*当返回值是false时，表单就会被阻止提交*/ } </script> </body> </html>
事件传播
<div id="abc_1" style="border:1px solid red;width:300px;height:300px;"> <div id="abc_2" style="border:1px solid red;width:200px;height:200px;"></div> </div> <script type="text/javascript"> document.getElementById("abc_1").onclick=function(){ alert('111'); } document.getElementById("abc_2").onclick=function(event){ alert('222'); event.stopPropagation(); //阻止事件向外层div传播. } </script>
增删改查
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div1,.div2,.div3,.div4{ width: 300px; height: 100px; } .div1{ background-color: red; } .div2{ background-color: green; } .div3{ background-color: deeppink; } .div4{ background-color: blue; } </style> </head> <body> <div class="div1"> <button onclick="add()">add</button> hello div1 </div> <div class="div2"> <button onclick="del()">del</button> hello div2 </div> <div class="div3"> <button onclick="change()">change</button> hello div3 <p>word</p> </div> <div class="div4">hello div4</div> <script> //增删改查，都是有父级标签调用方法 function add() { var ele = document.createElement("p"); ele.innerHTML="hello p"; /*增加标签内文本内容*/ ele.style.color="yellow"; /*设置添加的标签样式*/ ele.style.fontSize="10px"; var father = document.getElementsByClassName("div1")[0]; father.appendChild(ele); /*在父标签下添加子标签*/ } function del() { var father = document.getElementsByClassName("div1")[0]; var son = father.getElementsByTagName("p")[0]; father.removeChild(son); /*删除子标签*/ } function change() { var img = document.createElement("img"); img.src="前端练习/images/logo.png"; /*添加标签属性*/ // img.setAttribute("src","前端练习/images/logo.png"); // var s = img.getAttribute("src"); /*获取标签里的某个属性*/ var father = document.getElementsByClassName("div3")[0]; var son = father.getElementsByTagName("p")[0]; father.replaceChild(img,son); /*替换子标签*/ } </script> </body> </html>
模拟登陆弹出遮挡框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .back{ background-color: rebeccapurple; height: 2000px; } .shade{ position: fixed; top: 0; bottom: 0; left:0; right: 0; background-color: coral; opacity: 0.4; //透明度 } .hide{ display: none; //标签不显示 } .models{ position: fixed; top: 50%; left: 50%; margin-left: -100px; margin-top: -100px; height: 200px; width: 200px; background-color: gold; } </style> </head> <body> <div class="back"> <input id="ID1" type="button" value="click" onclick="action('show')"> </div> <div class="shade hide"></div> <div class="models hide"> <input id="ID2" type="button" value="cancel" onclick="action('hide')"> </div> <script> function action(act){ var ele=document.getElementsByClassName("shade")[0]; var ele2=document.getElementsByClassName("models")[0]; if(act=="show"){ ele.classList.remove("hide"); //移除标签的class名 ele2.classList.remove("hide"); }else { ele.classList.add("hide"); //添加标签的class名 ele2.classList.add("hide"); } } </script> </body> </html>
正选反选取消
<button onclick="select('all');">全选</button>
<button onclick="select('cancel');">取消</button>
<button onclick="select('reverse');">反选</button>
<table border="1" id="Table">
<tr>
<td><input type="checkbox"></td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>333</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>444</td>
</tr>
</table>
<script>
function select(choice){
var ele=document.getElementById("Table");
var inputs=ele.getElementsByTagName("input");
for (var i=0;i<inputs.length;i=i+1){
var ele2=inputs[i];
if (choice=="all"){
ele2.checked=true; //选择
}else if(choice=="cancel"){
ele2.checked=false; //不选择
}
else {
if (ele2.checked){
ele2.checked=false;
}else {
ele2.checked=true;
}
}
//else{
//ele2.checked=！ele2.checked； /*反选*/
//}
}
}
</script>
两级联动
<select id="province">
<option>请选择省:</option>
</select>
<select id="city">
<option>请选择市:</option>
</select>
<script>
data={"广东":["广州","深圳"],"北京":["朝阳区","海淀区"]};
var p=document.getElementById("province");
var c=document.getElementById("city");
for(var i in data){
var option_pro=document.createElement("option");
option_pro.innerHTML=i;
p.appendChild(option_pro);
}
p.onchange=function(){ //域发生改变触发事件，使得选择时触发函数执行
//this这里代指select标签，this.selectedIndex：获取标签下子元素的索引值
pro=(this.options[this.selectedIndex]).innerHTML; //通过索引获取每个子标签，再用innerHTML获取标签里的文本内容
var citys=data[pro]; //子标签里的文本是数据字典中的键，通过键获取值
c.options.length=1; //让长度只有一个，使得每次重新选择时清空上次的触发结果
for (var i in citys){
var option_city=document.createElement("option");
option_city.innerHTML=citys[i];
c.appendChild(option_city);
}
}
</script>
绑定多个事件兼容代码
<script>
function my$(id) {
return document.getElementById(id);
}
//addEventListener(“事件”,事件函数，false） 谷歌，火狐支持，IE8不支持
//attachEvent("事件“，事件函数） 谷歌，火狐不支持，IE8支持
//为任意原始，绑定任意事件，任意元素，事件类型，事件处理函数
function addEventListener(element,type,fn) {
//判断浏览器是否支持这个方法
if(element.addEventListener) {
element.addEventListener(type,fn,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,fn);
}else{
element["on"+type] = fn;
}
}
//添加多个事件
addEventListener(my$("btn"),"click",function(){
console.log("哦哦")
});
addEventListener(my$("btn"),"click",function(){
console.log("嗯嗯")
});
addEventListener(my$("btn"),"click",function(){
console.log("呵呵")
});
</script>
