dom学习

黄铜渣渣

于 2017-11-14 15:18:41 发布

阅读量158

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/u014330950/article/details/78530946

版权

javascript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>dom学习</title>
<script type="text/javascript">
//改变链接
function changeLink()
{
document.getElementById('myAnchor').innerHTML="访问 W3School"
document.getElementById('myAnchor').href="http://www.w3school.com.cn"
document.getElementById('myAnchor').target="_blank"
}
//输出文本
document.write("Hello World!");
//输出html
document.write("<h1>Hello World!</h1>");
//返回该文档的标题
var a =document.title;
//返回该文档的URL
var b =document.URL;
//本文档的域名
var c=document.domain;
//使用getname
function getElements()
  {
  var x=document.getElementsByName("myInput");
  alert(x.length);
  }
//你点击了鼠标哪个键
//οnmοusedοwn="whichButton(event)" 把这个放到body里就能用了
function whichButton(event)
{
var btnNum = event.button;
if (btnNum==2)
  {
  alert("您点击了鼠标右键！")
  }
else if(btnNum==0)
  {
  alert("您点击了鼠标左键！")
  }
else if(btnNum==1)
  {
  alert("您点击了鼠标中键！");
  }
else
  {
  alert("您点击了" + btnNum+ "号键，我不能确定它的名称。");
  }
}
//提示按钮的 id 和 类型 + 禁用按钮
function alertId()
{
var txt="Id: " + document.getElementById("myButton").id;
txt=txt + ", type: " + document.getElementById("myButton").type;
alert(txt);
document.getElementById("myButton").disabled=true;
}
//选定以及不选定 checkbox
function check()
{
document.getElementById("myCheck").checked=true
}

function uncheck()
{
document.getElementById("myCheck").checked=false
}
//一个表单中的若干个 checkbox
function createOrder()
{
//coffee=document.forms[0].coffee;
coffee=document.getElementById("orderform").coffee;
txt=""; 
for (i=0;i<coffee.length;++ i)
{
if (coffee[i].checked);
{
txt=txt + coffee[i].value + " ";
}
}
document.getElementById("order").value="您订购的咖啡带有： " + txt;
}
</script>
</head>

<body>
<a id="myAnchor" href="http://www.microsoft.com">访问 Microsoft</a>
<input type="button" οnclick="changeLink()" value="改变链接">
<script type="text/javascript">
document.write(a);
document.write(b);
</script>
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" οnclick="getElements()" value="名为 'myInput' 的元素有多少个？" />
<a name="first">第一个锚</a><br />
<a name="second">第二个锚</a><br />
<a name="third">第三个锚</a><br />
<br />

文档中锚的数目：
<script type="text/javascript">
document.write(document.anchors.length)
</script>
本文档中第一个锚的 InnerHTML 是：
<script type="text/javascript">
document.write(document.anchors[0].innerHTML)
</script>
<form name="Form1" id="Form1"></form>
<form name="Form2"></form>
<form name="Form3"></form>

<script type="text/javascript">
document.write("文档包含： " + document.forms.length + " 个表单。");
document.write("<p>第一个表单名称是：" + document.forms[0].name + "</p>");
document.write("<p>第一个表单名称是：" + document.getElementById("Form1").name + "</p>");
</script>
<img border="0" src="" />
<br />
<img border="0" src="" />
<br /><br />

<script type="text/javascript">
document.write("本文档包含：" + document.images.length + " 幅图像。")
</script>

<button id="myButton" onClick="alertId()">请点击我！</button>

<form>
<input type="checkbox" id="myCheck" />
<input type="button" οnclick="check()" value="选定复选框" />
<input type="button" οnclick="uncheck()" value="取消选定复选框" />
</form>
<p>你喜欢怎么喝咖啡？</p>
<form id="orderform">
<input type="checkbox" name="coffee" value="奶油">加奶油<br />
<input type="checkbox" name="coffee" value="糖块">加糖块<br />
<br />
<input type="button" οnclick="createOrder()" value="发送订单">
<br /><br />
<input type="text" id="order" size="50">
</form>
</body>
</html>