zoukankan      html  css  js  c++  java
  • DOM访问HTML元素的方式,DOM访问表单控件的常用属性和方法,DOM访问列表框、下拉菜单的常用属性,DOM访问表格子元素的常用属性和方法,DOM对HTML元素的增删改操作

    DOM访问HTML元素的方式

    为了动态地修改HTML元素,须先访问HTML元素。DOM主要提供了两种方式来访问HTML元素:

    1. 根据ID访问HTML元素:通过document对象调用getElementById()方法来查找具有唯一id属性值的元素。
    2. 利用节点关系访问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子节点删除

  • 相关阅读:
    Java 递归、尾递归、非递归、栈 处理 三角数问题
    vmware虚拟机迁移导致的eth0消失问题
    c语言输入输出
    改动虚拟机镜像的rootpassword
    面试题之变态跳台阶
    努力是种病:放慢节奏,才能快速奔跑(转)
    做技术到底可以做到哪种地步-技术为什么越走越窄 (转)
    wpf 客户端【JDAgent桌面助手】开发详解(三) 瀑布流效果实现与UI虚拟化优化大数据显示
    我为什么写博客(转)
    入行必读:互联网行业薪酬等级!看看你值多少钱?(转)
  • 原文地址:https://www.cnblogs.com/-lwl/p/10730436.html
Copyright © 2011-2022 走看看