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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容

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