BOM浏览器对象模型
Brower object Model
由地址栏
状态栏
色彩深度
宽高
一系列的东西来组成了浏览器，浏览器就是由这一个一个小的部份来组成的。
在机算机里面，这当中一个一个小的部份我们把它叫做对象，于是乎组成了，浏览器对象模型。
DOM 文档对象模型
DOM是BOM的一个子部份。也就是说BOM包含 DOM
由于网页文件当中的一个一个标签，来组成了我们看到的真实网页效果。
<html>
<head>
</head>
<body>
<div></div>
<div></div>
</body>
</htmL>
DOM是其中最重要的一个部份。因为其中的很多效果，都是在页面展示中表出出来的。
DOM里面才有元素，
元素就是一个一个的标签。
在未来，我们将元素转为对象后【你可以把元素找到，到JS里面当成对象来看待】，我们也可以按照元素的顺序来在JS里面找到上一个元素，下一个元素，同辈元素，子元素等等。
对象的话就有两个东西：成员属性和成员方法。
innerText在火狐下不兼容但在IE兼容。
我们通常用innerHTML来解决火狐下innerText不兼容的问题。
但是innerHTML和innerText有不同，代码在解析的时候不一样。innerText不会解析html标签，而innerHTML会把标签解析出来。
注意：js严格区分大小写。
DOM程序或者BOM程序的核心为：
1，在哪个事情源上面发生了什么事件执行什么事件处理程序。
找到对象，改变属性。
<div onclick="show(this)">test</div> 在当前元素的事件下面，调用程序的时候，传进了this，这个this就指代当前的整个元素。放到JS里面就把当前的元素转为了对象。
常用属性：
innerHTML
innerText
target
href
confirm() 弹出一个对话确有两个选择，一个是确定，一个是取消，取消就返回false 确定就返回true
1.html
<html>
<form action="abc.php" method="post" name="fr">
<input type="text" name="username">
<input type="button" value="提交" onclick="show()">
</form>
<script>
function show(){
alert(fr.username.value);
}
</script>
</html>
a.html
<html>
<button onclick="show()" onmouseover="b()">测试</button>
<script>
function show(){
alert('aaaaaaaaaaa');
}
function b(){
alert('bbbbbbbbbbbbbbbb');
}
</script>
</html>
alert.html
<script>
alert('aaaa');
</script>
b.html
<html>
<head>
</head>
<body>
<div onclick="show(this)">test</div>
<script>
//对象，改变它的属性
function show(obj){
obj.innerHTML='php-JS的思路';
}
</script>
</body>
</html>
close.html
<html>
<body>
<div onclick="window.close();">关闭</div>
<script>
function abc(){
close();
}
</script>
</body>
</html>
contextmenu.html
<html>
<head>
</head>
<body oncontextmenu="return show()">
<script>
function show(){
alert('请不要查看源代码');
return false;
}
</script>
</body>
</html>
delete.html
<a href="http://www.xlxz.org" onclick="return confirm('是否删除这条新闻?')">删除</a>on.html
<div onclick="this.innerHTML='aaaa';this.style.background='pink'">bbb</div>
onload.html
<html>
<head>
</head>
<body onload="alert('欢迎光临')" onunload="alert('欢迎下次再来')">
</body>
</html>
onselectstart.html
<html>
<head>
</head>
<body onselectstart="return show()">
<script>
function show(){
return false;
}
</script>
</body>
</html>
qh.html
<html>
<style>
.one,.two{background:pink;width:100px;height:50px;border:1px solid #ccc;float:left}
.ys{width:100px;height:50px;border:1px solid #ccc;float:left;background:#ccc}
.tt{width:100px;height:50px;border:1px solid #ccc;float:left;background:red}
</style>
<script>
function show(obj){
obj.className='tt';
}
function t(obj){
obj.className='ys';
}
//在哪个事件源上面，产生了什么事件，调用哪一个事件处理程序。
//事件：onmouseover onmouseout
//整个元素就是事件源：
//<div class="one" onmouseover="show(this)" onmouseout="t(this)">军事</div>
//<div class="two" onmouseover="show(this)" onmouseout="t(this)">科技</div>
//事件处理程序：
// show() t();
</script>
<div class="one" onmouseover="show(this)" onmouseout="t(this)">军事</div>
<div class="two" onmouseover="show(this)" onmouseout="t(this)">科技</div>
</html>
sq.html
<html>
<head>
</head>
<body>
<input type="text" name="username" onfocus="t()">
<input type="text" name="a" >
<script>
function show(){
alert('ok php');
}
function t(){
alert('this is php.xlxz.org ....');
}
</script>
</body>
</html>
st.html
<html>
<head>
</head>
<body>
<button onclick="show()">请猛点</button>
<a href="http://www.xlxz.org" id="one">心灵</a>
<script>
function show(){
var d=document.getElementById('one');
d.innerHTML='php.xlxz.org is no.1';
d.href='http://php.xlxz.org';
d.target='_blank';
}
</script>
</body>
</html>
shree.html
<html>
<head>
</head>
<body>
<script for="st" event="onclick">
this.innerHTML='ok php';
</script>
<div id="st">php.xlxz.org</div>
</body>
</html>
two.html
<html>
<div id="h">php,寂寞不自信</div>
<script>
var s=document.getElementById('h');
s.onclick=function(){
this.innerHTML='php.xlxz.org。';
}
</script>
</html>
weibo.html
<html>
<head>
</head>
<body>
<button onclick="show()">点一下</button>
<div id="one">php</div>
<script>
function show(){
var dada=document.getElementById('one');
dada.innerHTML='<font color="red">php寂寞</font>';
}
</script>
</body>
</html>
yd.html
<html>
<body>
<div onclick="show()">移动</div>
<script>
function show(){
//moveBy(100,100);
moveTo(500,500);
}
</script>
</body>
</html>
zobject.html
<html>
<head>
</head>
<body>
<div id="r" style="background:pink;width:300px;height:300px" onclick="show(this)"></div>
<script>
function show(obj){
obj.style.background='red';
}
</script>
</body>
</html>