一、BOM模型:
浏览器提供的用户与浏览器窗口之间交互的对象及操作的接口。这些对象并不是独立存在的。对象与对象之间存在着层次结构,对象模型的作用就是描述这些层次结构。
window对象:
表示整个浏览器窗口
所有的浏览器中JS顶级方法(即可以直接使用的方法)都属于window对象。
window对象方法:
alert() prompt() confirm()
setTimeout() clearTimeout() setInterval() clearInterval()
open() close()
<script type="text/javascript">
var username=prompt("请输入用户名","李四");
alert(username);
var deldata=confirm("确定删除");
alert(deldata);
</script>
<script type="text/javascript">
setTimeout(function(){
alert("延迟5秒弹出窗口");
},5000); //执行一次
setInterval(function () {
document.write("asdas");
},2000); //循环执行多次
setTimeout(function(){
window.open("http://www.baidu.com");
},2000);
</script>
history 对象:
history用来访问浏览器窗口的历史对象。
location对象:
location对象用来访问当前窗口的url地址信息。
navigator对象:
navigator对象包含浏览器信息。
二、DOM模型
DOM模型:
文档对象模型
浏览器提供的操作HTML文档内容的应用程序接口
用于对文档进行动态操作,如增加文档内容,删除文档内容,修改文档内容等等。
通过JS来动态控制网页当中的网页元素,网页当中的网页元素都可以得到对应JS对象(DOM对象),通过控制DOM对象即可控制页面中的网页元素。
**DOM对象获取:
document.getElementById();
document.getElementsByTagName();
document.getElementsByClassName();
<script type="text/javascript">
/*document.getElementById()
通过网页元素对应的html标记的id的属性值来得到DOM对象*/
var imag1 = document.getElementById("img1");
imag1.style.width="100px";
imag1.style.height="100px;"
/*
document.getElementsByTagName()
通过网页元素的标记名称得到dom对象数组
*/
var imga2 = document.getElementsByTagName("img");
imga2[0].style.border = "1px solid red";
var imgacla = document.getElementsByClassName("banner");
imgacla[0].style.marginTop="200px";
</script>
DOM对象获取方式-层级关系获取:
通过兄弟节点关系获取
node.previous(next)Sibling
通过父节点获取子节点
node.childNodes node.firstChild node.lastChild
通过子节点获取父节点
node.parentNode
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM层级关系</title>
<style type="text/css">
img{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<img src="./image/1.jpg" id="img1"/>
<img src="./image/1.jpg">
</body>
<script type="text/javascript">
var img1 = document.getElementById("img1");
console.log(img1.nextSibling); //#text
console.log(img1.nextSibling.nextSibling); //<img src="./image/1.jpg">
img1.nextSibling.nextSibling.style.border= "3px solid red";
</script>
</html>
DOM对象控制网页元素样式:
通过DOM对象上的style 属性来进行控制
DOM对象上样式写法;
CSS样式属性名:color font font-family font-weight background-color
JS样式属性名:style.color style.font style.fontFamily style.fontWeight style.backgroundColor
DOM对象控制网页元素标记的内容:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<div id="container">
</div>
</body>
<script type="text/javascript">
document.onclick = function(){
var contain = document.querySelector("#container");
contain.innerHTML = "<img src='./image/1.jpg'> "
}
</script>
</html>