BOM(（Brower objrct model）浏览器对象模型),可以对浏览器窗口进行访问和操作
使用BOM，开发者可以移动窗口，改变状态栏中的文本以及执行其他与页面不直接
相关的动作，使javascript有能力与浏览器对话
windows 对象：
1.所有浏览器都支持window对象
2.概念上讲,一个html文档对应一个window对象
3.功能上：控制浏览器窗口的
4.使用上讲：window对象不需要创建对象，直接使用即可
windows对象下面的方法：
alert 显示带有一段消息和一个确认按钮的警告框 window.alert("hello world")
confirm 显示带有一段消息及确认按钮和取消按钮的对话框
// var ret=window.confirm("hello alex")//返回true和false
// console.log(ret);
prompt 显示可提示用户输入的对话框
// var text=prompt("hello")//返回文档内容
// console.log(text)
open打开网址 colse关闭窗口
//open("http://www.baidu.com");
setInterval()按照指示的周期(以毫秒计)来调用函数或计算表达
clearInterval()取消由setInterval()设置的timeout
setTimeout() 在指定的毫秒数后调用函数或计算表达式
clearTimeout() 取消由setTimeout() 方法设置的timeout
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#id1{
200px;
height: 50px;
}
</style>
<meta charset="utf-8">
</head>
<body>
<input type="text" name="time" id="id1" onclick="begin()">
<button onclick="end()">停止</button>
<!-- <div onclick="f()">click</div> -->
<script>
// Date()日期事件对象 new Date
var clock1
function begin(){
if(clock1==undefined){
showTime();
clock1=setInterval(showTime,1000)
}
}
function showTime(){
var cureent_time=new Date().toLocaleString();
var ele=document.getElementById("id1")
ele.value=cureent_time;
}
function end(){
clearInterval(clock1);
clock1=undefined
}
//setTimeout()
//
function f(){
console.log("123")
}
var c=setTimeout(f,1000)
clearTimeout(c)
</script>
</body>
</html>
Histroy对象
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button onclick="f()">刷新</button>
<a href="js_object.html">click</a>
<button onclick="history.forward()">>>></button>
<script type="text/javascript">
//History 对象
//History 对象包含用户(在浏览器窗口中)访问过的url
//History对象时windows对象的一部分，可通过windows.history属性·对其进行访问
//history.back() 加载history列表中的前一个URL
//forward() 加载history列表中的下一个URL
//go() 加载history列表中的某个具体页面
//Location对象
//Location对象包含有关当前url的信息
//Location对象是window对象的一个部分，可以通过window.location属性来访问
//
//
//location.assign("http://www.baidu.com")
function f(){
// location.reload()
location.replace("http://www.baidu.com")
}
</script>
</body>
</html>
JS操作DOM对象；
DOM是W3C的标准，DOM定义了访问HTML和XMl文档的标准
//"W3C"文档对象模型(DOM)是中立于平台和语言的接口，它允许程序和脚本动态的访问和更新文档内容，结构和样式
//什么是HTML DOM--->html DOM定义了所有html元素的对象和属性，以及访问他们的方法
//根据W3C的html DOM标准，html文档中的所有内容都是节点(NODE):
//整个文档是一个文档节点(docunment对象)
//每个html元素是元素节点(element对象)
//html元素内的文本是文本节点(text对象)
//每个HTML属性是属性节点（attribute对象）
//注释是注释节点(comment对象)
//Node对象--自身属性
//getElementsByClassName返回一个Class(类名)属性数组
var ele=document.getElementsByClassName('p1')[0];//拿到元素对象
// console.log(ele.nodeType);///节点属性
// console.log(ele.nodeValue);注意这里获取文本节点的方式
// console.log(ele.nodeName);
// console.log(ele.innerHTML);
// ele.innerHTML="hello world";
//导航属性
var p_ele=ele.parentNode;//查找父级节点
console.log(p_ele.nodeName);
// var b_ele=ele.nextSibling;//查找兄弟节点
var b_ele=ele.nextElementSibling;
console.log(b_ele.nodeName);
console.log(b_ele.innerHTML);
var ele3=document.getElementsByClassName('div1')[0];
console.log(ele3.children[1].children[0].children);
//children 所有子标签 数组
//parentElement父级元素
//firstElementchild 第一个子标签元素 注意这里获取文本节点的方式
//lastElementchild 最后一个子标签元素
//nextElementtSibling 下一个兄弟标签元素
//previousElementSibling 上一个兄弟标签元素
JS选中元素的四中方法
var obj=Document.getElementById("id名字")
var obj1=Document.getElementByClassName("class名字")
var obj2=Document.getElementByTagName("标签名字")
JSDOM事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="serach" value="请输入用户名" onfocus="f()" onblur="full()">
<script>
//onclick 当用户点击某个对象时调用的事件句柄
//ondbloclick 当用户双击某个对象时调用的事件句柄
//onfocus 元素获得焦点
//onblur 元素失去焦点 表单验证，用户离开输入框时，代表已经输入完成了
//onchange 域的内容被改变 应用场景：通常用于表单元素，当元素内容被改变时触发（三级联动）
var ele =document.getElementById("serach");
function f(){
if (ele.value=="请输入用户名")
{
ele.value="";
};
};
function full(){
if (!ele.value.trim()){
ele.value="请输入用户名";
};
};
</script>
</body>
</html>