#转载请留言联系
1.获取元素
JavaScript的用途就是为了实现用户交互和网页的大部分动画。所以JavaScript常常需要操作html中的元素。要先操作就要先获取过来。JS有几种途径获取元素，但是用的最多的还是通过元素的id来获取。
获取元素的方式：
div1=document.getElementById('ID名')
// getElementById 寻找某个id为**的标签，用的最多
div2=document.getElementsByTagName('标签名')[0]
// getElementsByTagName 根据标签寻找对应元素 返回都是数组div3=document.getElementsByClassName("组名")
// getElementsByClassName 根据类名寻找对应元素 返回都是数组
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1 id="title">我是大标题</h1> <script> var h1=document.getElementById('title'); console.log(h1) </script> </body> </html>
需要注意的是，本例中，<script></script>要放在<h1></h1>后面！如果把javascript写在元素的上面，就会出错，因为页面上从上往下加载执行的，javascript去页面上获取元素div1的时候，元素div1还没有加载。
解决办法有以下两种：
- JavaScript的代码要放在元素的后面。
- 将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行，就不会出错了。例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> window.onload=function(){ var h1=document.getElementById('title'); console.log(h1) } </script> </body> <h1 id="title">我是大标题</h1> </html>
不过此方法比较麻烦，所以一般不使用。
2.操作元素
- 修改html页面元素的样式。示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #one{ width: 100px; height: 100px; background: blue; } </style> </head> <body> <div id="one"></div> <script> var div1=document.getElementById("one"); div1.style.width='200px'; div1.style.height="200px"; div1.style.background='red'; </script> </body> </html>
注意：修改样式的时候“style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”！
- 修改html页面元素的内容。示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1 id="title">原标题</h1> <script> var oH1=document.getElementById('title'); oH1.innerHTML='新标题'; </script> </body> </html>