2021-03-19

宿主对象：由浏览器为我们提供的对象

• DOM对象
• BOM对象

一、DOM

1. 全称：Document Object Model 文档对象模型
2. 作用：Js中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。

• 文档：表示的就是整个的HTML网页对象
• 对象：表示的是将网页中的每一个部分都转换为了一个对象
• 模型：使用模型来表示对象之间的关系，这样方便我们获取对象

• 节点
  
  
  

• 浏览器已经为我们提供了文档节点对象，这个对象是window属性，可以在页面中直接使用，文档节点代表的是整个网页。

二、事件

-可以使用以下方式来决定按钮或者其他的事件的功能

三、文档的加载

• 浏览器加载页面的顺序是自上而下的，读取到一行就运行一行，如果script标签写到页面上面，在代码执行时，页面还没有加载。将js代码写道页面下面，可以在页面加载完毕以后再执行js代码。
• onload 再一张页面或一幅图像完成加载后出发

四、DOM查询

• childNodes属性会获取包括文本节点在内的所有节点

• 根据DOMbiao@[TOC]
  宿主对象：由浏览器为我们提供的对象- DOM对象- BOM对象# 一、DOM1. 全称：Document Object Model 文档对象模型2. 作用：Js中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。- 文档：表示的就是整个的HTML网页对象- 对象：表示的是将网页中的每一个部分都转换为了一个对象- 模型：使用模型来表示对象之间的关系，这样方便我们获取对象- 节点- 浏览器已经为我们提供了文档节点对象，这个对象是window属性，可以在页面中直接使用，文档节点代表的是整个网页。# 二、事件-可以使用以下方式来决定按钮或者其他的事件的功能# 三、文档的加载- 浏览器加载页面的顺序是自上而下的，读取到一行就运行一行，如果script标签写到页面上面，在代码执行时，页面还没有加载。将js代码写道页面下面，可以在页面加载完毕以后再执行js代码。- onload 再一张页面或一幅图像完成加载后出发# 四、DOM查询

• childNodes属性会获取包括文本节点在内的所有节点

• 根据DOM标签标签空白也会当成文本节点

• 注意：在IE8及以下的浏览器中，不会将空白文本当成子节点，而其他浏览器将空白也会当成文本节点

• 补充：函数也是对象，也可以作为参数传递。

五、DOM查询

六、DOM增删改

• appendChild及以下基本上是父节点调用。（可以这么理解：没有父节点，就没有相对的子节点）
  
  
  

（1）删除

• 两种取消默认a标签的跳转行为
  

• 这两种方式，都可以获取tr中的td中的内容

（2）增加

• 下面是比较麻烦的一种方式，一系列的代码都是为了拼串，但是有助于理解
  
  

• 结果如下，超链接没有改变颜色，因为a中没有href属性
  
  

• 下面就是简单的方法了
  

• 另一种方法，但是不建议使用。因为innerHTML标签使用时，会把其中的所有内容进行替换。所以，其中，之前的元素绑定的触发函数会被清空。

• 注意：innerHTML的是使用

a的索引问题

（3）操作内联样式——使用DOM操作CSS

• style只能读取内联样式，但有时会需要读取样式表中的样式，或者是当前的样式。

（4）读取元素的样式

• 使用style只能读取内联样式，如下
  
  

• currentStyle显示的是当前的样式，谁生效就显示谁
  
  
  
  
  

（5）浏览器兼容性问题

• 判断浏览器，如果有某方法，就会支持
• 如下所示（所示为错误的）
  
• 如下所示（所示为正确的）
• 解析为什么 正确：因为在函数作用域中getComputedStyle么有找到，所以就回去全局中寻找，而全局中也没有找到，就会报错。一但报错，函数就不会向下执行了。而加了一个window，就会变成对象的属性。区别就是：变量没有找到会报错，而属性没有找到返回的是undefined

（6）其它样式相关属性

（7）例子——事件对象

（8）练习——div跟随鼠标移动