javascript基础——属性操作

HTML 的属性操作：读、写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS属性操作</title>
    <script>
    /*
        HTML 的属性操作：读、写
            属性名：
            属性值：
            
            读操作：获取、找到
            元素.属性名
            
            写操作：“添加”、替换、修改
            元素.属性名 = 新的值
            
    */
    window.onload = function(){
        // 获取元素
        var oText = document.getElementById('text1');
        var oSelect = document.getElementById('select1');
        var oBtn = document.getElementById('button1');

        // alert(oBtn.value);        // '按钮'
        // alert( oText.value );
        // alert( oSelect.value );
        
        // 字符串连接
        // oText.value    oSelect.value
        // '张三' +  '北京'     =>    '张三北京'
        // '张三' + '在' + '北京'     =>    '张三在北京'
        
        oBtn.onclick = function(){
            alert(oText.value + '在' + oSelect.value);
        };
    };
    </script>
</head>
<body>
    <input type="text" id="text1">
    <select name="" id="select1">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
        <option value="深圳">深圳</option>
    </select>
    <input type="button" id="button1" value="按钮" />

</body>
</html>

读操作：获取、找到
元素.属性名

写操作：“添加”、替换、修改
元素.属性名 = 新的值

innerHTML操作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>innerHTML</title>
</head>
<script>
    /*
        oP.innerHTML            => 读取p里面所有的html代码
        oP.innerHTML = 123;        => 替换p里面所有的html代码
    */
    window.onload = function(){
        // 获取元素
        var oText = document.getElementById('text1');
        var oBtn = document.getElementById('btn1');
        var oP = document.getElementById('p');

        oBtn.onclick = function(){

            oP.innerHTML = oText.value;
            oText.value = '';
        };
    };
</script>
<body>
    <input type="text" id="text1">
    <input type="button" value="按钮" id="btn1">
    <p id="p">这是一段文字</p>
</body>
</html>

oP.innerHTML => 　　　　读取p里面所有的html代码
oP.innerHTML = 123; => 替换p里面所有的html代码

 

posted @ 2015-04-11 10:19  波克比520  阅读(169)  评论(0)  编辑  收藏  举报