JS-BOM
BOM 就是浏览器的对象模型,浏览器可以通过调用系统对话框,
向用户显示信息。
系统提供了三个函数,可以完成系统对话框的操作
分别是:
window.alert();
window.confirm();
window.prompt();
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.alert("hello");
var res = window.confirm("请选择 yes or no");
window.alert(res);
window.prompt("please","aaa");
</script>
</head>
<body>
</body>
</html>
JS-DOM
DOM是文档对象模型:开始到结束
HTML+CS->页面内容
JS->页面行为操作
注:DOM是打通HTML与CS和JS壁垒的工具
window.onload()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var res = document.getElementById("div1");
alert(res);
</script>
</head>
<body>
<div id="div1">
hello world
</div>
</body>
</html>
这样做时无法通过ID获取到div1的,获得的是null,因为代码是由上向下执行的,执行到这个位置无法获得div1,通过window.onload 可以在执行完body后再获取;
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
var res = document.getElementById("div1");
alert(res);
}
</script>
</head>
<body>
<div id="div1">
hello world
</div>
</body>
</html>
getElementById 这是通过ID方式获取元素,也可以通过其他ul li无序列表获取
快速生成ul li 无序列表方式:
ul>li*4 + tab可以生成4个
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
同理ol>li*4 + tab也可以生成有序列表如下:
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
也可以通过document.getElementsByTagName()可以通过目标名字获取多个元素
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
var Lis = document.getElementsByTagName("li");
alert(Lis.length);
var ul1 = document.getElementById("ul1");
// 可以通过定义的ID获取到ul
var uLis = ul1.getElementsByTagName("li");
alert(uLis.length);
for(var i=0;i<uLis.length;i++){
alert(uLis[i].innerHTML);
// 弹出取到的内容
}
}
</script>
</head>
<body>
<ul id="ul1">
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
<ol>
<li>5555</li>
<li>6666</li>
<li>7777</li>
<li>8888</li>
</ol>
</body>
</html>