DOM--HTML基础

本文档中第一个锚的innerHTML

<body>

<a name="first">第一个锚</a><br />
<a name="second">第二个锚</a><br />
<a name="third">第三个锚</a><br />
<br />

本文档中第一个锚的 InnerHTML 是:
<script type="text/javascript">
document.write(document.anchors[0].innerHTML)
</script>

 

点击了哪个鼠标按键

script type="text/javascript">
function whichButton(event)
{
var btnNum = event.button;
if (btnNum==2)  {     

      alert("您点击了鼠标右键!")
       }
else if(btnNum==0)   {
      alert("您点击了鼠标左键!")
      }
else    {
     alert("您点击了" + btnNum+ "号键,我不能确定它的名称。");
     }
}
</script>
</head>

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

 

 

<script type="text/javascript">
function whichElement(e)
{
var targ
if (!e) var e = window.event
if (e.target) targ = e.target
else if (e.srcElement) targ = e.srcElement
if (targ.nodeType == 3) // defeat Safari bug
   targ = targ.parentNode
var tname
tname=targ.tagName
alert("You clicked on a " + tname + " element.")
}
</script>
</head>

<body οnmοusedοwn="whichElement(event)">
<p>在文档中点击某个位置。消息框会提示出您所点击的标签的名称。</p>

<h3>这是标题</h3>
<p>这是段落。</p>
<img src="/i/eg_mouse2.jpg" />
</body>

 

 

 

<script type="text/javascript">
function whichButton(event)
{
alert(event.keyCode)
}

</script>
</head>

<body οnkeyup="whichButton(event)">
<p><b>注释:</b>在测试这个例子时,要确保右侧的框架获得了焦点。</p>
<p>在键盘上按一个键。消息框会提示出该按键的 unicode。</p>
</body>

 

 

function show_coords(event)
{
x=event.clientX
y=event.clientY
alert("X 坐标: " + x + ", Y 坐标: " + y)
}
</script>
</head>

<body οnmοusedοwn="show_coords(event)">

<p>请在文档中点击。一个消息框会提示出鼠标指针的 x 和 y 坐标。</p>

 

 

function coordinates(event)
{
x=event.screenX
y=event.screenY
alert("X=" + x + " Y=" + y)
}

</script>
</head>
<body οnmοusedοwn="coordinates(event)">

<p>
在文档中点击某个位置。消息框会提示出指针相对于屏幕的 x 和 y 坐标。
</p>

 

改变 action 属性并提交表单

function changeAction()
{
var x=document.getElementById("myForm")
alert("Original action: " + x.action)
x.action="/htmldom/index.asp"
alert("New action: " + x.action)
x.submit()
}
</script>
</head>
<body>

<form id="myForm" action="/i/eg_smile.gif">
名称:<input type="text" value="米老鼠" />
<input type="button" οnclick="changeAction()"  value="改变 action 属性并提交表单" />
</form>

 

选定取消复选框

function check()
    {    document.getElementById("myCheck").checked=true   }

function uncheck()
   {    document.getElementById("myCheck").checked=false    }
</script>
</head>

<body>
<form>
<input type="checkbox" id="myCheck" />
<input type="button" οnclick="check()" value="选定复选框" />
<input type="button" οnclick="uncheck()" value="取消选定复选框" />
</form>

 

 

function createOrder()
{    coffee=document.forms[0].coffee
     txt=""
     for (i=0;i<coffee.length;++ i)
    {     if (coffee[i].checked)
          {   txt=txt + coffee[i].value + " 1"    }
     }
    document.getElementById("order").value="您订购的咖啡带有: " + txt
}
</script>
</head>

<body>
<p>你喜欢怎么喝咖啡?</p>
<form>
<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>

 

转换为大写

function convertToUcase()
    {   document.getElementById("fname").value=document.getElementById("fname").value.toUpperCase()   }
</script>
</head>

<body>
<form name="form1">
名:<input type="text" id="fname" size="20" />
<br /><br />
转换为大写
<input type="checkBox" οnclick="if (this.checked) {convertToUcase()}">
</form>

 

设置焦点

function setFocus()
    {   document.getElementById('text1').focus()   }

<form>
<input type="text" id="text1" />     <br />
<input type="button" οnclick="setFocus()" value="设置焦点" />

 

使用单选按钮的value属性

<script type="text/javascript">
function check(browser)
   {   document.getElementById("answer").value=browser   }
</script>
</head>    <body>

<p>您喜欢哪款浏览器?</p>

<form>
<input type="radio" name="browser" οnclick="check(this.value)" value="Firefox">Firefox<br />
<input type="radio" name="browser" οnclick="check(this.value)" value="Netscape">Netscape<br />
<input type="radio" name="browser" οnclick="check(this.value)" value="Opera">Opera<br />  

<br />您喜欢的浏览器是:<input type="text" id="answer" size="20">
</form>

 

点击重置按钮就可以重置表单

function formReset()
    {   document.getElementById("myForm").reset()   }
</head>

<body>
<p>在下面的文本框中输入一些文本,然后点击重置按钮就可以重置表单。

            点提交按钮提交表单</p>

<form id="myForm">
姓名:<input type="text" size="20"><br />   <br />

<input  type="button"  οnclick="formSubmit()"  value="提交" >
<input  type="button" οnclick="formReset()" value="重置">
</form>

function formSubmit()
{
document.getElementById("myForm").submit()
}

<form id="myForm" action="/i/eg_smile.gif" method="get">
名:<input type="text" name="firstname" size="20"><br />  <br />
<input type="button" οnclick="formSubmit()" value="提交">

选定文本框中的内容

function selText()
{  document.getElementById("myText").select()  }
</head>    
<form>
<input size="25" type="text" id="myText" value="选定我吧!">
<input type="button" value="选择文本" οnclick="selText()">
</form>

 

表单中的下拉列表

function favBrowser()
{   var mylist=document.getElementById("myList")
document.getElementById("favorite").value=mylist.options[mylist.selectedIndex].text
}
</head>   <body>
<form>
请选择您喜欢的浏览器:
<select id="myList" οnchange="favBrowser()">
  <option>Internet Explorer</option>
  <option>Netscape</option>   <option>Opera</option>
</select>
<p>您喜欢的浏览器是:<input type="text" id="favorite" size="20"></p>
</form>

 

当达到文本域的最大字符数时跳到下一个域

function checkLen(x,y)
{  if (y.length==x.maxLength)   {
        var next=x.tabIndex
        if (next<document.getElementById("myForm").length)    {
               document.getElementById("myForm").elements[next].focus()
               }
         }
 }

</head> <body>
<p>这段脚本在达到文本框的最大长度时跳到下一个文本框:</p>

<form id="myForm">
<input size="3" tabindex="1" maxlength="3" οnkeyup="checkLen(this,this.value)">
<input size="2" tabindex="2" maxlength="2" οnkeyup="checkLen(this,this.value)">
<input size="3" tabindex="3" maxlength="4" οnkeyup="checkLen(this,this.value)">
</form>

 

 

下拉列表

function moveNumbers()   {
   var no=document.getElementById("no")
   var option=no.options[no.selectedIndex].text
   var txt=document.getElementById("result").value
   txt=txt + option
  document.getElementById("result").value=txt    }
</head>   <body>
<form>
请选择数字:<br />
<select id="no">
 <option>0</option>    <option>1</option>    <option>2</option>
</select>
<input type="button" οnclick="moveNumbers()" value="-->">
<input type="text" id="result" size="20">
</form>

 

更改两个框架的源

function changeSource()
     {   document.getElementById("frame1").src="/example/hdom/frame_c.html"   }
</head>  <body>
<iframe src="/example/hdom/frame_a.html" id="frame1"></iframe>  <br /><br />
<input type="button" οnclick="changeSource()" value="改变两个框架的 source">

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值