JS的DOM和BOM

* JavaScript分三个部分:

1. ECMAScript标准:JS的基本的语法
2. DOM:Document Object Model --->文档对象模型----操作页面的元素
3. BOM:Browser Object Model----->浏览器对象模型---操作的是浏览器

一、DOM对象

文档:把一个html文件看成是一个文档,由于万物皆对象,所以把这个文档看成是一个对象

1.1 什么是HTML  DOM

1.     HTML  Document Object Model（文档对象模型）
2.     HTML DOM 定义了访问和操作HTML文档的标准方法
3.     HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树)

1.2 DOM树

画dom树是为了展示文档中各个对象之间的关系，用于对象的导航。

1. html文件看成是一个文档,那么这个文档看成是一个对象,文档中的所有的标签都可以看成是一个对象
2. 页面中的每个标签,都是一个元素(element),每个元素都可以看成是一个对象
3. 标签可以嵌套,标签中有标签,元素中有元素
4. html页面中都有一个根标签--html--也叫根元素
5. 页面中的有一个根元素(标签--html),里面有很多的元素(有很多的标签,有很多的对象)
6. 文档:一个页面就是一个文档
7. 元素(element):页面中的所有的标签都是元素,元素可以看成是对象
8. 节点(node):页面中所有的内容都是节点:标签,属性,文本
9. root:根

1.3 事件概念

1. 点击操作:------>事件:就是一件事,有触发和响应,事件源
2. 按钮被点击,弹出对话框
3. 按钮---->事件源
4. 点击---->事件名字
5. 被点了--->触发了
6. 弹框了--->响应

 1.4 初次体验

第一个版本

html代码,点击按钮弹出对话框,对话框:alert()====>js的代码

html代码中嵌入了js的代码,不方便后期的修改和维护

<input type="button" value="显示效果" onclick="alert(‘我被点了‘)" />

第二个版本

js代码很多,但是没有分离html和js该怎么做

<script> ?function f1() { ???//函数中可以写很多的代码 ???alert("这是一个对话框"); ?}</script><input type="button" value="显示效果" onclick="f1()"/>

第三个版本

开始分离html和js

<input type="button" value="开始分离代码" id="btn" /><script> ?function f2() { ???alert("开发分离html和js代码"); ?} ?function f2() { ???alert("嘎嘎"); ?} ?//html标签中的id属性中存储的值是唯一的, ?//id属性就像人的身份证号码一样,不能重复,页面中的唯一的标识 ?//从文档中找到id值为btn的这个标签(元素) ?//document.getElementById("id属性的值");======>返回的是一个元素对象 ?//根据id获取这个标签(元素) ?var btnObj=document.getElementById("btn"); ?//为按钮注册点击事件 ?btnObj.onclick=f2;//不加括号</script>

最终的版本代码

<input type="button" value="最终版" id="btn1"/><script>// ?//根据id属性的值从整个文档中获取这个元素(标签) ?var btnObj1=document.getElementById("btn1"); ?//为该元素注册点击事件 ?btnObj1.onclick=function () { ???alert("哦,这真是太好了"); ?};//根据id属性的值从整个文档中获取这个元素(标签)//为该元素注册点击事件document.getElementById("btn1").onclick=function () { ?alert("哦,这真是太好了");};</script>

JS的DOM和BOM

原文地址：https://www.cnblogs.com/dongye95/p/9185895.html