JavaScript获取和操作html的元素
#转载请留言联系
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>
代码成就万世基积沙镇海,梦想永在凌云意意气风发。