dom实例

来源：互联网发布：做微商可以淘宝进货吗编辑：程序博客网时间：2024/05/16 04:58

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

<html><head><script type="text/javascript">    function changeLink(){        document.getElementById('myAnchor').innerHTML="访问我的主页";        document.getElementById('myAnchor').href="http://www.jianshu.com/users/6183038717af/timeline";        document.getElementById('myAnchor').target="_blank";    }</script></head><body><a id="myAnchor" href="http://www.microsoft.com">访问 Microsoft</a><input type="button" onclick="changeLink()" value="改变链接"><p>在本例中，我们改变超链接的文本和 URL。我们也改变 target 属性。target 属性的默认设置是 "_self"，这意味着会在相同的窗口中打开链接。通过把 target 属性设置为 "_blank"，链接将在新窗口中打开。</p></body></html>

输出流

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>输出流</title>    </head>    <body>        <script type="text/javascript">            document.write("<h1>test</h1>")            document.write("write输出流可以包含html");        </script>    </body></html>

document获取属性

<!doctype html><html lang="en"><head>    <meta charset="UTF-8" />    <title>get document attribute</title></head><body>    <script type="text/javascript">        //获取标题        document.write("title="+document.title+"<br>");        //获取url        document.write("URL=="+document.URL+"<br>");        //获取反链        document.write("referrer=="+document.referrer+"<br>");        //获取domain标签(根域名)        document.write("domain=="+document.domain+"<br>");    </script></body></html>

getElementById,getElementsByName

<!doctype html><html lang="en"><head>    <meta charset="UTF-8" />    <title>test</title>    <script type="text/javascript">        function getValue(){            alert(document.getElementById("clickEnable").innerHTML)        }        function sumOfInput(){            alert(document.getElementsByName("input1").length)        }    </script></head><body>      <!--dom获取id需要是唯一的-->    <h1 id="clickEnable" onclick="getValue()">click this</h1>        <input name="input1" type="text" placeholder="you guess num"/><br>        <input name="input1" type="text" placeholder="you guess num"/><br>        <input name="input1" type="text" placeholder="you guess num"/><br>          <input type="button" onclick="sumOfInput()" value="guess num"/></body></html>

atuo clock

<html><head><script type="text/javascript">function startTime(){var today=new Date()var h=today.getHours()var m=today.getMinutes()var s=today.getSeconds()// add a zero in front of numbers<10m=checkTime(m)s=checkTime(s)document.getElementById('txt').innerHTML=h+":"+m+":"+st=setTimeout('startTime()',500)}function checkTime(i){if (i<10)   {i="0" + i}  return i}function timedMsg(){    //params1: code  params2:     //setTimeout() 只执行 code 一次    //如果要多次调用，请使用 setInterval() 或者让 code 再次调用 setTimeout()。var t=setTimeout("alert('3 seconds!')",3000)}</script></head><body onload="startTime()"><div id="txt"></div><br><input type="button" value="3 seconds Display timed alertbox!"onClick="timedMsg()"></body></html>

1 0