BOM与DOM解释与分析

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：浏览器中的地址栏，可以完成刷新当前页面与放回首页、显示端口号、服务器等信息。

扫描二维码关注公众号，回复： 4291089 查看本文章

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/的自学笔记。

BOM与DOM解释与分析

猜你喜欢