02: DOM 实例

1.1 Event 对象

<body>
    <a id="myAnchor" href="http://www.microsoft.com">访问 Microsoft</a>
    <input type="button" onclick="changeLink()" value="改变链接">

    <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"
        }
    </script>
</body>

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

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

    <script type="text/javascript">
        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>
</body>

哪个鼠标按钮被点击？

<body onmousedown="show_coords(event)">
    <p>请在文档中点击。一个消息框会提示出鼠标指针的 x 和 y 坐标。</p>
    <script type="text/javascript">
        function show_coords(event) {
            x=event.clientX;
            y=event.clientY;
            alert("X 坐标: " + x + ", Y 坐标: " + y)
        }
    </script>
</body>

光标的坐标是？

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

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

被按的按键的 unicode 是？

<body onmousedown="isKeyPressed(event)">
    <p>在文档中点击某个位置。消息框会告诉你是否按下了 shift 键。</p>

    <script type="text/javascript">
        function isKeyPressed(event) {
          if (event.shiftKey==1) {
              alert("The shift key was pressed!")
            } else {
            alert("The shift key was NOT pressed!")
            }
          }
    </script>
</body>

shift 键被按了吗？

<body onmousedown="getEventType(event)">
    <p>在文档中点击某个位置。消息框会提示出被触发的事件的类型。</p>
    <script type="text/javascript">
        function getEventType(event) {
          alert(event.type);
        }
    </script>
</body>

哪个事件类型发生了？

<body>
    <div>
        <textarea placeholder="输入咨询内容" class="my_msg" onkeydown="isEnter(event)" autofocus></textarea>
    </div>
    <script>
        // 在textarea里按下ctrl+回车，立即调用发送函数
        function isEnter(event) {
            if(event.keyCode==13 && event.ctrlKey){
                console.log("enter");
                // send_msg();
            }
        }
    </script>
</body>

ctrl+回车，立即调用发送函数

1.2 Form 和 Input 对象

<body>
    <form id="myForm" action="/old_path/">
    名称：<input type="text" value="米老鼠" />
    <input type="button" onclick="changeAction()" value="改变 action 属性并提交表单" />
    </form>
    <script type="text/javascript">
        function changeAction() {
            var x=document.getElementById("myForm");
            alert("Original action: " + x.action);
            x.action="/newpath/";
            alert("New action: " + x.action);
            x.submit()
        }
    </script>
</body>

更改表单的 action 属性

<body>
    <form id="myForm" method="post">
        名称：<input type="text" value="米老鼠" />
        <input type="button" onclick="showMethod()" value="显示 method" />
    </form>
    <script type="text/javascript">
        function showMethod() {
            var x=document.getElementById("myForm")
            alert(x.method)
        }
    </script>
</body>

获取提交数据方式：post、get等

<body>
    <form>
        <input type="checkbox" id="myCheck" />
        <input type="button" onclick="check()" value="选定复选框" />
        <input type="button" onclick="uncheck()" value="取消选定复选框" />
    </form>
    <script type="text/javascript">
        function check() {
            document.getElementById("myCheck").checked=true
        }
        function uncheck() {
            document.getElementById("myCheck").checked=false
        }
    </script>
</body>

选定以及不选定 checkbox

<body>
    <form id="myForm">
        姓名：<input type="text" size="20"><br />
        年龄：<input type="text" size="20"><br />
        <br />
        <input type="button" onclick="formReset()" value="重置">
    </form>

    <script type="text/javascript">
        function formReset() {
            document.getElementById("myForm").reset()
        }
    </script>
</body>

重置表单

<body>
    <form id="myForm" action="/login/" method="get">
        名：<input type="text" name="firstname" size="20"><br />
        姓：<input type="text" name="lastname" size="20"><br />
        <br />
        <input type="button" onclick="formSubmit()" value="提交">
    </form>

    <script type="text/javascript">
        function formSubmit(){
            document.getElementById("myForm").submit()
        }
    </script>
</body>

提交表单

<body>
    <form action="/login/" onsubmit="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>

    <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>
</body>

验证表单

1.3 Image 对象

<body>
    <img id="compman" src="/static/aa.png" />
    <br /><br />
    <input type="button" onclick="changeSize()" value="改变图像的高度和宽度">

    <script type="text/javascript">
        function changeSize() {
            document.getElementById("compman").height="270";
            document.getElementById("compman").width="164"
        }
    </script>
</body>

更改图像的高度和宽度

<body>
    <img id="myImage" src="/static/aa.png" />
    <br /><br />
    <input type="button" onclick="changeSrc()" value="改变图像">

    <script type="text/javascript">
        function changeSrc() {
            document.getElementById("myImage").src="/i/eg_smile.gif"
        }
    </script>
</body>

更改图像的 src