当前位置: 首页 > 网络学院 > 客户端脚本教程 > JavaScript > JS DOM 实例

JavaScript
JS 字符串
JS Date
JS数组,JS Array
JS Boolean
JS Math
JS HTML DOM
JS Browser
JS Cookies
JS 校验
JS Animation
JS Image Maps
JS Timing
JS 建立对象
JS 摘要
JS 实例
JS 对象实例
JS DOM 实例
JS数组对象参考
JS布尔对象参考
JS日期对象参考

JavaScript 中的 JS DOM 实例


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-03-01   浏览: 756 ::
收藏到网摘: n/a

Examples of using JavaScript to access and manipulate the HTML DOM objects.
举例中使用了JavaScript来访问并操作HTML DOM对象


Anchor Object
锚记对象

Change text, URL, and target attribute of a link
改变连接的文字,URL和目标属性
Using focus() and blur()
使用focus()和blur()
Add an accessKey to a link
为一个连接加上访问按键(accessKey)

Document Object
文档对象

Write text to the output
输出一段文字
Write text with formatting to the output
格式化输出的文字
Return the title of a document
返回文档的标题
Return the URL of a document
返回文档的URL
Return the referrer of a document
返回文档来源
Return the domain name of the document's server
返回文档所在的服务器域名
Use getElementById()
使用getElementById()
Use getElementsByName()
使用 getElementsByName()
Open a new document, specify MIME type and add some text
打开一个新的文档,指定MIME类型并加上一些文字
Return the number of anchors in a document
返回文档中的锚记数量
Return the innerHTML of the first anchor in a document
返回文档中第一个锚记的innerHTML信息
Count the number of forms in a document
计算文档中有多少个表单
Access an item in a collection
访问集合中的一个项目
Count the number of images in a document
计算文档中有多少张图片

Event Object
事件对象

Which mouse button was clicked?
鼠标按了哪个键
What are the coordinates of the cursor?
鼠标的坐标?
What is the unicode of the key pressed?
所按下键的unicode值
What are the coordinates of the cursor, relative to the screen?
相对于屏幕鼠标的坐标
What are the coordinates of the cursor?
鼠标的坐标2
Was the shift key pressed?
shift键有没有按?
Which element was clicked?
哪个元素被点击了?
Which eventype occured?
哪个事件类型发生了?

Form and Form Input Objects
表单以及表单输入对象

View and change the action URL of a form
查看并改变表单的action URL
View the method that is to be used when sending form data
查看表单发送数据的方式
Alert id, type, and value of a Button object + disable button
提示Button对象的值,类型和id,之后让这个按钮无效
Check and uncheck a checkbox
复选框的选中与取消选中
Checkboxes in a form
表单中的复选框
Checkbox - If the user clicks in a checkbox, the content of the text fields are converted to uppercase.
复选框 - 如果用户选中复选框,文字区域的内容就会转换成大写
Radio buttons
单选按钮
Reset a form
复位表单
Submit a form
提交表单
Form validation
表单校验
Set focus to an input field when the page loads
当页面加载后聚焦到一个输入框内
Select the content of an input field
选择一个输入框里的内容
Dropdown list in a form
表单中的下拉列表
Another dropdown list
另外一中下拉列表
A dropdown menu
下拉菜单
Jump to the next field when the current field's maxlength has been reached
当当前的输入区域达到了最大的长度就会自动转到下一个区域
Add accessKeys to form fields
为表单里的区域加入访问按键(accessKeys)

Frame, Frameset, 和 IFrame 对象

Resizable and not resizable frames
可改变大小和不可改变大小的框架
Frames with and without scrollbars
带滚动条和不带滚动条的框架
Change the source / URL of two frames
改变两个框架的URL/来源
Break out of a frame
脱离出框架
Update two iframes
更新两个内联框架

Image Object
图片对象

Change the height and width of an image
改变图象的高度和宽度
Change the src of an image
改变图象的src

Location Object
定位对象

Send the client to a new location / URL
将用户转移到一个新的URL/地址
Reload a page
重新加载页面
Break out of a frame
脱离框架
Anchors array - This example opens two windows. The first window contains four buttons and the second window defines four anchors from 0 to 3. When a button is clicked in the first window, the onclick event handler goes to the specified anchor in the second window.
这个举例将打开两个窗口。第一个窗口包含四个按钮,第二个窗口定义了四个锚记(从0到3)当第一个窗口的按钮点击后,第二个窗口会响应这个事件转移到相应的锚记上。

Navigator Object
导航对象

Detect the visitor's browser and browser version
测出访问者的浏览器以及浏览器版本
More details about the visitor's browser
有关访问者浏览器更为详细的信息
All details about the visitor's browser
有关访问者浏览器的所有详细信息
Alert user, depending on browser
根据浏览器给用户不同的提示

Option 和 Select 对象

Disable and enable a dropdown list
让下拉列表可用/不可用
Get the id of the form that contains the dropdown list
得到包含下拉列表表单的id
Get the number of options in the dropdown list
得到下拉列表中可选项的数量
Turn the dropdown list into a multiline list
将下拉列表换成多行列表
Select multiple options in a dropdown list
让多行列表可以多选
Alert the selected option in a dropdown list
提示下拉列表中选中的项目
Alert the index of the selected option in a dropdown list
提示所选项目在下拉列表中处于第几位
Change the text of the selected option
改变选中项目的文字
Remove options from a dropdown list
从下拉列表中删除可选项目

Screen 对象

Detect details about the client's screen
测出用户的显示屏幕信息

Table, TableHeader, TableRow, TableData 对象

Change the width of a table border
改变表格边框的宽度
Change the cellPadding and cellSpacing of a table
改变表格的单元格填充和单元格间距
Specify frames of a table
指定表格的框架
Specify rules for a table
指定表格的规格
InnerHTML of a row
表格行中innerHTMML
InnerHTML of a cell
单元格中innerHTML
Create a caption for a table
为表格建立标题
Delete rows in a table
删除表格中的行
Add rows to a table
给表格加入行
Add cells to a table row
给表格行加入单元格
Align the cell content in a table row
对齐表格行中的单元格内容
Vertical align the cell content in a table row
垂直对齐表格行中的单元格
Align the cell content in a single cell
对齐单个单元内容
Vertical align the cell content in a single cell
垂直对齐单个单元内容
Change the content of a table cell
改变表格单元的内容
Change the colspan of a table row
改变表格行跨度

Window 对象

Display an alert box
显示一个提示(警告)框
Alert box with line-breaks
警告框里的文字换行
Display a confirm box
显示确认框
Display a prompt box
显示信息提交框
Open a new window when clicking on a button
点一个按钮后打开一个新窗口
Open a new window and control its appearance
打开新窗口并控制它的状态
Open multiple windows with one click
按一个按钮打开多个窗口
Send the client to a new location / URL
将用户转移到新的地址/URL
Reload a page
重新加载页面
Write some text in the windows status bar
在窗口的状态栏上写点文字
Print a page
打印页面
Break out of a frame
脱离框架
Resize a window
重设窗口大小
Resize a window to a specified size
指定窗口的大小
Scroll the window
窗口带滚动条
Scroll the window to a specified position
让窗口滚动到指定的位置上
Simple timing
简单的timing
Another simple timing
另一种简单的timing
Timing event in an infinite loop
无限循环中的Timing事件
Timing event in an infinite loop - with a Stop button
无限循环中的Timing事件 - 带停止按钮
A clock created with a timing event
用timing事件建立起来的时钟
Create a pop-up
创建弹出框

评论 (0) All

登陆 | 还没注册?