HTML DOM 实例

Document 对象

返回文档中锚的数目

document.write(document.anchors.length);//document会覆盖原网页

返回文档中第一个锚的 innerHTML

document.write(document.anchors[0].innerHTML);

返回文档中表单的数目

document.write(document.forms.length);

返回文档中第一个表单的名字

document.write(document.forms[0].name);

返回文档中的图像数

document.write(document.images.length);

返回文档中第一个图像的ID

document.write(document.images[0].id);

返回文档中的链接数

document.write(document.links.length);

返回文档中的第一个链接的ID

document.write(document.links[0].id);

返回文档中的所有cookies的名称/值对

document.write(document.cookie);

返回加载的文档的服务器域名

document.write(document.domain);

返回文档的最后一次修改时间

document.write(document.lastModified);

返回加载的当前文档的URL

document.write(document.referrer);

返回文档的标题

document.write(document.title);

返回文档的完整的URL

document.write(document.URL);

打开输出流,向流中输入文本??????

<script>
function createDoc(){
    var doc=document.open("text/html","replace");
    var txt="<!DOCTYPE html><html><body>学习 HTML DOM 很有趣!</body></html>";
    doc.write(txt);
    doc.close();
}
</script>
</head>

<body>
<input type="button" value="新文档" onclick="createDoc()">
</body>

write() 和 writeln()的不同

writeln()方法在每个语句后面新增一行

用指定的ID弹出一个元素的innerHTML

<head>
<script>
function getValue(){
  var x=document.getElementById("myHeader");
  alert(x.innerHTML);
}
</script>
</head>
<body>

<h1 id="myHeader" onclick="getValue()">点击我!</h1>

</body>

用指定的Name弹出元素的数量

function getElements(){
    var x=document.getElementsByName("x");
    alert(x.length);
}
</script>
</head>
<body>

猫:
<input name="x" type="radio" value="猫">
狗:
<input name="x" type="radio" value="狗">
<input type="button" onclick="getElements()" value="多少名称为 ‘x‘的元素?">

用指定的tagname弹出元素的数量

<script>
function getElements(){
  var x=document.getElementsByTagName("input");
  alert(x.length);
}
</script>
</head>
<body>

<input type="text" size="20"><br>
<input type="text" size="20"><br>
<input type="text" size="20"><br><br>
<input type="button" onclick="getElements()" value="多少input元素?">

</body>

Anchor 对象

返回和设置链接的charset属性

返回和设置链接的href属性

返回和设置链接的hreflang属性

返回一个锚的名字

返回当前的文件和链接的文档之间的关系

改变链接的target属性

返回一个链接的type属性的值

Area 对象

返回图像映射某个区域的替代文字

返回图像映射某个区域的坐标

返回一个区域的href属性的锚部分

返回的主机名:图像映射的某个区域的端口

返回图像映射的某个区域的hostname

返回图像映射的某个区域的port

返回图像映射的某个区域的href

返回图像映射的某个区域的pathname

返回图像映射的某个区域的protocol

返回一个区域的href属性的querystring部分

返回图像映射的某个区域的shape

返回图像映射的某个区域的target的值

Base 对象

返回页面上所有相对URL的基URL

返回页面上所有相对链接的基链接

Button 对象

当点击完button不可用

返回一个button的name

返回一个button的type

返回一个button的value

返回一个button所属表的ID

Form 对象

返回一个表单中所有元素的value

返回一个表单acceptCharset属性的值

返回一个表单action属性的值

返回表单中的enctype属性的值

返回一个表单中元素的数量

返回发送表单数据的方法

返回一个表单的name

返回一个表单target属性的值

重置表单

提交表单

Frame/IFrame 对象

对iframe排版

改变一个包含在iframe中的文档的背景颜色

返回一个iframe中的frameborder属性的值

删除iframe的frameborder

改变iframe的高度和宽度

返回一个iframe中的longdesc属性的值

返回一个iframe中的marginheight属性的值

返回一个iframe中的marginwidth属性的值

返回一个iframe中的name属性的值

返回和设置一个iframe中的scrolling属性的值

改变一个iframe的src

Image 对象

对image排版

返回image的替代文本

给image加上border

改变image的高度和宽度

设置image的hspace和vspace属性

返回image的longdesc属性的值

创建一个链接指向一个低分辨率的image

返回image的name

改变image的src

返回一个客户端图像映射的usemap的值

Event 对象

哪个鼠标键被点击了?

被按下的键盘键的keycode?

鼠标的坐标?

鼠标相对于屏幕的坐标?

shift键被按下了吗?

哪个元素被按下了?

哪个事件发生了?

Option 和 Select 对象

禁用和启用下拉列表

获得有下拉列表的表单的ID

获得下拉列表的选项数量

将下拉列表变成多行列表

在下拉列表中选择多个选项

弹出下拉列表中所有选项

弹出下拉列表中被选中的选项的索引

改变下拉列表中被选中的选项的文本

删除下拉列表中的选项

Table, TableHeader, TableRow, TableData 对象

改变表格边框的宽度

改变表格的cellpadding和cellspacing

指定表格的frame

为表格指定规则

一个行的innerHTML

一个单元格的innerHTML

为表格创建一个标题

删除表格中的行

添加表格中的行

添加表格行中的单元格

单元格内容水平对齐

单元格内容垂直对齐

对单个单元格的内容水平对齐

对单个单元格的内容垂直对齐

改变单元格的内容

改变单元格横跨的列数(colspan属性)

时间: 2024-11-05 16:33:52

HTML DOM 实例的相关文章

JS+DOM实例一:鼠标滑动图片

经常,我们在浏览各种网页的时候,都会有各种动画效果展示,像下图所示的是很多网上商城常用的货品展示方式,同类的货品并排展现在窗口上,用户如果看中了哪一款商品想要查看详情的话,只要将鼠标放上该商品的区域,原本折叠起来的商品便会自动展开,详情便会展现在用户面前,而这一动画,就是利用了DOM+JS结合来实现的,今天的小练习就是要实现这个效果. 首先,先将页面基本的框架用html实现,将四张图封装在了一个名为“container”的div块中 1 <!doctype html> 2 <meta c

HTML DOM 实例-Document 对象

使用 document.write() 向输出流写文本 <html><body> <script type="text/javascript">document.write("Hello World!")</script> </body></html> 使用 document.write() 向输出流写 HTML <html><body> <script type=

Dom实例:数据自增及搜索框

数据自增 功能:当点击add按扭后,div标签中的数据自动+1,实现网页的动态化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="kong">孔扎根的博文</div> &l

一个简单的DOM实例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id ='id1'>id1</div><form id='form' action="/check/" method=&quo

dom实例

1.实现在select下拉选项中添加和删除 <body> <input type="text" id="r1" /> <input type="button" value="添加" id="btn1"/> <select id="s1" size="7"> </select> <input type=&

js的dom测试及实例代码

js的dom测试及实例代码 一.总结 一句话总结: 1.需要记得 创建 标签和创建文本节点都是document的活:document.createTextNode("Rockets的姚明"); 2.appendChild就是 标签 都可以干的活:document.body.appendChild(hr1); 1.需要记得 创建 标签和创建文本节点都是document的活? var div1 = document.createElement("div"); var t

JQuery 学习总结及实例 !! (转载)

出自 new:http://www.jianshu.com/users/1967b163cb61/latest_articles 1.JQuery简介 普通JavaScript的缺点:每种控件的操作方式不统一,不同浏览器下有区别,要编写跨浏览器的程序非常麻烦.因此出现了很多对JavaScript的封装库,比如Prototype.Dojo.ExtJS.JQuery等,这些库对JavaScript进行了封装,简化了开发.这些库是对JavaScript的封装,也就是咱们调用JQuery的一句函数,JQ

JavaScript--XML DOM

DOM (Document Object Model) 文档对象模型 1. document 文档 HTML XML 文件 (标记语言) <body> <div> <!-- --> <a href="#">wwww</a> </div> </body> 节点:将文档想成一个倒树, 每一个部分(根.元素.文本(内容), 属性, 注释)都是一节点. 根据 DOM,HTML 文档中的每个成分都是一个节点. D

揭秘DOM中data和nodeValue属性同步改变那些事

问题引发:最近在整理DOM系列的一些知识点,发现在DOM的某些接口API中,存在一些我想不通的现象.就随便举个例子吧:DOM文档模型中的文本节点,可以通过nodeValue或data属性访问文本节点的文本内容,而且在更新data的时候nodeValue也即时更新,反之亦然.不光是data或nodeVaulue有这种相互影响的关系,其他类型节点也有比如该改变document.title也会随之改变网页标题.当时想弄明白这在JS引擎中是怎么实现的,于是乎进行了以下分析:通过文本节点的原型链继承关系