DOM 文档对象模型

Document Object Model

• 将标记语言文档的各个组成部分，封装成对象。可以使用这些对象，对标记语言文档进行CRUD动态操作
• DOM将HTML文档表达为树结构 进入内存后会将html文档转换为dom树

分类

W3C DOM 标准：

• 核心 DOM - 针对任何结构化文档的标准模型
• XML DOM - 针对XML文档DOM
• HTML DOM - 针对HTML文档DOM

对象

核心DOM对象

Document：文档对象

1. 创建/获取
   1. window.document（在html dom模型中可以使用window对象来获取）
   2. document
2. 方法
   1. 获取Element对象：
      1. getElementById()：根据id属性值获取元素对象，id属性值一般唯一
      2. getElementsByTagName(): 根据元素的名称获取元素的对象们 返回一个数组
      3. getElementsByClassName()：根据Class属性值获取元素对象们，返回一个数组
      4. getElementsByName(): 根据name属性值获取元素对象们，返回一个数组
   2. 创建其他DOM对象：

      1. createAttrbute(name)

      2. createComment()

      3. createElement():

      4. ctreateTextNode()

3. 属性

Element 元素对象

页面中的标签(元素)都封装为对象，称为Element

1. 获取/创建
   通过document对象获取和创建

document.getElementById("id值");

• 操作Element对象
  1. 修改对象属性值
  2. 修改标签体内容
     • 属性 innerHtml

2. 方法属性
   1. removeAttribute()：删除属性

document.getElementsByTagName("H1")[0].removeAttribute("style");

2. setAttribute()：设置属性

document.getElementsByTagName("INPUT")[0].setAttribute("type","button");

3. value 获取Element标签的value值

Node：节点对象

所有的dom对象都可以被认为是一个节点Node

1. 方法

• CRUD dom树

  • appendChild() 向节点的子节点列表的结尾添加新的子节点

  • removeChild() 删除（并返回）当前节点的指定子节点。

  • replaceChild() 用新节点替换一个子节点

2. 属性

• parentNode 返回节点的父节点

• Attribute 属性对象
• Text：文本对象
• Comment：注释对象

HTML DOM

1. HTML标签体的设置和获取：innerHtml

   1. 获取

   <div id="div1">
     div
   </div>
   <script>
     var divTag = document.getElementById("div1");
     var innerHTML = divTag.innerHTML;
     alert(innerHTML);
   
     </script>
   

   2.添加/替换

     //将div标签替换为文本输入框
     divTag.innerHTML = "<input type='text'>";
   

2. 使用HTML元素对象的属性

3. 通过HTML DOM 控制元素样式
   1.使用元素的style属性来设置

   var div1 = document.getElementById("div1");
     div1.onclick = function () {
     div1.style.border = "1px red solid";
     //样式2
     div1.style.width = "200px";
   }
   

   2.提前定义好类选择器的模式，通过元素的className属性来对应style

     <style>
     .d1 {
         border: 1px solid red;
     }
   
     .d2 {
         border: 2px solid blue;
     }
   </style>
   var div2 = document.getElementById("div2");
     div2.onclick = function(){
     div2.className = "d2";
   }
   

事件

概念

某些组件被执行了某些操作后，触发某些代码的执行

• 事件：某些操作，如：单击 双击 键盘按下 鼠标移动等
• 事件源：组件 按钮 输入框等
• 监听器：代码
• 注册监听：将事件、事件源、监听器结合在一起、当事件源上发生了某个事件，则触发执行某个监听器代码

常见的事件

点击事件

• onClick 点击事件
• ondblclick 双击事件

焦点事件

• onBlur:失去焦点
• onFocus:获得焦点

加载事件

• onload:一张页面或者一幅图片完成加载

鼠标事件

• onMousedown:鼠标被按下
• onmouseup:鼠标按键被松开
• onmousemove:鼠标被移动
• onmouseout:鼠标从某元素移开
• onmouseover 鼠标移到某元素之上。

键盘事件

• onkeydown 某个键盘按键被按下
• onkeyup:某个键盘按键被松开
• onkeypress:某个键盘按键按下并松开

选择和改变

• onchange:域的内容被改变
• onselect 文本被选中

表单事件

• onsubmit:确认按钮被点击
  * onSubmit返回false 会阻止表单提交

• onreset:重置按钮被点击

绑定事件

1. 直接在html标签上，指定事件的属性，属性值为js代码

<img id="light" src="img/off.gif" onclick="alert("onClick");">

2. 通过定义函数绑定

<script>
var light = document.getElementById("light")
light.onClick = function(){
  alert("onClick");
}
</script>
<img id="light" src="img/off.gif" onclick="alert("onClick");">

BOM 对象

概念 Browser Object Model

将浏览器的各个部分封装为对象

分类

• 浏览器对象
• 窗口对象 window

1. 创建
2. 方法
   1. 与弹出框有关的方法
      1. alert() 显示带有一段消息和一个确认按钮的警告框
      2. confirm() 确认取消对话框，显示带有一段消息以及确认按钮和取消按钮的对话框
      • 如果用户点击确定，则方法返回true
      • 如果用户点击取消，则方法返回false
      3. prompt(): 显示可提示用户输入的对话框
      • 返回值是用户输入的值
   2. 与关闭有关的方法
      • close() 关闭浏览器窗口
        • 关闭当前调用的window窗口
      • open() 打开新窗口 可以传参指定打开的新窗口的地址
        • 返回新的窗口对象 window
   3. 与定时器有关的方法
      • setTimeOut() 在指定的毫秒数后调用函数或计算表达式,返回计时器的编号
      • clearTimeout() 取消由setTimeOut方法设置的timeOut
      • setInterval() 按照指定的周期来调用函数或计算表达式
      • clearInterval() 取消由setInterval设置的timeout

3. 属性
   1. 获取其他BOM对象 history location navigator screen
   2. 获取DOM对象 document
4. 特点
   • window对象不需要创建可以直接使用 window使用 window.方法名()
   • window引用可以省略 方法名()

• location 对象 地址栏对象 location对象包含当前url的对象

1. 创建

   1. window.location
   2. location

2. 方法

   • reload() 重新加载当前文档

3. 属性

   • href 设置或返回完整的url

• History 历史记录对象

  1. 创建(获取)：

     1. window.history
     2. history

  2. 方法

     • back() 加载history列表中前一个url
     • forward() 加载history列表中的下一个URL
     • go() 加载history列表中的某个具体页面
       * 正数 前进几个历史记录
       * 负数 后退几个历史记录

  3. 属性

     • length 返回当前窗口历史列表中的URL数量