BOM对象简述
一、概述
1.含义:
JavaScript的组成
a. EMCAScript 核心 规定了 JavaScript的语法和基本对象
b. DOM 文档对象模型 处理网页内容
c. BOM 浏览器对象模型 与浏览器交互的方法和接口 【全称:Browser Object Model】
2.常见的 BOM 对象
A. Window 窗口
B. Navigator 导航器
C. Screen 屏幕
D. History 历史
E. Location 位置
1.常用的消息框
A. alert(message) 警告框.用于显示一个指定的消息.
B. var flag = confirm(message) 确认框.如果确认则返回true。如果取消则返回false
1. 设置循环定时器
格式: var 定时器ID = setInterval("方法名称()",时间间隔毫秒数);
例如: var id = setInterval("show()",3000);
2. 清除循环定时器
格式: clearInterval(需要传入循环定时器ID);
例如: clearInterval(id);
1. 设置一次性定时器
格式: var 定时器ID = setTimeOut("方法名称()",时间间隔毫秒数);
例如: var id = setTimeOut("show()",3000);
2. 清除一次性定时器
格式: clearTimeOut(需要传入循环定时器ID);
例如: clearTimeOut(id);
1. location 的 href 属性
A.语法: location.href = URL; 设置跳转到指的URL地址
例如: location.href = "http://www.itheima.com";
B.语法: var v = location.herf; 获取到当前页面地址栏当中的 URL地址
DOM对象-DOM简述
一、概述
DOM: document object model 文档对象模型,用来操作标识性文档(例如: HTML) 具体一点就是完成 “特效” 使得页面更加绚丽.
DOM树的介绍
我们的HTML会被加载到内存当中.作为DOM树的对象.叫做 document. 每一个标签、文本、属性等都会被封装成为 DOM树的节点对象.
细分分别叫做 “元素节点”、“文本节点”、“属性节点”但是都会被成为 节点.各个节点之间的关系有 父子节点关系,还有兄弟节点关系.
获取元素节点对象,四种方式:
A. 方式一:
格式: var v01 = document.getElementById("username");
特点: 只能获取到 id = "username"的input元素对象。不带s,获取一个元素
B. 方式二:
格式: var v02 = document.getElementsByName("hobby");
特点: 获取到的是input元素集合或者 input元素数组.例如: 多选框的操作。带有s获取多个元素
C. 方式三:
格式: var v03 = document.getElementsByTagName("li");
特点: 获取到的是li元素集合或者元素数组.例如: 无序列表的操作。带有s获取多个元素
D. 方式四:
格式: var v04 = document.getElementsBbyClassName("password");
特点: 获取到的是 input 元素集合或者 input 元素数组。例如: input单选操作。带有s获取多个元素
要想获取某个元素节点对象,必须先保证这个元素节点被加载到内存中。
获取元素节点对象的操作,应该写在元素节点之后.
A. 获取属性值: 元素对象.属性;
例如:
a. 元素对象.value
b. 元素对象.className
B. 设置属性值: 元素对象.属性 = 新值;
例如:
a. 元素对象.value = "赵信"
b. 元素对象.className = "cs2"
checked 属性 true/false
设置单选按钮获取复选框的这个属性值.很常见,必须掌握
1. innerHTML 介绍
使用元素对象的 innerHTML 属性可获取内容体,给innerHTML属性赋值就是修改内容体,还可以进行内容追加。
注意:innerHTML属于javascript的一个输出语句,浏览器会把输出的这段文字当html来解析,于是就厉害了
2. innerHTML 用法
a. 获取数据的操作: var 数据 = 节点对象.innerHTML;
b. 设置数据的操作: 节点对象.innerHTML = 数据值;
c. 追加数据的操作: 节点对象.innerHTML += 追加数据值;