JavaScript中的元素获取与操作

js元素获取与操作

可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素，获取到的是一个html对象，然后将它赋值给一个变量，比如：

<script type="text/javascript">

    var oDiv = document.getElementById('div1');

</script>

....

<div id="div1">这是一个div元素</div>

上面的语句，如果把javascript写在元素的上面，就会出错，因为页面上从上往下加载执行的，javascript去页面上获取元素div1的时候，元素div1还没有加载，解决方法有两种：

第一种方法：将javascript放到页面最下边

....


<div id="div1">这是一个div元素</div>

....

<script type="text/javascript">

    var oDiv = document.getElementById('div1');

</script>
</body>

第二种方法：将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行，就不会出错了。

<script type="text/javascript">

    window.onload = function(){
        var oDiv = document.getElementById('div1');
    }

</script>

....

<div id="div1">这是一个div元素</div>

样式操作

标签对象.style.css属性名=“值” //改变标签对象的样式。

示例：id.style.color=“red”;

注意：属性名相当于变量名,所以css属性名中含有双拼词的(font-size)的减号要去掉，将后面的首字母大写。fontSize

文本操作

标签对象.innerHTML=“内容”；//在标签对象内放置指定内容

表单中值的操作

标签对象.value； //获取标签对象的value值

标签对象.value=”值“；//设置标签对象的value值