码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript DOM

时间:2016-05-25 18:13:28      阅读:116      评论:0      收藏:0      [点我收藏+]

标签:

DOM 

实例:

1、点击页面‘+1’按钮后,使页面上显示的数字加1

<body>
    <div>
        <div id="num">1</div>
        <input type="button" value="+1" onclick="add();"/> <!--点击button后,执行onclick后面的函数-->
    </div>
    <script type="text/javascript">
        function add(){     //定义add()函数
            var nid = document.getElementById(‘num‘); //获取id为num
            var text = nid.innerText; //获取标签的文本值
            text = parseInt(text);  //字符串转换成整型
            text +=1;
            nid.innerText=text;  //更改num的值
        }
    </script>
</body>

 

innerTEXT与innerHTML:

innerTEXT获取的是两个标签之间的纯text文本,不包含这其中的html标签

innerHTML获取的是两个标签之间的所有的内容,包括text和html标签

对于用户输入或选择的值,获取其中的值时使用value。

2、获取input 输入值

    <div>
        <input type="text" id="in1"/>
        <input type="button" value="getvalue" onclick="getvalue();"/>
    </div>

    <script type="text/javascript">
        function getvalue(){
            var obj = document.getElementById(‘in1‘);
            alert(obj.value);
        }
    </script>

3、搜索框实例

    <div>
        <input type="text" id="in2" value="input your search:" onfocus="Focus();" onblur="Blur();"/>
    </div>

    <script type="text/javascript">
        function Focus(){
            var nid = document.getElementById(‘in2‘);
            var value = nid.value;
            if(value == ‘input your search:‘){
                nid.value = ‘‘;
            }
        }
        function Blur(){
            var nid = document.getElementById(‘in2‘);
            var value = nid.value;
            if(value.trim()== ‘‘){         //.trim()去空格
                nid.value = ‘input your search:‘
            }
        }

    </script>

 

JavaScript DOM

标签:

原文地址:http://www.cnblogs.com/ahaii/p/5527952.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!