Javascript入门(二)变量、获取元素、操作元素

一、变量

Javascript 有五种基本数据类型 number、String、boolean、undefined、null 一种复合类型：object

二、使用getElementById方法获取元素

方式一：

这里的元素，指html里的标签，通过内置docuement的 'getElementById' 方法获取页面上设置了 id 属性的元素，获取一个html对象，并为其赋值，

先不赋值看个例子：

<!DOCTYPE html>
<html lang="en">
<head>
     <script type="text/javascript">
        var div1  = document.getElementById('div1');
     </script>
</head>
<body>
    <div id = 'div1' title="This is a label"> This is label </div>
</body>
</html>

然后打开浏览器，吧鼠标点在该标签（div1）上面：会有一个提示出来，这个就是div1 这元素的title 存储的信息

接下去通过获取来修改title 这个标签，但是如下方法会失败，因为页面扫描方式从上到下，先扫描不存在的变量就没法改变了，会报错。

<!DOCTYPE html>
<html lang="en">
<head>
     <script type="text/javascript">
        var div1  = document.getElementById('div1').title = 'I got it!';
     </script>
</head>
<body>
    <div id = 'div1'> This is label </div>
</body>
</html>

所以，要把script放在div标签下面

<!DOCTYPE html>
<html lang="en">
<head>
     <script type="text/javascript">        
     </script>
</head>
<body>
    <div id = 'div1'> This is label </div>
    <script type="text/javascript">
          document.getElementById('div1').title = 'I got it!';
     </script>
</body>
</html>

修改title后的效果

如果在 <head>标签里的<script>中改的话，可以用window.onload方法, 可以在页面加载完再修改属性，这样就能扫描到了。

<!DOCTYPE html>
<html lang="en">
<head>
     <script type="text/javascript">
         window.onload = function(){
        document.getElementById('div1').title= 'I got it!';
       }
    </script>
</head>
<body>
    <div id = 'div1'> This is label </div>
 
</body>
</html>

三、操作元素

JS可以通过获取元素，对元素属性修改；

--- 操作的方法： 1、点的操作： ‘.’ ；

2、括号操作 : ‘[ ]’ ；

--- 属性修改方式：1、JS 的属性写法和html一样；

例子1：修改属性:

<!DOCTYPE html>
<html lang="en">
<head>
        window.onload = function(){
        var input  = document.getElementById('input1');
        var target = document.getElementById('text1');


        //attribute
         var val  = input.value;
         var type = input.type;
         var name = input.name;

         //change attribute
        target.style.color = 'red';
        target.style.fontSize = 'val';

     }
    </script>
</head>
<body>
     <input type = "text" name = "setSize" id="input1" value = "20px">
     <h1 id = "text1"> SetSize </h1> 
</body>
</html>

效果，下面的setSize