javascript DOM
概念：HTML文档中的每个成分都是一个节点。HTML文档中的所有节点组成了一个文档树（节点树）。HTML文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续延伸枝条，直到处于这棵树最低级别的所有文本节点为止。DOM，就是操作页面元素的方法。
一：DOM Window
close：返回窗口是否已被关闭
open：打开新窗口
moveBy: 相对窗口的当前坐标移动到指定的像素（部分浏览器不支持，IE支持）
moveTo: 把窗口的的左上角移动到一个指定的坐标
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function isclosed(){
window.close();
}
function isopen(){
window.open("http://www.sogou.com");
}
function ismove(){
// window.moveBy(200,300);
window.moveTo(300,400);
}
</script>
</head>
<body>
<button onclick="isclosed();">关闭窗口</button>
<button onclick="isopen()">打开搜狗</button>
<button onclick="ismove()">移动</button>
</body>
</html>
二：DOM History
back：后退
forward: 前进
go: 前进或后退到某个固定的页面(-1表示后退一个网页，0 表示网页不变，1 表示前进一个网页)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function goforward(){
history.forward();
// history.go(1);
}
function goback(){
history.back();
// history.go(-1);
}
</script>
</head>
<body>
<button onclick="goforward()">前进</button>
<button type="goback()">后退</button>
<a href="windows.html">打开网页</a>
</body>
</html>
三：DOM Screen
width: 返回屏幕的宽度
height: 返回屏幕的高度
availHeight: 返回屏幕除Windows任务栏的高度
availWidth: 返回屏幕除Windows任务栏的宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
console.info(screen.height)
console.info(screen.width)
console.info(screen.availHeight)
console.info(screen.availWidth)
</script>
</head>
<body>
</body>
</html>
结果为:
四：DOM Location
Location 对象包含有关当前URL的信息
hash: 返回URL中的hash(#后跟的零或多个字符)
host: 返回主机名和端口号
hostname: 返回URL的主机名
href: 返回完整的URL
pathname: 返回URL中的路径部分
port: 返回当前URL中的端口号
protocol: 返回这个页面使用的协议
search: 返回从?开始的URL(查询部分)
(若没有的返回空值)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
console.info(location.hash)
console.info(location.host)
console.info(location.hostname)
console.info(location.href)
console.info(location.pathname)
console.info(location.port)
console.info(location.protocol)
console.info(location.search)
</script>
</head>
<body>
</body>
</html>
运行结果
五：获取DOM的几种方式
1.通过id获取
<div id="box">hello world</div>
<script type="text/javascript">
var _box =document.getElementById("box");
console.info(_box.innerHTML)
</script>
2.通过class获取
<div class="msg">A1</div>
<div class="msg">A2</div>
<div class="msg">A3</div>
<script type="text/javascript">
var _msg =document.getElementsByClassName("msg");
console.info(_msg);
_msg[0].innerHTML="老王";
</script>
注：（_msg[0].innerHTML=“老王”;）为修改第二个div的值
3.通过name属性获取对应的标签
<input type="text" name="user" value="你好~" /><br>
<input type="text" name="user2" value="hello" />
<script type="text/javascript">
var _user = document.getElementsByName("user");
console.info(_user[0].value);
</script>
修改第一个文本框中的值
<input type="text" name="user" value="你好~" /><br>
<input type="text" name="user2" value="hello" />
<script type="text/javascript">
var _user = document.getElementsByName("user");
console.info(_user[0].value);
_user[0].value="世界";
</script>
4.通过标签名获取页面上所有的该标签
<div class="first">张三</div>
<div class="second">李四</div>
<div class="third">老王</div>
<script type="text/javascript">
var divs = document.getElementsByTagName("div");
console.info(divs[1])
修改其中李四为刘备
<div class="first">张三</div>
<div class="second">李四</div>
<div class="third">老王</div>
<script type="text/javascript">
var divs = document.getElementsByTagName("div");
divs[1].innerHTML=`<h1>刘备</h1>`;
</script>
六：操作DOM对象的内容
Window.onliad事件 表示页面加载完成后触发
innerText仅仅操作标签及其子标签文本内容（非w3c规范）
textContent是w3c规范操作文本的属性
<body>
<div id="msg">
hello word
</div>
<script>
window.onload = function(){
var _msg = document.getElementById("msg");
console.info(_msg.innerHTML)
}
</script>
</body>
修改div中“hello world” 为 “你好世界”
<body>
<div id="msg">
hello word
</div>
<script>
window.onload = function(){
var _msg = document.getElementById("msg");
_msg.innerHTML="你好 世界"
console.info(_msg.innerHTML)
}
</script>
</body>
七：操作DOM对象的属性
更改标签中属性的值
1.更改div中title的值
<body>
<div id="msg" title="hello"> 操作DOM对象的属性</div>
<script type="text/javascript">
window.finish;
function finish(){
var _msg = document.getElementById("msg");
_msg.title="你好";
//或者可以使用 _msg["title"]="真好"
}
</script>
</body>
2.修改一个div的背景颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.msg, .msg2{
width: 200px;
height: 200px;
background: red;
}
.msg2{
background: blue;
}
</style>
<script type="text/javascript">
function change(){
var _box = document.getElementById("box");
if(_box.className=="msg"){
_box.className="msg2"
}
else{
_box.className="msg"
}
}
</script>
</head>
<body>
<div class="msg" id="box"></div>
<button onclick="change()">换背景</button>
</body>
</html>
八：制作抽奖案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.main{
width: 600px;
height: 600px;
border: 1px solid red;
margin: auto;
}
.box{
width: 300px;
height: 300px;
background: #FF0000;
margin: auto;
margin-top: 50px;
border-radius: 50%;
text-align: center;
}
.box2{
width: 300px;
height: 300px;
background: #98FB98;
margin: auto;
margin-top: 50px;
border-radius: 50%;
text-align: center;
}
#start{
width: 300px;
height: 50px;
background: #FFDAB9;
display: block;
margin: auto;
margin-top: 50px;
}
#show{
font-size: 30px;
color: white;
font-weight: bold;
display: block;
line-height: 300px;
}
</style>
</head>
<body>
<div class="main">
<div class="box" id="box">
<span id="show">
奖品
</span>
</div>
<button type="button" id="start" onclick="start()">开始抽奖</button>
</div>
<script type="text/javascript">
var sum=false;
var goods = ["iphone","平底锅","电饭锅","大豆油","200代金券","空调"];
var _start=document.getElementById("start")
var _show=document.getElementById("show");
var _box=document.getElementById("box");
var timer
function start(){
if (!sum)
{
sum=true;
_start.innerHTML="停止抽奖"
timer=setInterval(function(){
var index =Math.floor(Math.random()*goods.length);
var good =goods[index]
_show.innerText=good;
_box.className="box2";
},10)
}
else{
sum=false;
_start.innerHTML="开始抽奖";
clearInterval(timer);
_box.className="box";
}
}
</script>
</body>
</html>
九：操作DOM对象的样式
对某个div的样式进行修改
DOM对象.style.样式（只能获取行内样式）
getComputedStyle（DOM对象,style.样式）可以获取样式值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#main{
height: 400px;
background: #FF0000;
}
</style>
</head>
<body>
<div id="main" style="width: 500px;" onclick="change()">
</div>
</body>
<script type="text/javascript">
function change(){
var _main = document.getElementById("main");
_main.style.width=_main.offsetWidth + 10 +"px";
_main.style.height=_main.offsetHeight + 10 +"px"
}
</script>
</html>