首页 > 代码库 > HTML DOM 实例

HTML DOM 实例

2024-10-24 17:40:39   211人阅读

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=http://www.mamicode.com/"新文档" 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=http://www.mamicode.com/"猫">
狗:
<input name="x" type="radio" value=http://www.mamicode.com/"狗">
<input type="button" onclick="getElements()" value=http://www.mamicode.com/"多少名称为 ‘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=http://www.mamicode.com/"多少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属性)

HTML DOM 实例


联系
我们