一、JavaScript作用
帮助浏览器对用户提出请求进行处理
二、DOM对象
1.DOM = Document Object Model,【文档模型对象】
2.JavaScript不能直接操作HTML标签,只能通过HTML标签
关联的DOM对象对HTML标签下达指令
三、DOM对象生命周期
1.浏览器在接收到html文件之后,将HTML文件标签加载到浏览器缓存中,每当加载一个html标签的时候,自动为这个标签生成一个实例对象,这个实例对象就是DOM对象。
2.在浏览器关闭之前或者浏览器请求其他资源文件之前,本次生成的DOM对象一直存活在浏览器缓存中。
3.在浏览器关闭的时候,浏览器缓存中的dom对象将要被销毁。
4.在浏览器请求到新资源文件后,浏览器缓存中原有的dom对象将会被覆盖。
四、document对象
1.document对象被称为【文档对象】
2.document对象用于在浏览器内存中根据定位条件定位DOM对象
五、document对象生命周期
1.在浏览器将网页中所有标签加载完毕后,在内存中将使用【树形结构】存储这些DOM对象。在树形结构生成完毕后由浏览器生成一个document对象管理这颗树(DOM树)。在浏览器将接收网页中标签加载完毕后,自动在浏览器内存中生成一个document对象。
2.一个浏览器运行期间,只会生成一个document对象。
3.在浏览器关闭时,负责将document对象进行销毁。
六、通过document对象定位DOM对象方式
1.根据html标签的id属性值定位DOM对象
命令格式 var domObj = document.getElementById("id属性值");
举个栗子 var domObj = document.getElementById("one");
通知document对象定位id属性等于one的标签关联的DOM对象
2.根据html标签的name属性值定位DOM对象
命令格式 var domArray = document.getElementsByName("name属性值");
举个栗子 <input type="checkbox" name="deptNo" value="10">部门10
<input type="checkbox" name="deptNo" value="20">部门20
<input type="checkbox" name="deptNo" value="30">部门30
var domArray = document.getElementsByName("deptNo");
通知document对象将所有name属性等于deptNo的标签关联的DOM对象进行定位并封装到一个数组进行返回。 domArray就是一个数组存放本次返回的所有DOM对象。
3.根据html标签类型定位DOM对象
命令格式 var domArray = document.getElementsByTagName("标签类型名");
举个栗子 var domArray = document.getElementsByTagName("p");
<p>段落标签</p>
通知document对象将所有段落标签关联的dom对象进行定位并封装到一个数组返回。
七、DOM对象对HTML标签属性操作
1.DOM对象对标签value属性进行取值与赋值操作
取值操作:
var domObj = document.getElementById("one");
var num = domObj.value;
赋值操作:
var domObj = document.getElementById("one");
domObj.value = "abc";
2.DOM对象对标签中【样式属性】进行取值与赋值操作
取值操作:
var domObj = document.getElementById("one");
//读取当前标签【背景颜色属性】值
var color = domObj.style.背景颜色属性
赋值操作:
var domObj = document.getElementById("one");
//通过DOM对象对标签中【背景颜色属性】进行赋值
domObj.style.背景颜色属性 = 值;
3.DOM对象对标签中【状态属性】进行取值与赋值操作
状态属性:状态属性的值都是boolean类型
disabled = true ; 表示当前标签不可以使用
disabled = false; 表示当前标签可以使用
checked: 只存在与radio标签与checkbox标签
checked = true ; 表示当前标签被选中了
checked = false; 表示当前标签未被选中
取值操作:
var domObj = document.getElementById("one");
var num = domObj.checked;
赋值操作:
var domObj = document.getElementById("one");
domObj.checked = true;
4. DOM对象对标签中【文字显示内容】进行赋值与取值
文字显示内容: 只存在于双目标签之间;<tr>100</tr>
取值操作:
var domObj = document.getElementById("one");
var num1 = domObj.innerText;
赋值操作:
var domObj = document.getElementById("one");
domObj.innerText = 值;
innerText与innerHTML 区别:
innerText与innerHTML都可以对标签文字显示内容属性进行赋值与取值
innerText只能接收字符串
innerHTML既可以接收字符串又可以接收html标签
八、JavaScript监听事件
1.监听事件:
监听用户在何时以何种方式对当前标签进行操作。
当监听到相关行为时,通知浏览器调用对应JavaScript函数对当前用户请求进行处理。
2.监听事件分类:
1)监听用户何时使用鼠标操作当前标签
2)监听用户何时使用键盘操作当前标签
3.监听用户何时使用鼠标操作当前标签:
1)onclick:监听用户何时使用鼠标【单击】当前标签
2)onmouseover:监听用户何时将鼠标【悬停】当前标签上方
3)onmouseout:监听用户何时将鼠标从当前标签上方【移开】
4)onfocus:监听用户何时通过鼠标让当前标签获得【光标】
5)onblur:监听用户何时通过鼠标让当前标签丢失【光标】