一、变量
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
