JavaScript应用篇
一：JavaScript作用：
帮助浏览器对用户所提出的请求进行处理
二：Dom对象：
1.DOM全称：Document Object Mode1 文档模型对象
2.JavaScript不能直接操作Html标签,只能通过Html标签所关联的dom对
象对Html标签下达指令(类似于java命令不能直接修改表文件但是可以
通过jdbc推送sql命令来达到目的)三：Dom对象生命周期：
1.浏览器在接收到html文件之后，将html文件中的标签加载到浏览器缓存中
每当加载一个html标签时，自动为这个标签生成一个实例对象，这个实例
对象就是Dom对象
2.在浏览器关闭之前或请求其他资源文件之前，本次所生成的Dom对象一直
存活在浏览器缓存中
3.在浏览器关闭时，浏览器缓存中的Dom对象将被销毁
4.在浏览器请求到新的资源文件后，浏览器缓存中原有的Dom对象将会被覆盖四：document对象：
1.documen对象被称为【文档对象】
2.document对象用在浏览器内存中根据定位条件定位Dom对象五：document对象生命周期
1.浏览器将网页中所有的标签加载完毕后，在内存中将使用【树形结构】存
储Dom对象，在树形结构生成瓦尼后由浏览器生成一个document对象管理
这棵树(Dom树)
*******在浏览器将接收页面中标签加载完毕后，自动在浏览器内存生成一个
document对象
2.一个浏览器窗口运行期间，只会生成一个document对象
3.在浏览器关闭时，负责将document对象进行销毁六：通过document对象定位dom对象方式：
1.根据html标签的id属性值定位dom对象
命令格式： var domObj = domcument.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对象IANGname=deptNo的dom对象进行定位并封装
到数组进行返回。domArray就是一个数组存放本次返回的所有
dom对象
3.根据html标签类型定位dom对象
命令格式： var domArray = domcument.getElementsByTagName("标签类型名");
举个例子： var domArray = document.getElementsByTagName("p");
<p>段落标签</p>
通知domcument将所有段落标签所关联的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> 100为文字显示内容
取值操作：var domObj = document.getElementById("one");
var num1 = domObj.innerText;
赋值操作：var domObj = document.getElementById("one");
domObj.innerText=值;
innerText与innerHtml区别:
都可以对标签的文字系那是内容属性进行我赋值与取值操作
innerText只能接收字符串
innerHtml既可以接收字符串又可以接收html标签八 JavaScript监听事件
1.监听事件：
监听用户何时以何种方式对当前标签进行操作。
当监听到相关行为时，通知浏览器去调用对应的JavaScript函数对当前用
户请求进行处理
2.监听事件分类：
1)监听用户何时使用鼠标来操作当前标签
2)监听用户何时使用键盘来操作当前标签
3.监听用户何时使用鼠标来操作当前标签：
1)onclick:监听用户何时用鼠标【单机】当前标签
2)onmouseover:监听用户何时将鼠标【悬停】在当前标签上
3)onmouseout:监听用户何时将鼠标从当前标签上方【移开】
4)onfocus:监听用户何时通过鼠标从当前标签【获得光标】
5)onblur:监听用户何时通过鼠标从当前标签【丢失光标】
4.监听用户何时使用键盘操作当前标签：
1)onketdown:监听用户何时在当前标签上【按下】键盘
2)onkeyup:监听用户何时在当前标签上【弹起】键盘九 onload监听事件
1.作用:监听浏览器何时将网页中的Html标签加载完毕
2.意义:浏览器每加载一个Html标签时，自动在内存生成一个dom对象
在浏览器将页面所有标签加载完毕时，意味着当前网页中所有
标签都生成对应dom对象。onload此时就可以触发调用函数，对
浏览器中标签进行处理，此时不会出现未找到Dom对象的问题
3.使用:
<script type="text/javascript">
function fun1(){
window.alert("fun1 is run...");
}
</script>
<body onload=fun1()>
</body>十 基于Dom对象实现监听事件与Html标签之间的绑定
1.前提：
在实际开发过程中，同一个监听事件往往要与多个Html标签进行绑定
这样会增加开发强度，在未来维护过程中，也会增加维护难度
2.命令形式：
domObj.监听事件名=处理函数的名 **此处处理函数的名后面不能出现()**
3.举个例子：
var domObj = domcument.getElementById("one");
domObj.onclick =fun1; //注意函数名后面不能有括号
相当于<input type="button" id="one" onclick="fun1()"/> //此处函数名后面必须有括号
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
