HTML DOM 实例学习笔记

最新推荐文章于 2021-06-16 03:21:57 发布
最新推荐文章于 2021-06-16 03:21:57 发布
阅读量655 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chengzhangbiji/article/details/42234465
版权

1.更改一个链接的文本、URL、target

document.getElementById('myAnchor').innerHTML="访问 W3School"
document.getElementById('myAnchor').href="http://www.w3school.com.cn"
document.getElementById('myAnchor').target="_blank"
2. document.open()  ——打开一个新文档，并擦除当前文档的内容

语法

document.open(mimetype,replace)
参数描述
mimetype可选。规定正在写的文档的类型。默认值是 "text/html"。
replace可选。当此参数设置后，可引起新文档从父文档继承历史条目。

说明

该方法将擦除当前 HTML 文档的内容，开始一个新的文档，新文档用 write() 方法或 writeln() 方法编写。

提示和注释

重要事项：调用 open() 方法打开一个新文档并且用 write() 方法设置文档内容后，必须记住用 close 方法关闭文档，并迫使其内容显示出来。

注释：属于被覆盖的文档的一部分的脚本或事件句柄不能调用该方法，因为脚本或事件句柄自身也会被覆盖。

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

3.在文档中点击，提示点击的左中右哪个按键 

<html>
<head>
<script type="text/javascript">
function whichButton(event)
{
var btnNum = <strong>event.button</strong>;
if (btnNum==<strong>0</strong>)
  {
  alert("您点击了鼠标<strong>左</strong>键！")
  }
else if(btnNum==<strong>1</strong>)
  {
  alert("您点击了鼠标<strong>中</strong>键！")
  }
else if(btnNum==<strong>2</strong>)
  {
  alert("您点击了鼠标<strong>右</strong>键！");
  }
else
  {
  alert("您点击了" + btnNum+ "号键，我不能确定它的名称。");
  }
}
</script>
</head>

<body οnmοusedοwn="whichButton(event)">
<p>请在文档中点击鼠标。一个消息框会提示出您点击了哪个鼠标按键。</p>
</body>

</html>
4.HTML <form> 标签的 action 属性

action 属性规定当提交表单时，向何处发送表单数据

语法

<form action="value">
下面的表单拥有两个输入字段以及一个提交按钮，当提交表单时，表单数据会提交到名为 "form_action.asp" 的页面： 

<form action="form_action.asp" method="get">
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" /></p>
  <input type="submit" value="Submit" />
</form>

5.验证表单 

<html>
<head>
<script type="text/javascript">
function validate()
{
var at=document.getElementById("email").value.indexOf("@")
var age=document.getElementById("age").value
var fname=document.getElementById("fname").value
submitOK="true"

if (fname.length>10)
 {
 alert("名字必须小于 10 个字符。")
 submitOK="false"
 }
if (isNaN(age)||age<1||age>100)
 {
 alert("年龄必须是 1 与 100 之间的数字。")
 submitOK="false"
 }
if (at==-1) 
 {
 alert("不是有效的电子邮件地址。")
 submitOK="false"
 }
if (submitOK=="false")
 {
 return false
 }
}
</script>
</head>

<body>
<form action="/example/hdom/hdom_submitpage.html" οnsubmit="return validate()">
名字（最多 10 个字符）：<input type="text" id="fname" size="20"><br />
年龄（从 1 到 100）：<input type="text" id="age" size="20"><br />
电子邮件：<input type="text" id="email" size="20"><br />
<br />
<input type="submit" value="提交"> 
</form>
</body>

</html>

6.








绿叶儿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS DOM学习笔记
VivianHope的专栏
06-10 605
Array.prototype.slice()方法可将一个arguments对象转换为数组，也可将由结点的childNodes属性获取的类数组对象NodeList转换为数组：Array.prototype.slice.call(NodeList,0).结点属性： nodeType、nodeName、nodeValue; childNodes（返回一类数组对象，可通过下标访问其中的某个元素）、pare
HTML DOM 入门教程学习摘要笔记
抓更够
08-12 1323
个人学习HTML DOM教程时做的摘要笔记 时不时更新
document.write()/document.open()/document.close() 用法
pursuer211的专栏
03-26 5470
document.open() 功能：打开一个新文档，并擦除当前文档的内容。 语法：document.open(mimetype,replace) 参数： mimetype：可选。规定正在写的文档的类型。默认值是"text/html"。replace：可选。当此参数设置后，可引起新文档从父文档继承历史条目。 注1：open()方法将擦除当前HTML文档的内容，开始一个新的文档，新文档
html dom实例,HTML DOM 实例
weixin_35879493的博客
06-16 77
Document 对象返回文档中锚的数目document.write(document.anchors.length);//document会覆盖原网页返回文档中第一个锚的 innerHTMLdocument.write(document.anchors[0].innerHTML);返回文档中表单的数目document.write(document.forms.length);返回文档中第一个表单...
simple_html_dom（入门实例）
热门推荐
初出茅庐的一只猪~的博客
03-17 1万+
php解析html类库simple_html_dom（入门实例）本猪刚开始要做到一个月更一次博，毕竟自己也处于学习阶段，遇到好的例子在这里总结分享。今天要分享的是simple_html_dom,个人理解就是在php文件中编写和js中功能类似的可以控制html文件的代码。具体如下： 可以新建一个空的文件夹用来存放这个小实例。 1. 项目之前需要先下载用到的simple_html_dom类库，
JavaScript学习笔记之DOM操作实例分析
12-12
本文实例讲述了JavaScript学习笔记之DOM操作。分享给大家供大家参考，具体如下： 一、DOM概念 1. “D”:Docment,指的是文档 2. “O”：Object，指的是对象，在javascript有三种对象：用户定义对象、内建对象...
JavaScript学习笔记之DOM基础操作实例小结
12-08
JavaScript DOM（Document Object Model）是用于操作HTML和XML文档的标准接口。它允许程序员或脚本通过JavaScript语言来访问和修改文档结构、样式和内容。在本文中，我们将深入探讨JavaScript DOM基础操作，主要包括...
Vue Markdonwn学习笔记
11-17
Vue Markdown学习笔记主要涵盖了使用Vue.js框架与Markdown语法结合，以构建高效、可维护的文档和界面的知识。Vue.js是一个轻量级的前端JavaScript框架，它以组件化开发为核心，而Markdown则是一种简洁的标记语言，常...
sublime text3 安装packages
小白的成长笔记
12-14 1331
装了sublime text3 想用来写javascript，有些package对程序开发者来说，非常便捷。当然，这些我也只是听说，不过还是先装上吧。 1.传说中，Emmet是一个非常好用的插件，可以帮助您快速编写HTML和CSS代码,从而加速Web前端开发。所以一定要先装上。 安装方法： 1.下载emmet，https://github.com/sergeche/emmet-sublime
js构造函数、原型和实例之间关系图
小白的成长笔记
04-09 1326
天数计算器 JS
小白的成长笔记
12-26 1320
刚学了JS，想做个计算两个日期之间相差天数的东西，因为本人总是要算距离XX还有多少天。。 开始用很笨的方法写了一个，写完百度了一下，发现用 Date() 的话 几行代码就可以搞定。自己看语法的时候一扫而过，觉得会了，其实是不会的，至少在该用它的时候都想不到他有这个功能，这就是掌握类库的重要性吧。 先放上写的很笨的那种方法： index.html 天数计算器 天数计
【JS学习笔记】01.JS简介
小白的成长笔记
11-24 1141
1. JavaScript：写入 HTML 输出
JS w3school 实例验证 笔记
小白的成长笔记
12-26 940
1.onload——页面加载完成时执行 function message() { alert("该提示框是通过 onload 事件调用的。") } 2. document.write()——向页面写入元素 hello document.write("it is test01"); document.write("hello"); //这两句之间没有人
【JS学习笔记】03 try catch throw
小白的成长笔记
11-25 915
try 语句测试代码块的错误。catch 语句处理错误。throw 语句创建自定义错误. throw 语句允许我们创建自定义错误。 正确的技术术语是：创建或抛出异常（exception）。 如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。 语法 throw exception 异常可以是 JavaScript 字符串、数字、逻
【JS学习笔记】07 添加和删除节点（HTML 元素）
小白的成长笔记
12-01 727
创建新的 HTML 元素 如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。 实例 这是一个段落 这是另一个段落 var para=document.createElement("p"); var node=document.createTextNode("这是新段落。"); para.appendChild(node);
javascript实现简单的计算器
小白的成长笔记
12-15 720
computer function compute(){ str1=Number(document.getElementById("txt1").value); str2=Number(document.getElementById("txt2").value); comp=document.getElementById("select").value; var result
JS 实例笔记2
小白的成长笔记
12-26 661
1.为字符串添加样式 var txt="Hello World!" document.write("Big: " + txt.big() + "") //字体变大 document.write("Small: " + txt.small() + "") //小字体 document.write("Bold: " + txt.bold() + "") //加粗 document
【JS学习笔记】06 JavaScript HTML DOM 事件
小白的成长笔记
11-26 658
对事件做出反应 我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。 如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码： onclick=JavaScript HTML 事件的例子： 当用户点击鼠标时当网页已加载时当图像已加载时当鼠标移动到元素上时当输入字段被改变时当提交 HTML 表单时
web前端基础.pdf
07-12
"这是一份综合性的Web前端学习资料，涵盖了HTML5、...这份学习笔记为初学者和进阶者提供了一个全面的Web前端学习平台，从基础知识到高级特性，从理论到实践，帮助读者掌握前端开发的核心技能，并了解HTML5带来的创新。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值