BOM即浏览器对象模型(brower object model)
DOM即文档对象模型(document object model)
一: BOM
BOM包含windows(窗口)、navigator(浏览器)、screen(浏览器屏幕)、history(访问历史)、location(地址)等
1. windows:页面一旦加载,就会创建windows对象,无需自行创建。通过该对象可以获取文本框的宽高(windows.innerWidth)、浏览器窗口宽高(windows.outerWidth)、打开关闭新窗口(windows.open("/")、windows.close())等属性
2. Navigator:提供浏览器相关信息,包括浏览器名称、版本号、操作系统等等。
3. screen:提供用户屏幕相关信息。如高宽等(screen.width)。
4. history:记录访问历史。返回上次访问地址:history.back。返回上上次history.back(2),以此类推。
5. location:浏览器中的地址栏,可以完成刷新当前页面与放回首页、显示端口号、服务器等信息。
6. alert弹出框、confirm确认框、prompt输入框:
此时d=trur(是)、false(否)
name=输入的值
7. 计时器:
<script>
function printTime(){
var d = new Date();
var h= d.getHours();
var m= d.getMinutes();
var s= d.getSeconds();
document.getElementById("time").innerHTML= h+":"+m+":"+s;
}
function showTimeIn3Seconds(){
setTimeout(printTime,3000);
}
</script>
<div id="time"></div>
<button onclick="showTimeIn3Seconds()">点击后3秒钟后显示当前时间,并且只显示一次</button>
二:DOM:
DOM就是把html里的各种数据当做对象处理的一种思路。
1. 通过document.getElementById获取了id=d1的div标签对应的元素节点
然后通过attributes 获取了该节点对应的属性节点
接着通过childNodes获取了内容节点
2. 获取节点:
divs=getElementsByTagName("div")会获取所有div元素,放在一个数组中,通过循环或者divs[]获取顺序元素。
getElementsByClassName("d")会获取所有class为d的元素,放在数组中。
getElementsByName("userName")会获取所有name为username的元素,放在数组中。
如果通过以上方式获取不到,原因是因为js是按照顺序加载执行的,如果js在上,需要获取的html元素在下,则不会获取到该元素,为null值。
3. 获取节点的属性:
div1 = document.getElementById("d1");name=div1.nodeValue为空,因为文档跟元素节点是没有值的,但是元素的属性节点是可以取到值的,如:div1.attributes[0].nodeValue就等于d1,div1.childNodes[0].nodeValue就等于div中的值"你好"。
可以通过.innerHTML来获取和改变元素中的值,div1.innerHTML="我也好"。获取:name = div1.innerHTML。name的值就是你好。
4. DOM的事件:
---以上内容来自how2j.cn/的自学笔记。