美文网首页
2018-11-09 javascript 点击事件

2018-11-09 javascript 点击事件

作者: Andy_Lxh | 来源:发表于2018-11-09 17:37 被阅读0次

    改变内容(点击事件)

    document.getElementByID(“some id”):
    这个方法是 HTML DOM 中定义的,用于改变HTML中的内容。

    演示
    代码如下:

    <html>
    <body>
    <h1>我的第一段 JavaScript</h1>
    <p id="demo">
    JavaScript 能改变 HTML 元素的内容。
    </p>
    <script>
    function myFunction()
    {
    x=document.getElementById("demo");  // 找到元素
    x.innerHTML="Hello JavaScript!";    // 在id 是demo的标记那里显示"Hello JavaScript!";
    }
    </script>
    <button type="button" onclick="myFunction()">点击这里</button>
    </body>
    </html>
    

    Javascript 数组

    <!doctype html>
    <html>
    
        <head>
            <meta charset="utf-8">
            <title></title>
         <script type="text/javascript">
            var arr = [1,2,3,4,5];//整数数组
            //alert(arr);
            //alert(arr[4]);
            var arr2 = ["html","js","sql","java","test"];//字符串数组
            alert(arr2);
            alert(length);
         </script>
        </head>
        <body>
        </body>
    </html>
    

    作业练习

    增加段落(子节点):createElement
    删除段落(子节点):childNodes
    代码如下:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
            <script type="text/javascript">
                var i = 0;//统计添加按钮的点击次数
                function myfunction(){
                    i++;//i+1
                    var parent = document.getElementById("div1");//找到id等于div1的盒子
                    var child = document.createElement("p");//创建一个段落元素
                    var n = i+1;
                    child.innerText="这是第"+n+"个段落";//+n+   “+”起到拼接内容作用
                    parent.appendChild(child);
                }
                function remove(){
                    var parent = document.getElementById("div1");//找到div节点
                    var childs = parent.childNodes;//得到该节点里面的所有子节点
                    var count = childs.length;//获取该数组里面的元素个数
                    var lastnode=childs[count-1];//得到最后一个子节点(段落)
                    parent.removeChild(lastnode);
                }
            </script>
        </head>
        <body>
            <div id="div1">
                <p id="p001">我的第一段javascript</p>
            </div>
            <button type="button" onclick="myfunction()">创建一个新段落</button>       
            <button type="button" onclick="remove()">删除一个段落</button>
        </body>
    </html>
    

    效果如图:


    图片示例
    图片示例

    相关文章

      网友评论

          本文标题:2018-11-09 javascript 点击事件

          本文链接:https://www.haomeiwen.com/subject/omboxqtx.html