</script>
JS 中的自定义对象 （扩展内容） Object 形式的自定义对象 var 变量名 = new Object(); // 是一个空对象实例 变量名 . 属性名 = 值； // 就给对象实例添加一个属性 变量名 . 方法名 = function(){} // 给对象实例添加一个方法 访问对象内容： 变量名 . 属性名 / 方法名 (); < script type = "text/javascript" > // 定义一个对象 var obj = new Object(); obj.name = "xx" ; obj.age = 18; obj.fun = function (){ alert( "年龄：" + this .age + "，姓名：" + this .name); } // 访问 alert( obj.name ); obj.fun(); </ script > {} 花括号形式的自定义对象 var 变量名 = { 属性名 : 值 , // 添加一个属性 属性名 : 值 , // 添加一个属性 方法名 : function(){} 添加一个方法 }; 对象的访问： 变量名 . 属性名 / 方法名 (); < script type = "text/javascript" > var obj = { name: "国华" , age:18, fun: function (){ alert( "姓名：" + this .name + ",年龄：" + this .age); } }; alert(obj.age); obj.fun(); </ script > 10、js 中的事件 什么是事件？事件是电脑输入设备与页面进行交互的响应。我们称之为事件。 常用的事件： onload 加载完成事件 页面加载完成之后 onclick 单击事件 单击事件， onblur 失去焦点事件 onchange 内容发生改变事件 当下拉列表或者输入框中的内容发生改变的时候，会触发。 onsubmit 表单提交事件 常用于 form 表单提交之前，验证所有表单项是否合法。如果有一个不合法。就阻止表单提交。 事件的注册又分为静态注册和动态注册两种： 静态注册 ( 绑定 ) 事件 ： 静态注册事件，指的是在标签的事件属性上直接赋于事件触发后需要调用的 js 代码。这种方式我们称之为静态注册。 动态注册（绑定）事件 ： 动态注册指的是，动态地获取标签对象。然后通过标签对象 . 事件名 = function(){} 赋值函数的形式。我们称之为动态注册。 动态注册的步骤： window.onload = function(){ // 页面加载完成之后 1. 获取标签对象 2. 通过标签对象 . 事件名 = function(){} } onload 事件的示例代码 <! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" > < html > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" > < title > Insert title here </ title > < script type = "text/javascript" > function onloadFun(){ alert( "页面加载完成之后。静态注册" ); } //onload的动态注册事件。是固定的语法。 window.onload = function (){ alert( "页面加载完成之后！动态注 册 "); } </ script > </ head > <!-- 静态注册页面加载完成之后 <body onload ="onloadFun()"> --> < body > </ body > </ html > onclick 单击事件示例代码 <! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" > < html > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" > < title > Insert title here </ title > < script type = "text/javascript" > function onclickFun(){ alert( "这是静态注册的单击事件" ); } // 第二个按钮，我们希望使用动态注册 window.onload = function (){ //1.获取标签对象 //get获取 //Element元素（元素即是标签） //by 通过，由经 //id id属性 // 通过id属性，获取标签对象 var btnObj = document.getElementById( "btn02" ); //2.通过标签对象.事件名 = function(){} btnObj.onclick = function (){ alert( "这是动态注册的单击事件" ); } } </ script > </ head > < body > <!-- 静态注册 onclick 事件 --> < button onclick = "onclickFun()" > 111 </ button > < button id = "btn02" > 222 </ button > </ body > </ html > onblur 失去焦点事件 <! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" > < html > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" > < title > Insert title here </ title > < script type = "text/javascript" > function onblurFun() { //console控制台对象 // log方法，可以打印任意内容 console.log( "静态注册的 用户名输入框，失去焦点了！" ); } //页面加载完成之后 window.onload = function (){ // 1.先获取标签对象 var passObj = document.getElementById( "password" ); //2.通过标签对象.事件名 = function(){} passObj.onblur = function (){ console.log( "动态注册密码输入框的失去焦点事件" ); } } </ script > </ head > < body > <!-- 静态注册事件 --> 用户名 : < input onblur = " onblurFun()" type = "text" />< br /> 密码： < input id = "password" type = "password" /> </ body > </ html > onchange 内容发生改变事件示例代码 <! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" > < html > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" > < title > Insert title here </ title > < script type = "text/javascript" > function onchangeFun() { alert( "这是静态注册的失去焦点事件！" ); } window.onload = function (){ //1.获取标签对象 var selObj = document.getElementById( "sel01" ); //2.通过标签对象.事件名=function(){} selObj.οnchange= function (){ alert( "这是动态注册的onchange事件" ); } } </ script > </ head > < body > 请选择你心中的女神： < select onchange = "onchangeFun()" > < option > --选择女神-- </ option > < option > xx </ option > < option > xx </ option > < option > xx </ option > </ select >< br /> 请选择你心中的男神： < select id = "sel01" > < option > --选择男神-- </ option > < option > xx </ option > < option > xx </ option > < option > xx </ option > < option > xx </ option > </ select > </ body > </ html > onsubmit 表单提交事件 <! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" > < html > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" > < title > Insert title here </ title > < script type = "text/javascript" > function onsubmitFun(){ alert( "开始验证表单项……" ); alert( "表单项中有错误！阻止表单提交" ); return false ; } // 页面加载完成之后 window.onload = function (){ //1.获取标签对象 //2.通过标签对象.事件名=function(){} document.getElementById( "form01" ).onsubmit = function (){ alert( "动态---开始验证表单项……" ); alert( "动态---表单项中有错误！阻止表单提交" ); return false ; }; } </ script > </ head > < body > <!-- onsubmit 事件常用于在表单提交前。用来验证所有表单项是否合法。 如果有一个不合法。就 return false阻止表单提交。 如果都合法，就 return true,继续提交 --> < form action = "http://www.baidu.com" onsubmit = "return onsubmitFun()" > < input type = "submit" /> </ form > < form id = "form01" action = "http://www.baidu.com" > < input type = "submit" /> </ form > </ body > </ html >
10、DOM 模型 DOM 全称是 Document Object Model 文档对象模型 大白话，就是把文档中的标签，属性，文本，转换成为对象来管理。 那么 它们是如何实现把标签，属性，文本转换成为对象来管理呢。这就是我们马上要学习的重点。 10.1 、 Document 对象（ ***** 重点） Document 对象的理解： 第一点： Document 它管理了所有的 Html 文档内容。 第二点： document 它是一种树结构的文档。有层级关系。 第三点：它让我们把所有的标签 都 对象化 第四点：我们可以通过 document 访问所有的标签对象。 什么是对象化？？ 我们基础班已经学过面向对象。请问什么是对象化？ 举例： 有一个人有年龄： 18 岁，性别：女，名字：张某某 我们要把这个人的信息对象化怎么办！ Class Person { private int age; private String sex; private String name; } 那么 html 标签 要 对象化 怎么办？ < body > < div id = "div01" > div01 </ div > </ body > 模拟对象化，相当于： class Dom{ private String id; // id 属性 private String tagName; // 表示标签名 private Dom parentNode; // 父亲 private List<Dom> children; // 孩子结点 private String innerHTML; // 起始标签和结束标签中间的内容 } 10.4 、 Document 对象中的方法介绍 （ ***** 重点） document.getElementById(elementId) 通过标签的 id属性查找标签dom对象，elementId 是标签的 id属性值 document.getElementsByName(elementName) 通过标签的 name属性查找标签dom对象，elementName 标签的 name属性值 document.getElementsByTagName(tagname) 通过标签名查找标签 dom对象。tagname 是标签名 document.createElement( tagName) 方法，通过给定的标签名，创建一个标签对象。 tagName 是要创建的标签名 getElementById 方法示例代码： <! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" > < html > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" > < title > Insert title here </ title > < script type = "text/javascript" > //现在我们希望，当用户点击 [验证] 获取用户名输入框的内容。 // 验证 是否属性 字母，数字，下划线。并且长度为 5-15位 window.onload = function (){ document.getElementById( "username" ).onblur = function () { var inputObjTextValue = document.getElementById( "username" ).value; // alert("失去焦点事件：" + inputObjTextValue); var patt = /^\w{5,15}$/; // 获取span标签对象 var spanObj = document.getElementById( "usernameSpan" ); if (patt.test(inputObjTextValue)) { spanObj.innerHTML = "<img alt='' width='15' height='15' src='right.png'>" ; } else { spanObj.innerHTML = "<img alt='' width='15' height='15' src='wrong.png'>" ; } } // 获取[验证]按钮注册单击事件 document.getElementById( "btn01" ).onclick = function (){ //要操作一个操作对象。首先要先获取到标签对象 //1.先通过id属性获取到标签对象 var inputObj = document.getElementById( "username" ); // value属性可以获取到 输入框中的内容。 var inputObjTextValue = inputObj.value; // 验证 是否属性 字母，数字，下划线。并且长度为5-15位 // 需要使用正则表达式验证 // \w 表示字母，数字，下划线。 // {5,15} 表示最少5位长度，最大15长度 // ^ 表示以什么开始 // $ 表示以什么结束 // ^$ 表示整个字符串都必须完全匹配 var patt = /^\w{5,15}$/; // test()可以验证一个字符串，是否匹配正则对象 // 如果匹配，返回，true，如果不匹配，返回false // 获取span标签对象 var spanObj = document.getElementById( "usernameSpan" ); // innerHTML 就表起始标签和结束标签中的内容，这个属性，可读，可写 // alert(spanObj.innerHTML); if (patt.test(inputObjTextValue)) { // spanObj.innerHTML = "用户名合法"; spanObj.innerHTML = "<img alt='' width='15' height='15' src='right.png'>" ; } else { // spanObj.innerHTML = "用户名不合法"; spanObj.innerHTML = "<img alt='' width='15' height='15' src='wrong.png'>" ; } }; } </ script > </ head > < body > 用户名 : < input type = "text" id = "username" value = "123412" /> < span id = "usernameSpan" style =" color : red ;" ></ span > < button id = "btn01" > 验证 </ button > </ body > </ html > getElementsByName 方法示例代码： <! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" > < html > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" > < title > Insert title here1111 </ title > < script type = "text/javascript" > //我们希望点击完按钮之后。操作一组标签对象。 //都需要先获取你要操作的标签对象。 window.onload = function (){ //全选单击事件 document.getElementById( "checkAll" ).onclick = function (){ // 我们希望点击全选按钮后，所有的复选框都选中 // 通过getElementsByName查找回来的对象是一个集合。 // 这个集合中每个元素都是查找到的标签对象。这个集合的操作，跟数组一样。可以通过下标获取其中的元素。 // 这个集合中元素的顺序 ，就是这些标签在html页面上。从上到下的顺序。 var hobbyObjs = document.getElementsByName( "hobby" ); // alert(hobbyObjs.length); // var hobbyItem = hobbyObjs[0]; // 复选框对象有checked属性。这个属性表示复选框的选中状态。 // true表示选中。false表示不选中。 // 这个属性，是可读，可写的 // hobbyItem.checked = true; // Shirt + Ctrl + C for ( var i = 0; i < hobbyObjs.length; i++) { hobbyObjs[i].checked = true ; } }; //全不选单击事件 document.getElementById( "checkNo" ).onclick = function (){ var hobbyObjs = document.getElementsByName( "hobby" ); for ( var i = 0; i < hobbyObjs.length; i++) { hobbyObjs[i].checked = false ; } }; // 反选单击事件 document.getElementById( "checkReverse" ).onclick = function (){ //先获取你需要操作的标签对象 var hobbyObjs = document.getElementsByName( "hobby" ); for ( var i = 0; i < hobbyObjs.length; i++) { //先判断原来的选中状态。如果原来选中，设置为不选中 if (hobbyObjs[i].checked) { hobbyObjs[i].checked = false ; } else { hobbyObjs[i].checked = true ; } } }; } </ script > </ head > < body > 兴趣爱好： < input type = "checkbox" name = "hobby" /> Java < input type = "checkbox" name = "hobby" /> C++ < input type = "checkbox" name = "hobby" /> js < br /> < button id = "checkAll" onclick = "checkAllFun()" > 全选 </ button > < button id = "checkNo" > 全不选 </ button > < button id = "checkReverse" > 反选 </ button > </ body > </ html > getElementsByTagName 方法示例代码： <! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" > < html > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" > < title > Insert title here1111 </ title > < script type = "text/javascript" > //我们还是希望，点击全选的时候，操作全部的复选框，就可以通过 // 标签名查找 window.onload = function (){ document.getElementById( "checkAll" ).onclick = function (){ //1.先获取标签对象集合。 var inputObjs = document.getElementsByTagName( "input" ); // getElementsByTagName 返回的是一个集合。 // 集合中每一个元素都是标签对象。这个集合的操作跟数组一样。可以通过下标 获取元素 // 也有length属性 // 这些元素的顺序，就是这些标签在html页面中，从上到下的顺序。 //2.遍历操作每一个元素 for ( var i = 0; i < inputObjs.length; i++) { inputObjs[i].checked = true ; } }; } </ script > </ head > < body > 兴趣爱好： < input type = "checkbox" /> Java < input type = "checkbox" /> C++ < input type = "checkbox" /> js < br /> < button id = "checkAll" onclick = "checkAllFun()" > 全选 </ button > </ body > </ html > 10.5 、节点的常用属性和方法（节点就是标签对象） 方法： 通过具体的元素（元素即是标签）节点调用 getElementsByTagName() 方法，获取当前节点的指定标签名孩子节点 appendChild( oChildNode ) 方法，可以添加一个子节点， oChildNode 是要添加的孩子节点 属性： childNodes 属性，获取当前节点的所有子节点 firstChild 属性，获取当前节点的第一个子节点 lastChild 属性，获取当前节点的最后一个子节点 parentNode 属性，获取当前节点的父节点 nextSibling 属性，获取当前节点的下一个兄弟节点 previousSibling 属性，获取当前节点的上一个兄弟节点 className 用于获取或设置标签的 class 属性值 innerHTML 属性，表示获取 / 设置起始标签和结束标签中的内容 innerText 属性，表示获取 / 设置起始标签和结束标签中的文本
