JavaWeb——BOM 和 DOM 对象

---

BOM 对象

一、BOM对象简述

• Browser Object Model：浏览器对象模型；
• 用来执行浏览器的相关操作；
• BOM 对象，即 window 对象；
• 注意：window 对象是 JavaScript 的内置对象，使用 window 对象调用方法时可以省略 window 不写；

二、消息框

• alert("hello world");，用来弹出警告框；
  
• confirm("确定 or 取消");，确认框；
  有返回值，确定返回true，取消返回false；
  

三、循环定时器

• 调用一次就会创建并循环执行一个定时器；

sentInterval(调用方法, 毫秒值);
//毫秒值：循环周期

• 取消循环定时器：

clearInterval(循环定时器的ID);
注：返回值即为循环定时器的ID；

• 例：两秒后执行一次 run1() 方法
  

四、一次性定时器

• 调用一次就会创建并执行一个定时器一次；

setTimeout(调用方法, 毫秒值);

• 取消一次性定时器：

clearTimeout(ID);

五、Location 对象

• Location 对象 包含浏览器的 URL 信息；
• 获取当前地址：
  
• 设置 herf 属性：
  浏览器会跳转到对应的路径；
  

---

DOM 对象

一、DOM 简述

• Document Object Model：文档对象模型；（文档：标记型文档，即HTML等）；
• DOM 是将标记型文档中所有内容（标签、文本、属性）都封装成对象；
• 通过操作对象的属性或方法，来达到操作或者改变HTML展示效果的目的；

二、DOM 树介绍

• 一个 HTML 文档加载到 浏览器内存中，会被加载为一个 DOM 对象；
  HTML 文档：
  
  DOM 树：
  
• DOM 树的特点：
  每个 DOM 树必有一个根节点；
  每个节点都是节点对象；
  常见的节点关系：父子节点关系；
  文本节点对象没有子节点；（即它是叶子节点）；
  每个节点都有一个父节点，零到多个子节点；
  只有根节点没有父节点；

三、获取元素节点对象

1. 获取元素对象的四种方式：

• getElementById(); 通过元素 ID 获取对应元素对象；
  可以通过 ID 获取元素对象，找不到返回 null；
• getElementsByName(); 通过元素的 name 属性获取符合要求的所有元素；
  可以通过 name 属性，获取到元素节点对象数组，找不到返回 空数组；
• getElementsByTagName(); 通过元素的元素名属性（标签名）获取符合要求的所有元素；
• getElementsByClassName(); 通过元素的 class 属性获取符合要求的所有元素；

注：以上都是 DOM 对象的相关方法，即 document；
注意：获取某个/某些元素节点对象，必须保证元素节点对象被先加载到内存中；

2. 代码示例

四、元素对象常见属性

1. value

• 元素对象.value = 属性值; 设置元素对象的 value 属性值；

2. className

• 元素对象.className = 属性值; 设置元素对象的 class 属性值；

3. checked

• 元素对象.checked = 属性值; 设置元素对象的 checked 属性值；
  注意：HTML 中 checked=“checked”，JavaScript 中返回 true, false；
  可以修改 单选框/复选框 的选中与否；
  

4. innerHTML

• 元素对象.innerHTML = 值; 设置元素对象内容体；