《Javascript加强教学内容》由会员分享，可在线阅读，更多相关《Javascript加强教学内容（70页珍藏版）》请在金锄头文库上搜索。
1、,Javascript加强,浏览器的对象树,1. navigator 2. Window,document （文档对象） frame （框架对象） location （位置对象） history （历史对象）,links 链接对象 archors 锚对象 forms 表单对象 images 图片对象,window对象常用方法,alert(信息) ： 消息框 prompt(提示信息,默认值)： 标准输入框 confirm( ) ： 确认框 open( ) ： 打开一个新窗口 close( ) ： 关闭窗口,Form表单对象,访问表单的方式: document.formsn document.表单
2、名字 ,Form表单属性,javaScript定义函数的三种方式,正常方法 function print(msg) document.write(msg); ,javaScrip定义函数的三种方式,函数直接量定义函数 /使用函数直接量的方式定义函数 var result=function(a,b)return a+b; /调用使用函数直接量定义的函数 var sum=result(7,8); alert(sum); 注:函数直接量是一个表达式，它可以定义匿名函数,javaScrip定义函数的三种方式,构造函数方法 new Function(); /构造函数方式定义javascript函数 注意
3、Function中的F大写 var add=new Function(a,b,return a+b;); /调用上面定义的add函数 var sum=add(3,4); alert(sum); 注:接受任意多个字符串参数，最后一个参数是函数体。 如果只传一个字符串，则其就是函数体。,DOM,DOM ：DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范,DOM是一种与浏览器，平台，语言无关的接口，使得你可以访问页面其他的标准组件 D：文档 html 文档 或 xml 文档 O：对象 document 对象的属性和方法 M：模型 DOM 是针对xml(ht
4、ml)的基于树的API。 DOM树:节点（node）的层次。 DOM 把一个文档表示为一棵家谱树（父，子，兄弟） DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面,DOM的结构,DOM的结构,节点及其类型,节点 * 由结构图中我们可以看到，整个文档就是一个文档节点。 * 而每一个HMTL标签都是一个元素节点。 * 标签中的文字则是文本节点。 * 标签的属性是属性节点。 * 一切都是节点 节点树 节点树的概念从图中一目了然，最上面的就是“树根”了。节点之间有父子关系，祖先与子孙关系，兄妹关系。这些关系从图中也很好看出来，直接连线的就是父子关系了。而有一个父亲的就是兄妹关系,
5、北京传智播客教育 ,NODE接口的特性和方法,查找元素节点,getElementById() 寻找一个有着给定 id 属性值的元素，返回值是一个有着给定 id 属性值的元素节点。如果不存在这样的元素，它返回 null. var oElement = document.getElementById ( sID ) 该方法只能用于 document 对象, function test() var usernameElement=document.getElementById(“tid); /获取元素的值 alert(usernameElement.value: +usernameElement.v
6、alue) /获取元素的类型 alert(usernameElement.type: +usernameElement.type) ,查找元素节点,getElementsByName() 寻找有着给定name属性的所有元素，这个方法将返回一个节点集合，这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定name属性的所有元素的总个数。, function test() var tnameArray=document.getElementsByName(tname); alert(tnameArray.length); for(var i=0;itnameArra
7、y.length;i+) window.alert(tnameArrayi.value); ,查找元素节点, /该方法返回是数组类型 var usernameElements=document.getElementsByName(username); for (var i = 0; i ,查找元素节点,getElementsByTagName() 寻找有着给定标签名的所有元素，这个方法将返回一个节点集合，这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定标签名的所有元素的总个数。 var elements = document.getElementsByTag
8、Name(tagName); var elements = element.getElementsByTagName(tagName); 该方法不必非得用在整个文档上。它也可以用来在某个特定元素的子节点当中寻找有着给定标签名的元素。 var container = document.getElementById(“sid”); var elements = container.getElementsByTagName(“p”); alert(elements .length);,查找元素节点,var inputElements=document.getElementsByTagName(inp
9、ut); for(var i=0;iinputElements.length;i+) if (inputElements.type != submit) inputElementsi.onchange = function() alert(this.value) ; var selectElements=document.getElementsByTagName(select); for (var i = 0; i selectElements.length; i+) selectElementsi.onchange=function() alert(this.value); ,查找元素节点,
10、var inputElements=document.getElementsByTagName(input); for(var i=0;iinputElements.length;i+) if (inputElements.type != submit) inputElementsi.onchange = function() alert(this.value) ; var selectElements=document.getElementsByTagName(select); for (var i = 0; i selectElements.length; i+) selectElemen
11、tsi.onchange=function() alert(this.value); ,查找元素节点,var textareaElements=document.getElementsByTagName(textarea); for (var i = 0; i textareaElements.length; i+) textareaElementsi.onchange = function() alert(this.value); ; ,DOM 属性 - nodeName,文档里的每个节点都有以下属性。 nodeName:一个字符串，其内容是给定节点的名字。 var name = node.
12、nodeName; * 如果节点是元素节点，nodeName返回这个元素的名称 * 如果是属性节点，nodeName返回这个属性的名称 * 如果是文本节点，nodeName返回一个内容为#text 的字符串 注:nodeName 是一个只读属性。,DOM 属性 - nodeType,nodeType：返回一个整数，这个数值代表着给定节点的类型。 nodeType 属性返回的整数值对应着 12 种节点类型,常用的有三种： Node.ELEMENT_NODE -1 - 元素节点 Node.ATTRIBUTE_NODE -2 - 属性节点 Node.TEXT_NODE -3 - 文本节点 nodeT
13、ype 是个只读属性,DOM 属性 - nodeValue,nodeValue：返回给定节点的当前值（字符串） 如果给定节点是一个属性节点，返回值是这个属性的值。 如果给定节点是一个文本节点，返回值是这个文本节点的内容。 如果给定节点是一个元素节点，返回值是 null nodeValue 是一个 读/写 属性，但不能对元素节点的 nodeValue 属性设置值， 但可以为文本节点的 nodeValue 属性设置一个值。 var li = document.getElementById(“li”); if(li.firstChild.nodeType = 3) li.firstChild.nod
14、eValue = “国庆60年”;,元素节点,/测试元素节点,输出节点名称,节点的类型,节点的值 var liElements=document.getElementsByTagName(li); for(var i=0;iliElements.length;i+) alert(liElementsi.nodeName); alert(liElementsi.nodeType); aler,文本节点,/测试元素节点,输出节点名称,节点的类型,节点的值 var liElements=document.getElementsByTagName(li); for(var i=0;iliElement
15、s.length;i+) alert(liElementsi.childNodes0.nodeName); alert(liElementsi.childNodes0.nodeType); alert(liElementsi.childNodes0.nodeValue); liElementsi.childNodes0.nodeValue=南京; alert(liElementsi.childNodes0.nodeValue); /另一种读取方法 alert(liElementsi.firstChild.nodeName); alert(liElementsi.firstChild.nodeT
16、ype); alert(liElementsi.firstChild.nodeValue); ,查看是否存在子节点,hasChildNodes() 该方法用来检查一个元素是否有子节点，返回值是 true 或 false. var booleanValue = element.hasChildNodes(); 文本节点和属性节点不可能再包含任何子节点，所以对这两类节点使用 hasChildNodes 方法的返回值永远是 false. 如果 hasChildNodes 方法的返回值是 false，则 childNodes,firstChild,lastChild 将是空数组和空字符串。,var selectElements=d
