黑马程序员技术交流社区

标题: [石家庄校区]JavaScript(2)BOM,DOM [打印本页]

---

作者: 湿漉漉的文字控    时间: 2018-12-17 15:03
标题: [石家庄校区]JavaScript(2)BOM,DOM

JavaScript(2)

• BOM(浏览器对象模型)
•         概念
•                 Browser Object Model 浏览器对象模型
•                 将浏览器的各个组成部封装成对象
•         window 窗口对象 (顶级对象)
•                 创建
•                 方法
•                         弹框
•                                 *alert(); 确认对话框
•                                 **confirm(); 确认取消对话框
•                                         确定按钮 返回true
•                                         取消按钮 返回false
•                                 prompt(); 提示用户输入框
•                         定时器
•                                 只执行一次
•                                 setTimeOut();
•                                         参数
•                                                 1. js代码或者方法对象
•                                                 2. 毫秒值
•                                         返回值 : 唯一标识,用于关闭定时器
•                                 clearTimeOut();
•                                 循环执行
•                                 setInterval();
•                                         参数
•                                                 1. js代码或者方法对象
•                                                 2. 毫秒值
•                                         返回值 : 唯一标识,用于关闭定时器
•                                 clearInterval();
•                 属性
•                         获取其他BOM对象
•                                 location
•                                 history
•                                 screen
•                                 navigatior
•                                 document
•                 特点
•                         Window对象不需创建直接使用 window.方法名();
•                         window可以省略
•         location 本地地址栏对象
•                 创建(获取)
•                         window.location
•                         location
•                 方法
•                         reload方法 (刷新当前页面)
•                 属性
•                         href (重新加载)
•         history 历史记录对象
•                 创建(获取)
•                         window.history
•                 方法
•                         go()  +-n
•                         back()  -1
•                         forward()   +1
•                 属性
•                         length : 返回当前窗口历史记录中的url数量
•         screen 显示器屏幕对象
•         navigatior 浏览器对象
• DOM (文档对象模型)
•         将标记语言文档的各个部分,封装成对象,可以使用这些对象,对标记语言文档进行crud的动态操作
•         **********dom树形结构
•         W3C DOM 标准被分为3个不同的部分
•                 核心 DOM 针对任何结构文档的标准模型
•                         Document : 文档对象 整个html文档对象
•                                 创建(获取) 在html dom模型中可以使用window对象获取
•                                         window.document
•                                 方法
•                                         获取Element对象
•                                                 getElementById() 根据id属性值获取元素对象,id属性值一般唯一
•                                                 getElementsByTagName()根据元素名称获取元素对象们,返回一个数组
•                                                 getElementsByCalssName() 根据Class属性值获取元素对象们,返回一
  
  •             个数组
    
•                                                 getElementsByName() 根据name属性值获取元素对象们,返回一个数
•                                                 组
•                         Element : 元素(标签)对象
•                         Attribute : (标签)属性对象
•                         Text : 文本(内容)对象
•                         Comment : 注释
•                         Node : 节点对象
•                                 特点 : 所有dom对象都可以认为是节点
•                                 方法 :
•                                         CRUD dom树
•                                         appendChild() 向节点的子节点末尾添加一个子节点
•         功能 : 控制html文档内容
•                 js操作标签的属性
•                         document.getElementById("标签的id").属性 = 值;
•                 js操作css样式
•                         document.getElementById("标签的id").style.样式 = 值
•                 js操作标签的内容
•                         document.getElementById("标签的id").innerHTML = 值
• 事件
•         概念 : 某些组件被执行了某些操作后,执行了某些代码
•         绑定事件
•                 直接在html标签上,指定事件的属性,属性就是js代码
•                         事件 : onclick
•                 通过js获取对象
  
  • 单机事件
  •         onclick
  • 双击事件
  •         ondblclick
  • 获得焦点
  •         onfocus
  • 失去焦点
  •         onblur
  • 页面加载完成事件
  •         onload
  • 表单提交的事件
  •         onsubmit
    
    • <!-- 表单提交事件 -->
    • <!--
    •    1.如果在form标签里写了onsubmit属性,则代表表单一旦提交就会触发表单的submit事件
    •    2.表单是否提交取决于submit事件的返回值
    •       eg:onsubmit="return check()"
    •       如果check()方法返回值为true,则我们return true会触发表单的提交
    •       反之,check()方法返回false,则表单不进行提交
    • <form onsubmit="return check()">
    •    <input type="text" name="username"><br>
    •    <input type="submit">
    • </form>
    • 
      
• ****<a href="javascript:void(0)" onclick= "del(this);">删除</a></td>
• 不刷新当前页面
  

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2