网页设计与制作（HTML+CSS+JS）-3期（KC003） JavaScirpt元素的控制 6页面中元素的访问与属性的设置.pptx

1页面中元素的访问与属性的设置Part◎ 页面元素的引用◎ 读写HTML对象的属性◎ 表单及其控件的访问◎ JS设置CSS样式的方式1 页面元素的引用1. getElementById方法getElementById方法可以根据标签对象的ID属性值得到唯一的标签对象，如果页面上含有多个相同ID的节点，那么只返回第一个节点。标签对象的ID尽可能是唯一的。举例演示【实例10-17】使用document.getElementById方法实现加法器。2. getElementsByName方法getElementsByName方法可以根据标签对象的name属性值得到名称相同的一组标签对象，这里标签对象的name可以相同，该方法得到的是标签对象数组，访问其中某个标签对象要根据标签对象在HTML文档中的相对次序决定其下标，第一个标签对象的下标为0。举例演示【实例10-18】使用document. getElementsByName方法实现加法器。3.getElementsByTagName方法可以根据标签对象的标签名得到同类标签的集合对象，它的涉及范围最大。用数组加下标访问其中的标签对象。将“实例”中的代码进行替换，也能达到相同的效果。var text = document.getElementsByName(text); 替换为：var text =document.getElementsByTagName(input) 3.getElementsByTagName方法可以根据标签对象的标签名得到同类标签的集合对象，它的涉及范围最大。用数组加下标访问其中的标签对象。将“实例”中的代码进行替换，也能达到相同的效果。document对象常用方法方法功能write()向网页中输出一条字符串，输完后不换行writeln()向网页中输出一条字符串，输完后换行open()打开一个document文档close()关闭一个通过open()方法打开的document对象2 读写HTML对象的属性1. 读写HTML对象的属性读HTML对象属性主要有以下两种格式：对象.属性名，或者HTML对象[属性名]。例如：document.getElementById(div1).innerHTML;等同于：document.getElementById(div1)[innerHTML]; HTML对象.getAttribute(属性名)。例如：document.getElementById(div1). getAttribute (innerHTML );2. 写HTML对象的属性写HTML对象属性也有相应的两种格式：对象.属性名，或者HTML对象[属性名]。HTML对象.属性名=新属性值，等同于HTML对象[属性名]=新属性值。HTML对象.属性名=新属性值，等同于HTML对象[属性名]=新属性值。3 表单及其控件的访问1. 表单的访问表单的访问有以下两种格式： document.forms[索引]document.表单名称通过表单对象访问表单属性和方法，格式如下：HTML对象.getAttribute(属性名)。document.forms[索引].属性document.forms[索引].方法（参数）document.表单名称.属性document.表单名称.方法（参数）2. 表单内控件元素的访问表单内控件的访问格式为：表单对象.elements[下标]举例演示【实例10-19】使用表单及其控件实现加法器。4 JS设置CSS样式的方式1.直接设置style的属性如果属性有-号，写成驼峰的形式。例如：element.style.textAlign=center;如果想保留-号，就中括号的形式。例如： element.style[text-align] = center; 该段代码修改的样式是行内样式，相当于在标签中添加了style属性，如果是div元素的话就相当于div id=box1AAAAA/div。代码执行后修改为： div id=box1 style=text-align:center;AAAAA/div2.直接设置属性与设置HTML属性的方式一样，使用setAttribute()函数。例如：element.setAttribute(height, 100px);这种设置方式也是修改的行内样式。3. 设置cssText与设置HTML属性的方式一样，使用setAttribute()函数。例如：element.setAttribute(height, 100px);这种设置方式也是修改的行内样式。4. 使用obj.className来修改样式表的类名通过修改类名来修改样式表的类名。例如：element.className = 新类名;5. 使用更改外联的cs