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属性
<body> <a id="w3s" charset="ISO-8859-1" <script> document.write("返回链接的charset: "); document.write(document.getElementById('w3s').charset); </script> </body>
返回和设置链接的href属性
document.write(document.getElementById('runoob').href);
返回和设置链接的hreflang属性(hreflang 属性用于指定被链接文档的语言)
document.write(document.getElementById('runoob').hreflang);
返回一个锚的名字
document.write(document.getElementById("c6").name);
返回当前的文件和链接的文档之间的关系
<body> <p><a id="func" rel="friend" href="http://www.functravel.com/">优惠航班</a></p> <script> document.write(document.getElementById("func").rel); </script> </body>
改变链接的target属性
document.getElementById('w3s').target="_blank";
返回一个链接的type属性的值
document.write(document.getElementById("runoob").type);
Area 对象
返回图像映射某个区域的替代文字
//<area id="venus" shape="circle" coords="124,58,8" alt="金星" href="venus.htm"> document.write(document.getElementById("venus").alt);
返回图像映射某个区域的坐标
//<area id="venus" shape="circle" coords="124,58,8" alt="金星" href="venus.htm">
document.write(document.getElementById("venus").coords);
返回一个区域的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
<form id="frm1" action="demo-form.php">//创建一个表单 第一个名字: <input type="text" name="fname" value="Dld"><br> 第二个名字: <input type="text" name="lname" value="Du"><br> <input type="submit" value="提交"> </form> <script> var x=document.getElementById("frm1");//获取表单 for (var i=0;i<x.length;i++){ document.write(x.elements[i].value); document.write("<br>"); }
返回一个表单acceptCharset属性的值
<form id="frm1" accept-charset="ISO-8859-1"> 第一个名字: <input type="text" name="fname" value="Donald"><br> 最后一个名字: <input type="text" name="lname" value="Duck"><br> </form> <script> document.write(document.getElementById("frm1").acceptCharset) </script>
返回一个表单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 对象
哪个鼠标键被点击了？
<body onmousedown="whichButton(event)">关键
<script>
function whichButton(event) { var btnNum = event.button; //关键 if (btnNum==2) { alert("您点击了鼠标右键！") } else if(btnNum==0) { alert("您点击了鼠标左键！") } else if(btnNum==1) { alert("您点击了鼠标中键！"); } else { alert("您点击了" + btnNum+ "号键，我不能确定它的名称。"); }
</script>
被按下的键盘键的keycode？
<script>
function whichButton(event){
alert(event.keyCode);
}
</script>
</head>
<body onkeyup="whichButton(event)">//关键
</body>
鼠标的坐标？
<script> function show_coords(event){ var x=event.clientX; var y=event.clientY; alert("X coords: " + x + ", Y coords: " + y); } </script> </head> <body> <p onmousedown="show_coords(event)">请在文档中点击。一个消息框会提示出鼠标指针的 x 和 y 坐标。</p> </body>
鼠标相对于屏幕的坐标？
<script type="text/javascript"> function coordinates(event){ x=event.screenX y=event.screenY alert("X=" + x + " Y=" + y) } </script> </head> <body onmousedown="coordinates(event)"> <p> 在文档中点击某个位置。消息框会提示出指针相对于屏幕的 x 和 y 坐标。 </p> </body>
shift键被按下了吗？
<script> function isKeyPressed(event){ if (event.shiftKey==1){ alert(" shift 键被按下!"); } else{ alert(" shift 键没被按下!"); } } </script> </head> <body onmousedown="isKeyPressed(event)"> <p>点击该段落，弹窗会提示是否按下 shift 键。</p> </body>
哪个HTML元素被按下了？
<script> function isKeyPressed(event){ if (event.shiftKey==1){ alert(" shift 键被按下!"); } else{ alert(" shift 键没被按下!"); } } </script> </head> <body onmousedown="isKeyPressed(event)"> <p>点击该段落，弹窗会提示是否按下 shift 键。</p> </body>
哪个事件发生了？
<script type="text/javascript"> function getEventType(event){ alert(event.type); } </script> </head> <body onmousedown="getEventType(event)"> <p>在文档中点击某个位置。消息框会提示你触发的事件类型。</p> </body>
Option 和 Select 对象
禁用和启用下拉列表
获得有下拉列表的表单的ID
获得下拉列表的选项数量
将下拉列表变成多行列表
在下拉列表中选择多个选项
弹出下拉列表中所有选项
弹出下拉列表中被选中的选项的索引
改变下拉列表中被选中的选项的文本
删除下拉列表中的选项
Table, TableHeader, TableRow, TableData 对象
改变表格边框的宽度
改变表格的cellpadding和cellspacing
指定表格的frame
为表格指定规则
一个行的innerHTML
一个单元格的innerHTML
为表格创建一个标题
删除表格中的行
添加表格中的行
添加表格行中的单元格
单元格内容水平对齐
单元格内容垂直对齐
对单个单元格的内容水平对齐
对单个单元格的内容垂直对齐
改变单元格的内容
改变单元格横跨的列数(colspan属性)
浙公网安备 33010602011771号