JavaScript编程宝典

13     通用 HTML 元素对象

本章包括:

1 、使用 HTML 元素对象

2 、常用属性和方法

3 、所有元素对象的事件处理程序

通用元素可分为两组:第一组元素(如 b strike )定义在被封装的文本序列中使用的字体样式,随着更多的浏览器支持样式表,这些元素及其表示的对象越来越少;第二组元素(如 h1,blockquote p )为其首尾标记内的内容指定上下文。这些元素对象共享许多脚本属性、方法和事件处理程序。

 

13.1 通用对象

格式对象                    上下文对象

b                                   acronym

big                                address

center                         cite

i                                    code

nobr                             dfn

rt                                  del

ruby                             div

s                                    em

small                            ins

strike                           kbd

sub                               listing

sup                               p

tt                                  plaintext

u                                   pre

wbr                              span

                                     strong

                                     var

                                     xmp

13.1.1 语法

要访问元素属性或方法,可使用以下语句:

[document.all.]objectID.property|method([parameters])

Document.getElementById(objectID).property|method([parameters])

13.1.2 关于这些对象

13.1.3 属性

accessKey

值:单个字符的字符串          /

可以为元素指定一个键盘字符,当输入“ Alt+ 键”组合时,该元素将拥有焦点。如果新的焦点元素在文档当前位置的视图之外,文档会自动进行滚动把焦点元素带到可视范围内。

下面清单说明了如何为导航 Web 页面使用 accessKey 属性操作键盘接口。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title> 无标题文档 </title>

<script type="text/javascript">

         <!--

                   function assignKey(type, elem){

                            if(window.event.keyCode==13){

                                     switch(type){

                                     case "button":

                                               document.forms["output"].access1.accessKey = elem.value;

                                               break;

                                     case "text":

                                               document.forms["output"].access2.accessKey = elem.value;

                                               break;

                                     case "table":

                                               document.getElementById("myTable").accessKey = elem.value;

                                     }

                                     return false;

                            }

                   }

         -->

</script>

</head>

 

<body>

         <form name="input">

             <input typt="text" size="2" maxlength="1" οnkeypress="return assignKey('button', this)" /><br />

        <input type="text" size="2" maxlength="1" οnkeypress="return assignKey('text', this)" /><br />

        <input type="text" size="2" maxlength="1" οnkeypress="return assignKey('table', this)" /><br />

    </form>

    <form name="output" οnsubmit="return false">

             <input type="button" name="access1" value="Standard Button" />

        <input type="text" name="access2" />

    </form>

    <table id="myTable" cellpadding="10" border="1">

             <tr>

                 <th>Quantity</th>

            <th>Description</th>

            <th>Price</th>

        </tr>

        <tbody bgcolor="#FF0000">

                 <tr>

                     <td width="100">4</td>

                <td>Primary Widget</td>

                 <td>$14.96</td>

            </tr>

            <tr>

                     <td>10</td>

                <td>Secondary</td>

                <td>$114.96</td>

            </tr>

        </tbody>

    </table>

</body>

</html>

 

all[]

值:嵌套元素对象的数组      只读

all 属性是当前对象作用域内 HTML 元素和 XML 标记的集合(数组)。对于 HTML 元素容器,源代码顺序由元素开始标记的位置决定,结束标记不在考虑之列。但是对于 XML 标记,结束标记在数组中作为单独的表项。

每个 document.all 集合都包含 html,head,title body 元素对象,即使实际的 HTML 源代码忽略这些标记,对象模型也会为每个载入到窗口或框架中的文档创建这些对象。虽然 document.all 引用可能是最常用的引用,但 all 属性对任何容器元素都是可用的。例如, document.forms[0].all 显示定义在网页第一个表单中的所有元素。

用户可以使用赋给 id 属性的标识符的字符串形式(或整数索引值)访问任何元素。不必使用 eval() 函数来讲一个字符串转换为对象引用,而使用名字的字符串值作为一个数组索引值。

 

Attribute[]

值: attribute 对象引用数组           只读

Attribute 属性包括一个为元素指定的属性数组。 Attribute 数组包含浏览器为元素定义的每个可能的属性,即使这些元素在 HTML 标记中没有明确设置。

 

BehaviorUrns[]

值:行为 URN 字符串数组              只读

该属性用来提供一个 URN 形式的地址(所有赋给当前对象行为的地址)列表。如果没有行为,该数组的长度则为 0

 

CanHaveChildren

值: Boolean             只读

该属性表示一个特定的元素是否可包含一个子(嵌套)元素,这在一些动态内容情况下很有用。大多数有首尾标记的元素可包含嵌套元素。

 

canHaveHTML

值: Boolean             只读

该属性让脚本发现一个特定的对象是否可接收 HTML 内容,例如用对象方法插入或替换。

 

ChildNodes[]

值:节点对象数组                    只读

该属性是指当前对象中包含的节点对象的数组。注意,子节点包括元素对象和文本对象,根据当前对象的内容, childNodes 和子节点集合的数目有所不同。大多数使用 childNodes 数组的循环都是为了检查、计算或修改集合内的元素节点。如果这不是脚本的目标,那么测试 childNodes 数组返回的每个节点,并且在处理节点前验证 nodeType 属性的值是否是 1 (元素);如果该属性的值不为 1 ,则跳过该节点。

 

children

值:元素对象数组                    只读

该属性是指包含在当前对象中的元素对象的数组。

 

className

值:字符串                                  /

该属性是赋给元素 class 属性的标识符。为了使一个 CSS 规则和文档中的几个元素相关联,最好把相同的标识符赋给那些元素的 class 属性,并且使用该标识符(以句点开头)作为 CSS 规则选择符。一个元素的 className 属性允许在脚本控制下讲不同的 CSS 规则应用到元素上。

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值