DOM模型、BOM模型、事件

DOM

• 功能：控制html文档的内容

• 代码：获取页面标签（元素）对象 Element

  • document.getElementById(“id值”)：通过元素的id获取元素的对象

• 操作Element对象

  1. 修改属性值
     • 对象.src=””
  2. 修改标签体内容
     1. 获取文本标签对象
     2. 修改内容
        • 对象.innerHTML =”可以是数字/标签 “
        • 追加：对象.innerHTML +=”可以是数字/标签 “

  ---

• 概念：Document Object Model 文档对象模型

  • 将标记语言文档的各个组成部分，封装成对象，可以使用这些对象，对标记语言文档进行CRUD的动态操作

• W3C DOM 标准被分为3个不同的部分：

  • 核心DOM-针对任何结构化文档的标准模型
  • Document：文档对象
  • Element：元素对象
  • Attribute：属性对象
  • Text：文本对象
  • Comment：注释对象
  • Node：节点对象，其他5个的父对象
  • XML DOM-针对XML文档
  • HTML DOM-针对HTML文档

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

Document：文档对象

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

Element：元素对象

1. 获取/创建：通过document来获取和创建
2. 方法：
   1. removeAttribute(属性名)：删除属性
   2. setAttribute(属性名，属性值)：设置属性

Node：节点对象，其他5个的父对象

• 特点：所有dom对象都可以被认为是一个节点
• 方法：
  • CRUD dom树：
    • appendChild(id)：向节点的子节点列表的结尾添加新子节点
      • 注意：想要给标签内加文本内容，需要先创建一个文本节点，再将文本节点当作子节点加入
    • removeChild(id)：删除（并返回）当前节点的指定子节点
      • 注意：想要超链接不跳转，但执行javaScript语句，可以使用href=”javascript:void(0);”
    • replaceChild()：用新节点替换一个子节点
• 属性：
  • parentNode 父节点

HTML DOM

• 标签体的设置和获得：innerHTML

• 使用html元素对象的属性

• 控制元素样式

  1. 使用元素的style属性来设置(了解)

     div1.style.border = "1px"
     

  2. 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值

     <style>
     .di{
         border="1px"
     }
     </style>
     
     div1.className ="d1";
     

---

事件监听机制

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

• 事件：某些操作（单双击……）

• 事件源：组件（按钮，输入框……）

• 监听器：代码

• 注册监听：将事件，事件源，监听器结合在一起

常见的事件：

点击事件：

1. onclick：单击事件
2. ondblclick：双击事件

焦点事件：

• onblur：失去焦点

  • 一般用于表单验证

  //设置onblur事件，注意是方法名，不带括号
  document.getElementsByName("password")[0].onblur=checkPassword;
  

• onfocus：元素获得焦点

加载事件：

1. onload：一张页面或一幅图被完成加载

   • 一般用于网页加载完毕再加载js代码

   window.onload = function(){
       js代码
   }
   

鼠标事件：

• onmousedown：鼠标按钮被按下
• onmouseup：鼠标按钮被松开
• onmousemove：鼠标被移动
• onmouseover：鼠标移到某元素之中
• onmouseout：鼠标从某元素移开

键盘事件：

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

选择和改变

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

表单事件

• onsubmit：确认按钮被点击

  • 可以阻止表单提交，再from标签中调用onsubmit事件，方法返回false

    document.getElementById("form").onsubmit=function(){
    return false;
    }
    -------------
    document.getElementById("form").onsubmit = function () {
                    return checkUserName()&&checkPassword();
                }
    

  • 如果是再from标签中调用onclick事件，应该是onclick=”return checkform( return false)”

• onreset：重置按钮被点击

绑定事件

• 直接在html标签上，指定事件的属性，属性值就是js代码 如：onclick=”fun()”;
• 通过js获取元素对象，指定事件属性，设置一个函数
  1. 获取对象
  2. 绑定事件 对象.onclick=fun;

---

BOM

概念：Browser Object Model 浏览器对象模型

• 将浏览器的各个组成部分封装成对象

对象：

Window：窗口对象

1. 方法
   1. 与弹出窗口有关的方法：
      1. alert()警告框，信息，确认
      2. confirm()消息框，信息，确认，取消
         • 返回值：true、false
      3. prompt()输入框
         • 返回值：用户输入的值
   2. 与打开关闭有关的方法：
      1. open（）打开一个新窗口
      2. close()关闭浏览器窗口，注意：关闭的是当前window
   3. 与定时器有关的方式：
      1. setTimeout()一次性定时器
         • 参数：
           1. JS代码 注意：调用函数直接写名即可，不用加括号
           2. 毫秒值
         • 返回值：id
      2. clearTimeout()
         1. 参数：定时器的id
      3. setInterval()重复定时器
         • 参数：
           1. JS代码 注意：调用函数直接写名即可，不用加括号
           2. 毫秒值
         • 返回值：id
      4. clearInterval()
         1. 参数：定时器的id
2. 属性
   1. 获取其他BOM对象
      1. history
      2. location
      3. Navigator
      4. Screen
   2. 获取DOM对象
      • document
3. 特点：
   1. window对象不需要创建，直接可以window.fun()，也可以省略直接fun（）；

Navigator：浏览器对象（了解）

Screen：显示器屏幕对象（了解）

History：历史记录对象

Location：地址栏对象

1. 创建（获取）

   1. window.location
   2. location

2. 方法

   1. reload()重新加载当前文档，刷新

3. 属性

   1. href 设置或返回完整的url

   location.href="http://www.baidu.com"