DOM-4 Element新增、修改、表单提交、定时器

来源：互联网发布：再也没有知乎编辑：程序博客网时间：2024/06/13 07:46

新增

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>DON练习1</title></head><body>    <div id="container">    </div>    <!--此处onclick事件return进行返回值判断-->    <!--如果返回false则不执行a标签对应的onclick事件-->    <a href="http://www.baidu.com" onclick="return AddElement();">        添加    </a>    <script>        function AddElement() {            var nid = document.getElementById('container');//            重写HTML//            var tag = "<input type='text' /><br />";//            nid.innerHTML = tag;//            添加HTML//            nid.insertAdjacentHTML('beforeBegin', tag);            var creatObj = document.createElement('a');            creatObj.href = "http://www.baidu.com";            creatObj.innerText = "百度";            var brObj = document.createElement('br')            nid.appendChild(creatObj);            nid.appendChild(brObj)//            console.log(creatObj);//            此处需返回值供判断            return false;        }    </script></body></html>

修改

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>DON练习1</title></head><body>    <div id="container" class="Long" style="font-size: 24px;color: #999;">        <!--此处onclick事件return进行返回值判断-->        <!--如果返回false则不执行a标签对应的onclick事件-->        <a href="http://www.baidu.com" onclick="return AddElement();">            添加        </a>    </div>    <script>        function AddElement() {            var nid = document.getElementById('container');//            name不是div的默认属性，无法通过.进行访问，故下面语句无效//            nid.name='999'            nid.id = 'Main';            nid.setAttribute('name', 'Jack');            nid.setAttribute('Xing', 'Chen');//            class特殊，访问时为className            nid.className = "Jack Chen";//            访问多级属性            nid.style.fontSize = "96px";            return false;        }    </script></body></html>

表单提交

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>DOM FORM</title></head><body>    <form id="form1" action="https://www.sogou.com/web" method="get">        <input name="query" type="text" />        <!--正常的提交表单-->        <!--<input type="submit" value="提交">-->        <!--通过JS提交-->        <div onclick="Submit();">提交</div>    </form>    <script type="text/javascript">        function Submit() {            document.getElementById('form1').submit();        }    </script></body></html>

定时器

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Welcome to Jack Chen's Homepage</title></head><body>    <input type="button" onclick="StopInterval();" value="Stop" />    <script>//        setInterval('操作', 间隔 毫秒)//        每隔2秒alert一次//        setInterval("alert('Out')", 2000)        obj1 = setInterval("Func()", 600);//        setTimeout()与setInterval一致，但是只执行一次//        对应的清除定时器//        clearTimeout()        function StopInterval() {//            清除定时器            clearInterval(obj1)        }        function Func() {            var te = document.title;            var fc = te.charAt(0)            var substr = te.substr(1,te.length);            var newtitle = substr + fc;            document.title = newtitle        }    </script></body></html>

阅读全文

0 0