HTML DOM 实例总结

警告
请使用 document.write() 仅仅向文档输出写内容。
如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖:

.

Anchor 对象

更改一个链接的文本、URL 以及 target

代码图示

使用 focus() 和 blur()

代码图示

向超链接添加快捷键

Paste_Image.png

Document 对象

使用 document.write() 向输出流写文本

<script type="text/javascript">
  document.write("Hello World!")
</script>

使用 document.write() 向输出流写 HTML

<script type="text/javascript">
  document.write("<h1>Hello World!</h1>")
</script>

返回当前文档的标题

Paste_Image.png

返回当前文档的 URL

<html>
  <body>
    该文档的 URL 是:
    <script type="text/javascript">
      document.write(document.URL)
    </script>
  </body>
</html>

返回当前文档的 referrer

<html>
  <body>
    <p>referrer 属性返回加载本文档的文档的 URL。</p>
    本文档的 referrer 是:
    <script type="text/javascript">
      document.write(document.referrer)
    </script>
  </body>
</html>

返回下载当前文档的服务器域名
使用 getElementById()

<html>
  <body>
    本文档的域名是:
    <script type="text/javascript">
      document.write(document.domain)
    </script>
  </body>
</html>

使用 getElementsByName()

var x=document.getElementById("myHeader")

打开一个新的文档,添加一些文本,然后关闭它。

<head>
  <script type="text/javascript">
    function createNewDoc()
      {
      var newDoc=document.open("text/html","replace");
      var txt="<html><body>学习 DOM 非常有趣!</body></html>";
      newDoc.write(txt);
      newDoc.close();
      }
  </script>
</head>

<body>
  <input type="button" value="打开并写入一个新文档" onclick="createNewDoc()">
</body>

返回文档中锚的数目
返回文档中第一个锚的 innerHTML
计算文档中表单的数目
访问集合中的项目
计算文档中的图像数目

Event 对象

哪个鼠标按钮被点击?
光标的坐标是?
被按的按键的 unicode 是?
相对于屏幕,光标的坐标是?
shift 键被按了吗?
哪个元素被点击了?
哪个事件类型发生了?

Form 和 Input 对象

更改表单的 action 属性
返回向服务器发送数据的 HTTP 方法
提示按钮的 id 和 类型 + 禁用按钮
选定以及不选定 checkbox
一个表单中的若干个 checkbox
Checkbox - 把文本转换为大写
使用单选按钮中的 value 属性
重置表单
提交表单
验证表单
设置和移开文本域上的焦点
选取文本域中的内容
表单中的下拉列表
另一个下拉列表
当达到文本域的最大字符数时跳至下一个域
为若干表单域添加快捷键

Frame、Frameset 以及 IFrame 对象

可调整大小和不可调整大小的框架
带有滚动条和不带有滚动条的框架
更改两个框架的源
跳出框架
更改两个框架的源

Image 对象

更改图像的高度和宽度
更改图像的 src

Location 对象

把用户带到一个新的地址
重新加载文档
跳出框架
锚的数组

Navigator

检测访问者的浏览器和版本号
有关访问者的浏览器的更多信息
有关访问者的浏览器的全部细节
根据浏览器来提醒用户

Option 和 Select 对象

禁用并启用下拉列表
取得包含该下拉列表的表单的 id
取得下拉列表中选项的数目
更改下拉列表中的可见行数
选择下拉列表中的多个选项
输出下拉列表中所有选项的文本
取得下拉列表中所选的选项的索引位置
更改被选选项
从下拉列表中删除选项

Screen 对象

检测有关客户机的屏幕的细节

Table、TableHeader、TableRow、TableData 对象

更改表格边线的宽度
更改表格的 cellPadding 和 cellSpacing
规定表格的外部边框
规定表格的内部边线
某一行的 InnerHTML
表格单元的 InnerHTML
为表格创建了一个标题
从表格删除行
向表格添加新行 - 然后向其添加内容
向一个已有的行中插入单元格
对齐行中的单元格内容
垂直对齐行中的单元格内容
对齐单元格中的内容
垂直对齐单元格中的内容
更改表格单元格中的内容
更改表元横跨的列数

Window 对象

显示对话框
显示带有折行的对话框
显示确认框
显示提示框
通过点击按钮来打开一个窗口
打开一个新窗口,并控制其外观
通过一次点击打开多个窗口
把用户带到一个新的地址
重新加载文档
在窗口的状态栏设置文本
打印页面
跳出框架
调整窗口的大小
把窗口调整为指定的大小
滚动文档
把窗口滚动到指定的位置
简单的计时
另一个简单的计时
无穷循环中的计时
无穷循环中的计时 - 带有一个停止按钮
一个时钟
创建 pop-up

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 8,672评论 1 41
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,221评论 4 61
  • 端午节前一天,骄阳炙烤着美丽的台儿庄古城。在复兴广场上,旱地龙舟赛即将开始。中央电视台的现场直播,记者主持人的热情...
    教育经典撷粹阅读 10,662评论 0 1
  • 1.注册友盟,申请key 2.微信申请应用 3.配置ATS和白名单 4.wb126663232 = wb+微信申请...
    sunmumu1222阅读 1,430评论 0 0
  • 医案7~11讲石膏之性,又善清瘟疹之热,善清咽喉之热,善清头面之热。 外感痰喘,宜投《金匱》小青龙...
    归匿阅读 1,904评论 0 0