JavaScript的BOM和DOM
JavaScript的BOM和DOM
一、BOM
1、 浏览器
closed 属性可返回一个布尔值，该值声明了窗口是否已经关闭
//关闭浏览器
<script>
function myClosed(){
if(window.confirm("是否关闭")){
window.close();
}
}
moveTO移动浏览器
//移动浏览器 用IE
function moveing(){
// window.moveBy(100,100);
window.moveTo(200,500);
}
open打开网页
function openSogou(){
window.open("http://www.sogou.com","_blank","fullscreen=yes,menubar=yes")
}
<body>
<button onclick="myClosed()">关闭浏览器</button>
<button onclick="moveing()">移动浏览器</button>
<button onclick="openSogou()">搜狗</button>。
<a href="history对象.html">history</a>
</body>
2、回到顶部
godown：回到页面底部
goup ：回到页面顶部
<style>
.container{
height: 1800px;
width: 100px;
}
</style>
<script type="text/javascript">
//回到底部
function godown(){
window.scrollTo(0,1800);
}
//回到顶部
function goup(){
window.scrollTo(0,0);
}
</script>
</head>
<body>
<button onclick="godown()">回到底部</button>
<div class="container">
</div>
<button onclick="goup()">回到顶部</button>
</body>
3、History对象
History 对象包含用户（在浏览器窗口中）访问过的 URL。
History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。
history.back 后退
history.forward 前进
<script type="text/javascript">
function gogogo() {
history.back();
}
function backback(){
history.forward();
}
</script>
</head>
<body>
<button onclick="gogogo()">前进</button>
<button onclick="backback()">后退</button>
<a href="index.html">首页</a>
</body>
4、Location
Location 对象包含有关当前 URL 的信息。
Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。
//刷新
function refresh(){
location.reload()
}
//每隔五秒刷新一次
// setInterval(function(){
// location.reload();
// },5000);
//返回当前的URL的主机名
console.info(location.hostname)
//返回当前 URL的端口号
console.info(location.port)
//返回当前URL的主机名和端口号
console.info(location.host)
//返回当前 URL的协议 :http
console.info(location.protocol)
//返回当前URL的路径
console.info(location.pathname)
//返回完整的URL
console.info(location.href)
//返回从问号 (?) 开始的 URL（查询部分）
console.log(location.search)
//返回从井号 (#) 开始的 URL（锚）。
console.info(location.hash)
location.href 跳转到某个页面
2秒后跳转到搜狗页面
setInterval(function(){
location.href="http://www.sogou.com"
},2000)
location.href.replace 将某个页面替换为某页面
//5秒后网站替换为index页面
// setInterval(function(){
// location.href=location.href.replace("location","index")
// },5000)
5、screen屏幕
Screen 对象包含有关客户端显示屏幕的信息。
console.info(screen.height) //屏幕高
console.log(screen.width) //屏幕宽
console.info(screen.availHeight) //返回显示屏幕的高度 (除任务栏之外)。
console.info(screen.availWidth) //返回显示屏幕的宽度 (除任务栏之外)。
二、DOM
1、获取DOM对象的几种方式
每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。
<div id="msg">这个是一个div</div>
<div class="msg">这个是一个列表</div>
<div class="msg">这个是一个列表</div>
<div class="msg">这个是一个列表</div>
<hr />
<form action="#" method="post">
<input type="text" value="00000" name="username"/>
<input type="password" value="00000" name="password"/>
<input type="submit" value="登录" />
</form>
<script type="text/javascript">
//第一种：直接使用id操作DOM对象 不推荐！！
// console.info(msg)
// msg.innerHTML="嘻嘻嘻嘻嘻嘻" //可以操作
//第二种 从页面ElementByld 获取msg标签 必须掌握
// var msg =document.getElementById("msg")
// console.info(msg)
// console.info(msg.innerHTML) //获取内容
//第三种 从ElementsByClassName获取列表标签 必须掌握
// var msg= document.getElementsByClassName("msg")
// console.info(msg)
// msg[1].innerHTML="王冬雨真他妈帅"//通过下标修改列表内容
//第四种 通过name属性获取对应的标签（name就是用来操作表单元素）
//会用
// var uname=document.getElementsByName("username")
// console.info(uname[0])
// console.info(uname[0].value) //获取的是个节点
// uname[0].value="王冬雨" //进行操作
//第五种 通过标签名称获取页面上的所有标签 重要 掌握
var divs=document.getElementsByTagName("div");
divs[3].innerHTML=`<h3>冬雨</h3>`
//反语
2、DOM对象的内容
HTML DOM 节点
在 HTML DOM （文档对象模型）中，每个部分都是节点：
① 文档本身是文档节点
② 所有 HTML 元素是元素节点
③ 所有 HTML 属性是属性节点
④ HTML 元素内的文本是文本节点
⑤ 注释是注释节点
Element 对象
在 HTML DOM 中，Element 对象表示 HTML 元素。
Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。
window.onload = function(){
var _post = document .getElementById("post")
// _post.innerHTML="<h1>内容</h1>"
//
console.info(_post.innerText)
//DOM节点 DOM对象 都是某个标签
// _post.innerText="<h1>内容</h1>" //只能获取文本
//innerText 只能操作标签及其子标签文本内容
//innerText 非w3c规范
//w3c规范操作文本的属性
// _post.textContent="<h1>内容</h1>"
element.getAttribute() ： 返回元素节点的指定属性值。
element.getElementsByTagName()： 返回拥有指定标签名的所有子元素的集合。
3、DOM对象的属性
element.className ：设置或返回元素的 class 属性。
element.innerHTML ：设置或返回元素的内容。
element.getElementsByTagName() ：返回拥有指定标签名的所有子元素的集合。
.post,.post2{
width:500px;
height: 500px;
text-align: center;
font-size: 20px;
background-color: red;
line-height: 500px;
}
.post2{
background-color:green ;
}
</style>
<script type="text/javascript">
function gaibian(){
var _msg =document.getElementById("msg");
if(_msg.className =="post2"){
_msg.className="post"
}
else{
_msg.className="post2"
}
}
window.init;
function init(){
var _msg = document.getElementById("msg")
// _msg.title="王冬雨是爸爸" 通过.方式
// _msg["title"]="王冬雨是father" 通过[]方式
console.info(_msg.title) //通过.获取title
console.info(_msg["title"]) //通过[]获取title
//通过API的getAttribute获取
console.info(_msg.getAttribute("class"))
// //通过API的setAttribute改变
_msg.setAttribute("title","爸爸")
}
</script>
4 DOM对象的样式
<style type="text/css">
#show {
height: 300px;
border: 1px solid red;
}
</style>
</head>
<div style="width: 300px;" id="show" onclick="scale()">这个是一个div</div>
<script>
function scale() {
var _show = document.getElementById("show");
// var h = getComputedStyle(_show).height;
// var w = getComputedStyle(_show).width;
// console.info(h, w)
// _show.style.height = parseInt(h) + 10 + "px";
// _show.style.width = parseInt(w) + 10 + "px";
console.log(_show.offsetHeight, _show.offsetWidth)
console.log(_show.clientHeight, _show.clientWidth)
_show.style.height = _show.offsetHeight + 10 + "px";
_show.style.width = _show.offsetWidth + 10 + "px";
}
var _show = document.getElementById("show");
// 1、第一种方式：DOM对象.style.样式 这种方式，只能获取行内样式
//获取样式的中的宽和高
// console.log(_show.style.width);
// console.log(_show.style.height);
// 2、第二种方式，w3c规定获取样式值的方式
console.log(getComputedStyle(_show).height)
console.info(getComputedStyle(_show).width)