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

最新推荐文章于 2024-06-19 15:01:54 发布

q493383189

最新推荐文章于 2024-06-19 15:01:54 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/q493383189/article/details/72577904

版权

新增

<!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>

q493383189

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM-4 Element新增、修改、表单提交、定时器

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>DON练习1</title></head><body> <div id="container"> </div>  <!--如果返回false则不执行a
复制链接

扫一扫