目录
2.1.2 getElementByTagName() 放大缩小图片
1 Bom对象
bom: browser object model 浏览器对象模型 操作浏览器上的对象 js希望和浏览器有一定的交互能力
1.1 window对象
所有的浏览器都支持window对象。它表示的浏览器窗口
window对象是js中的顶层对象，所有的js函数，变量等都是window对象成员
甚至Dom的document也是window对象的属性之一
1.1.1 frameset
可以把window页面进行分割, 是一个框架标签，把页面引入或者进行割，最大的缺点就不能body一块使用
<frameset>分割的标签
<frame>标签 引入其他页面
<frameset rows="20%,*">
<frame src="hear.html" />
<frameset cols="20%,*">
<frame src="left.html" />
<frame src="rigth.html" />
</frameset>
</frameset>1.1.2 iframe
可以把window页面进行分割， 是一个框架标签，可以和body一块使用
1.1.3 confrim确认框架
confrim两个值 确定(true） 取消(false)
var con = window.confrim(消息)；返回的类型为boolean
<script>
function demo(){
var a= window.confirm("确定删除吗？");
if (a) {
alert("已删除");
}else{
alert("已取消");
}
}
</script>1.1.4 时间周期
clearInterval() 取消由setInterval()设置的timeout
clearTimeout() 取消setTimeout()设置的timeout
setInterval() 指定时间周期
setTimeout() 在指定的毫秒数后调期函数或者计算表达式
<script>
// 设置一个时间周期，（调用的方法，时间周期）
var a = window.setInterval("_setTime()",1000);
// 页面刷新，可以看到时间，这个是静态的
window.onload=function(){
// 获取id
var _time= document.getElementById("_time");
// 获取当前时间
var date= new Date();
// 把时间写到span标签中
_time.innerHTML=date.toLocaleString();
}
function _setTime(){
//获取id
var _time= document.getElementById("_time");
//获取当前时间
var date= new Date();
//把时间写到span标签中
_time.innerHTML=date.toLocaleString();
}
//停止时间
function _stop(){
window.clearInterval(a);//获取设置时间周期的id
}
// 开始时间
function _star(){
a = window.setInterval("_setTime()",1000);
}
</script>
<body>
<span id="_time" style="color: red;"></span>
<input type="button" value="暂停" onclick="_stop()">
<input type="button" value="开始" onclick="_star()">
</body>1.1.5 打开、打开浏览器
close() 关闭浏览器 window.close();
open() 打开浏览器 window.open();
1.2 history对象
history对象包含用户访问过的url, 注意： 一定是访问过的历史url
history是window对象的一部份，可以通过window.history属性进行访问
back 加载history列表中的前一个URL
forward 加载history列表中的下一个URL
go 加载hitory列表中的某一个具体的页面
<script>
//返回上一页
function backPage(){
history.back();
}
//跳到下一页
function forwardPage(){
history.forward();
}
//指定跳转
function goPage(){
//负数是指定上一个页（左边）
//正数是指定下一个页（右边）
history.go(1);
}
</script>1.3 Location对象
Location对象是window对象的一部份，可以通过window.location属性来访问
location表示是当前浏览器的地址对象。浏览器的地址中主要保存的是访问某个网站的url地址
location.href = "http://www.baidu.com";2 Dom对象
Dom对象: Document Object Model 文档对象模型 操作网页中的元素
当浏览器把一个html文件加载到内存中之后，这个html文件，就是一个Document对象。
并且在浏览器加载html文件中的所有标签时，把html文件中的所有标签页加载成不同的标签对象（元素节点），标签中的属性加载成属性对象（属性节点），标签中的文本加载成文本对象（文本节点）。
2.1 document对象
Document对象代表整个html文档，可用来访问页面中的所有元素
document.getElementById() 返回指定id对象的引用
document.getElementsByName() 返回指定带有名称的对象集合
document.getElementsByTagName() 返回指定带有标签名的对象集合
document.getElementsByClassName() 根据Class属性值获取元素对象们。返回值是数组
document.querySelector(id选择器) 根据id选择器，获取元素
document.querySelectorAll(css选择器) 根据css选择器获取元素，返回是一个数组
2.1.1 getElementById()显示隐藏密码
<script type="text/javascript">
function demo(){
// 方式一
// var a = document.getElementById("inpid");
// 方式二
var a = document.querySelector("#inpid")
if (inpid.type == "text"){
inpid.type = "password";
}else if(inpid.type == "password"){
inpid.type = "text";
}
}
</script>
<body>
<input type="text" id="inpid" />
<input type="button" onclick="demo()" value="隐藏/显示密码" />
</body>2.1.2 getElementByTagName() 放大缩小图片
<script>
function demo1(){
var img = document.getElementsByTagName("img");
img[0].width += 30;
}
function demo2(){
var img = document.querySelectorAll("img");
img[0].width -= 30;
}
</script>
<body>
<img src="img/01.jpg" width="300px" >
<input type="button" onclick="demo1()" value="放大" />
<input type="button" onclick="demo2()" value="缩小" />
</body>2.1.3 getElementByName() 获取选项
<body>
<input type="checkbox" name="hobby" class="hobby" value="足球" />足球
<input type="checkbox" name="hobby" class="hobby" value="篮球" />篮球
<input type="checkbox" name="hobby" class="hobby" value="气球" />气球
<input type="button" onclick="demo()" value="提交">
</body>
<script>
function demo(){
// 方式一
var a = document.getElementsByName("hobby");
// 方式二
// var a = document.querySelectorAll("[name='hobby']");
// 方式三
// var a = document.getElementsByClassName("hobby");
// 方式四
// var a = document.querySelectorAll(".hobby")
for(var i=0;i<a.length;i++){
if(a[i].checked==true){
alert(a[i].value);
}
}
}
</script>2.2 操作内容
element.innerText 获取或者修改元素的纯文本内容，不包括标签
element.innerHTML 获取或者修改元素的html内容，包括里面的标签
element.outerHTML 获取或者修改包含自身的html内容，包含自身标签
<body>
<div id="did">
<h4>哈哈哈哈</h4>
哈哈哈哈哈哈哈哈嗝,
呜呜呜呜呜呜呜问问
</div>
<script>
var a = document.getElementById("did");
//获取或者修改元素的纯文本内容，不包括标签
console.info(a.innerText);
console.info(a.innerText="来来来");
console.info(a.innerText+="啦啦啦");
//获取或者修改元素的html内容，包括里面的标签
// console.info(a.innerHTML);
// console.info(a.innerHTML="来来来");
// console.info(a.innerHTML+="啦啦啦");
//获取或者修改包含自身的html内容，包含自身标签
// console.info(a.outerHTML);
// console.info(a.outerHTML="来来来");
// console.info(a.innerText+="啦啦啦");
</script>
</body>2.3 常用事件
（1）点击事件
onclick 单击事件
ondblclick 双击事件
（2）焦点事件
onblur 失去焦点
onfocus 元素获得焦点
（3）加载事件
onload 页面加载完成后立即发生
（4）鼠标事件
onmousedown 鼠标按键被按下
onmouseup 鼠标按键被松开
onmousemove 鼠标被移动
onmouseover 鼠标移到某元素之上
onmouseout 鼠标从某元素移开
（5）键盘事件
onkeydown 某个键盘按键被按下
onkeyup 某个键盘按键被松开
onkeypress 某个键盘按键被按下并松开
（6）改变事件
onchange 域的内容被改变
（7）表单事件
onsubmit 提交按钮被点击
2.3.1 聚焦事件
<script>
function demo1(){
var name = document.querySelector("#uid").value;
var regexp = new RegExp("^1[3456789]\\d{9}$");
if(regexp.test(name)){
document.getElementById("spanid1").innerText = "合法";
}else{
document.getElementById("spanid1").innerText = "不合法";
}
}
function demo2(){
document.getElementById("spanid2").innerText = "我是聚焦事件";
}
</script>
<body>
手机号：<input type="text" name="usename" id="uid" onblur="demo1()"><span id="spanid1"></span><br>
密 码：<input type="password" name="psd" id="pid" onfocus="demo2()"><span id="spanid2"></span>
</body>2.3.2 鼠标事件
<script>
window.onload = function(){
// 获取初始图片
var a = document.getElementById("imgid");
// 绑定鼠标悬浮事件
a.onmouseover=function(){
a.src="img/02.jpg";
}
// 绑定鼠标离开事件
a.onmouseout = function(){
a.src = "img/01.jpg";
}
// 绑定鼠标按下事件
a.onmousedown = function(){
a.src = "img/03.jpg";
}
// 绑定鼠标被松开事件
a.onmouseup = function(){
a.src = "img/04.jpg";
}
// 绑定鼠标移动事件
/* a.onmousemove = function(){
a.src = "img/05.jpg";
} */
}
</script>
<body>
<img src="img/01.jpg" width="450px" id="imgid">
</body>2.3.3 键盘事件
<script>
window.onload=function(){
//获取输入框
var a =document.getElementById("inpid");
//绑定键盘按下事件
a.onkeydown=function(){
a.style.background = "red";
}
//绑定键盘松开事件
a.onkeyup = function(){
a.style.background = "yellow";
}
}
</script>
<body>
<input type="text" id="inpid" />
</body>2.4 操作节点
appendChild 为某一个标签，去添加子标签
removeChild 为某一个标签，删除孩子标签
setAttribute 为某一个标签添属性
removeAttribute 删除某一个标签中的属性
createElement 创建标签
createTextNode 创建文本
2.4.1 添加/删除子标签
<body>
<ul id="uid">
<li>aaa</li>
<li id="lid">bbb</li>
<li>ccc</li>
</ul>
<input type="button" value="添加" onclick="demo1()" />
<input type="button" value="删除" onclick="demo2()" />
<input type="button" value="删除全部" onclick="demo3()" />
<input type="button" value="依次删除" onclick="demo4()" />
</body>
<script>
// 添加子标签
function demo1(){
// 创建标签
var a = document.createElement("li");
// 创建文本
var b = document.createTextNode("ddd");
// 把文本添加到li标签中
a.appendChild(b);
// 添加到父标签中
document.getElementById("uid").appendChild(a);
}
// 删除指定子标签
function demo2(){
// 指定要删除的子标签
var c = document.querySelector("#lid");
// 删除子标签
c.parentNode.removeChild(c);
}
// 删除全部标签
function demo3(){
var d = document.getElementById("uid");
var childs = d.childNodes;
for(var i=childs.length-1;i>=0 ;i--){
d.removeChild(childs[i]);
}
}
function demo4(){
var arr = document.getElementsByTagName("li");
var dom = arr[0];
dom.parentNode.removeChild( dom );
}
</script>2.4.2 添加/删除属性
<body>
<input type="text" name="usename" autocomplete="off">
<input type="text" name="usename">
<input type="text" name="usename">
<input type="text" name="usename">
<input type="text" name="usename">
<input type="button" onclick="demo1()"value="添加">
<input type="button" onclick="demo2()"value="删除">
</body>
<script>
// 添加属性
function demo1(){
var tagName = document.getElementsByTagName("input");
for (var i = 0; i < tagName.length; i++) {
tagName[i].setAttribute("autocomplete","off");
}
}
//删除name属性
function demo2(){
var b = document.getElementsByTagName("input");
for (var i = 0; i < b.length; i++) {
b[i].removeAttribute("name");
}
}
</script2.5 操作样式
设置一个css样式
p1.style.fontSize = "20px";批量设置css样式
p2.style.cssText = "border:2px solid red; font-size:40px";通过class设置样式
<style>
.mpp {
background-color: orange;
}
</style>
p3.className = "mpp";<head>
<meta charset="UTF-8">
<style>
.mpp {
background-color: orange;
}
</style>
</head>
<body>
<p id="p1">1. 设置一个css样式</p>
<p id="p2">2. 批量设置css样式</p>
<p id="p3">3. 通过class设置样式</p>
<script>
let p1 = document.getElementById("p1");//获取段落标签
let p2 = document.getElementById("p2");//获取段落标签
let p3 = document.getElementById("p3");//获取段落标签
// 1. 设置一个css样式
// 设置字体大小
p1.style.fontSize = "20px";
// 设置背景颜色
p1.style.backgroundColor = "green";
// 设置字体颜色
p1.style.color = "red";
// 2. 批量设置css样式
p2.style.cssText = "border:2px solid red; font-size:40px";
// 3. 通过class设置样式
p3.className = "mpp";
</script>
</body>