HTML中表单各种对象,JavaScript之DOM-9 HTML DOM(HTML DOM概述、常用HTML DOM对象、HTML表单)(示例代码)...

一、HTML DOM 概述

HTML DOM 概述

- HTML DOM 定义了用于 HTML 的一系列标准对象,以及访问和处理 HTML 文档的标准方法

- HTML 标签对象化

- 将网页中的每个元素都看作是一个对象

常用 HTML DOM 对象

e5a048da5f75d3954592635976a21dd8.png4453991ee01b782a4ae131951181b058.png

标准 DOM 与 HTML DOM

- HTML 标签对象化

- createElement

- appendChild

- setAttribute

- removeAttribute

- nodeName

- ...

- HTML DOM 提供了封装好的各种对象

- Image

- Select

- Option

- ...

- 标准 DOM 的实现方式

a241535813919d49488431065350afa5.png  - HTML DOM 的实现方式

89770f2af78aee7f3b0ac7ba29601f10.png  - 标准 DOM 操作适合于:

- 操作节点,如创建、删除、查找等

- HTML DOM 操作适合于:

- 操作属性,如读取或者修改属性的值

HTML DOM 属性

- 标准 DOM 中,属性作为元素的子节点存在,获得属性的值的可以使用 elementNode.getAttribute("属性名")

- HTML DOM 中,属性并不作为独立的节点看待,可以直接使用对象来访问属性值

80ed3af6be9b92870bed44902289698c.png

样式属性

- 可以使用元素对象的style属性控制元素的CSS样式

e01efebcc792a4844286d195f620fa5f.png5a71f5d5bd2e8c0895414b19ccb559bd.png

- 也可以使用元素对象的className属性控制元素所属的CSS类

941199c862c4c023badc172d4093bda5.pnge12f786910baf375d011f447a8ab874a.png

二、常用 HTML DOM 对象

Image 对象

- Image 对象代表嵌入的图像

- 标签每出现一次,一个Image就会被创建。也可以使用 new Image()创建一个新对象

- 常用属性:

- src

- height

- width

Table 对象

- Table 对象代表一个 HTML 表格

-

- 常用属性

- rows

- 常用方法

- insertRow(index): 返回 TableRow 对象

- deleteRow(index)

510fb7efe39762d607e47fb825e4fb7b.png

TableRow 对象

- TableRow 对象代表一个 HTML 表格行

-

标签表示一个 TableRow 对象

fd009f8df5885a9a110870e3283fb819.png

TableCell 对象

- TableCell 对象代表一个 HTML 表格单元格

-

标签表示一个 TableCell 对象

e79bbdf2bae2fb32788c0ee60c63cef0.png

三、HTML 表单

Form 对象

- Form 对象代表一个 HTML 表单。

- 在 HTML 文档中

每出现一次,Form对象就会被创建

- 常用属性

- action

- method

- enctype

- length:表单中的元素数目

- elements[]:包含表单中所有元素的数组

- 常用方法

- reset()

- submit(): 提交表单

Input 对象

- 常用表单标签与 HTML DOM对象有如下对应关系

1cde879a56f0d231ec80509456fc1986.png

Select 对象

- Select 对象代表 HTML 表单中的一个下拉列表

- 标签即表示一个 Select 对象

- 常用属性

- options、selectedIndex、size

- 常用方法

- add(option)、remove(index)

- 事件

- onchange

f7fad068bdad9ec9c0cc13b48d431eeb.png

Option 对象

- Option 对象代表 HTML 表单中下拉列表中的一个选项

- 标签表示一个 Option 对象

- 创建对象

- var o = new Option(text,value);

- 常用属性

- index、text、value、selected

d34187ab3d1ba238a95eba020ac10bce.pnge2bf821656fe8d783e6ca1352810ac91.pnge76e61711af1c74bee62f048b1d7f92c.png

总结:本章内容主要介绍了 JavaScript HTML DOM(HTML DOM概述、常用HTML DOM对象、HTML表单)

本文出自 “会飞的蚂蚁” 博客,谢绝转载!

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值