BOM编程与DOM编程
1.BOM编程
BOM(browser object model)主要分为六大类,window(窗口)、history(浏览历史)、screen(分辨率)、location(地址栏)、document(页面可见部分)、navigator(封装浏览器内容信息)。
(1) close()
<script>
function myClosed(){
if (window.confirm("你确定要关闭该页面吗?")){
window.close();
}
</script>
(2) open()
function openGame(){
window.open("http://www.4399.com","_blank","fullscreen=yes,menubar=yes")
}
(3)alert()
alert("你好世界!")
(4)confirm()
window.confirm("你确定要关闭该页面吗?")
(5)moveBy和moveTo
function moving(){
window.moveBy(80,80);
// window.moveTo(200,200);
}
兼容IE低版本
(5)location
<script>
console.info(screen.height)
console.log(screen.width)//电脑分辨率
console.info(screen.availHeight)
console.info(screen.availWidth) //不带任务栏
// navigator 封装的是浏览器的内核信息
//userAgent用户代理对象
console.info(navigator.userAgent)
</script>
(6)history
<script>
function goBack(){
//后退一步
// history.back();
history.go(-1);
}
function goforward(){
//前进一步
// history.forward();
history.go(1);
}
</script>
2.DOM
(1)获取DOM对象的方式
通过id获取
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function getValue()
{
var x=document.getElementById("myHeader")
alert(x.innerHTML)
}
</script>
</head>
<body>
<button type="button" id="myHeader" onclick="getValue()">点我一下</button>
</body>
</html>
通过标签名称来获取页面上的所有该标签
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function getElements()
{
var x=document.getElementsByName("myInput");
alert(x.length);
}
</script>
</head>
<body>
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" onclick="getElements()"
value="how many?" />
</body>
</html>
操作DOM对象的内容
innerText:仅操作标签及其子标签文本内容
textContent:w3c规范的操作文本的属性
innerHTML:返回元素的HTML结构
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/**
* window.onload事件,表示页面加载完成后触发
*/
window.onload = function() {
var _show = document.getElementById("show");
_show.innerHTML = "<h1>这个是内容</h1>"
console.info(_show.innerText)
// innerText仅仅操作标签及其子标签文本内容
// innerText 非w3c规范
// _show.innerText = "<h1>这个是内容</h1>";
// w3c规范操作文本的属性
// _show.textContent = "<h1>这个是内容</h1>";
}
</script>
</head>
<body>
<div id="show">
<p>这个是p标签</p>
这个是div
</div>
</body>
</html>
操作DOM对象的属性
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.show,.show2{
width: 200px;
height: 200px;
text-align: center;
font-size:18px;
line-height: 200px;
background: palegreen;
color: whhite;
}
.show2{
background: peachpuff;
}
</style>
<script type="text/javascript">
window.onload = init;
function init(){
var _msg = document.getElementById("msg");
_msg.setAttribute("title","这个是title新值!!!")
}
function change(){
var _msg = document.getElementById("msg");
if (_msg.className == "show2"){
_msg.className = "show"
}else{
_msg.className = "show2"
}
}
</script>
</head>
<body>
<div id="msg" title="这个是标题" class="show">这个是一个div</div>
<button onclick="change()">点击换掉背景颜色</button>
</body>
</html>
操作DOM对象的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#show {
height: 300px;
border: 1px solid red;
}
</style>
</head>
<body>
<div style="width: 300px;" id="show" onclick="scale()">这个是一个div</div>
<script>
function scale() {
var _show = document.getElementById("show");
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");
console.log(getComputedStyle(_show).height)
console.info(getComputedStyle(_show).width)
</script>
</body>
</html>