DOM访问HTML元素的方式,DOM访问表单控件的常用属性和方法,DOM访问列表框、下拉菜单的常用属性,DOM访问表格子元素的常用属性和方法,DOM对HTML元素的增删改操作
DOM访问HTML元素的方式
为了动态地修改HTML元素,须先访问HTML元素。DOM主要提供了两种方式来访问HTML元素:
- 根据ID访问HTML元素:通过document对象调用getElementById()方法来查找具有唯一id属性值的元素。
- 利用节点关系访问HTML元素。常用的属性和方法如下:
parentNode |
返回当前节点的父节点 |
previousSibling |
返回当前节点的前一个兄弟节点 |
nextSibling |
返回当前节点的后一个兄弟节点 |
childNodes |
返回当前节点的所有子节点 |
firstChild |
返回当前节点的第一个子节点 |
lastChild |
返回当前节点的最后一个子节点 |
getElementsByTagName(tagName) |
返回当前节点的具有指定标签名的所有子节点 |
DOM访问表单控件的常用属性和方法如下:
action |
返回该表单的提交地址 |
elements |
返回表单内全部表单控件所组成的数组,通过数组可以访问表单内的任何表单控件。 |
length |
返回表单内表单域的个数 |
method |
返回表单内的method属性,主要有get和post两个值 |
target |
确定提交表单时的结果窗口,主要有_self、_blank、_top等 |
reset()、submit() |
重置表单和确定表单方法 |
在elments返回的数组中访问具体的表单控件语法如下:
.elements[index] |
返回该表单中第index个表单控件 |
.elements[elementName] |
返回表单内id或name为elementName的表单控件 |
.elementName |
返回表单内id或name为elementName的表单控件 |
DOM访问列表框、下拉菜单的常用属性如下:
form |
返回列表框、下拉菜单所在的表单对象 |
length |
返回列表框、下拉菜单的选项个数 |
options |
返回列表框、下拉菜单里所有选项组成的数组 |
selectedIndex |
返回下拉列表中选中选项的索引 |
type |
返回下拉列表的类型,多选的话返回select-multiple,单选返回select-one |
使用options[index]返回具体选项所对应的常用属性:
defaultSelected |
返回该选项默认是否被选中 |
index |
返回该选项在列表框、下拉菜单中的索引 |
selected |
返回该选项是否被选中 |
text |
返回该选项呈现的文本 |
value |
返回该选项的value属性值 |
DOM访问表格子元素的常用属性和方法如下:
caption |
返回表格的标题对象 |
rows |
返回该表格里的所有表格行(数组) |
通过rows[index]返回表格指定的行所对应的属性:
cells |
返回该表格行内所有的单元格组成的数组 |
通过cells[index]返回表格指定的列所对应的属性:
cellIndex |
返回该单元格在表格行内的索引值 |
DOM对HTML元素的增删改操作
DOM创建节点的方法:
document.createElement(Tag),Tag必须是合法的HTML元素
DOM复制节点的方法:
节点cloneNode(boolean deep),当deep为true时,表示复制当前节点以及当前结点的全部后代节点。为false时,只复制当前节点。
DOM添加、删除节点的方法:
appendChild(newNode) |
将newNode添加成当前节点的最后一个子节点 |
insertBefore(newNode,refNode) |
将refNode节点之前插入newNode节点 |
replaceChild(newNode,oldNode) |
将oldNode节点替换成newNode节点 |
removeChild(oldNode) |
将oldNode子节点删除 |
- 比特币退伍后,币圈新宠以特币,踏上了高端市场的远征之路
- 性能测试之gatling详解
- PHP中用PDO查询Mysql来避免SQL注入风险的方法
- 如果你再单身100年,你可能就会有一位机器人女友与你结婚生子
- 域名peza.com结拍 持有者身份未明
- 不用@微信官方,教你写头像戴圣诞帽的程序
- 云数据-欲练神功必先写文档
- ALM损坏后的恢复步骤
- 2020年180万人将被人工智能取代 制造业首当其冲
- SEO之404页面应该怎么做?
- AI到底是个什么鬼?
- Python数据挖掘学习路线是什么?学习Python学什么?
- 人脸智慧时尚店落地广深,微信支付赋能智慧零售
- 基层医疗破局关键:从医疗SaaS三大未来趋势说起
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例