Javascript入门变量获取元素操作元素
Posted Jomini
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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
以上是关于Javascript入门变量获取元素操作元素的主要内容，如果未能解决你的问题，请参考以下文章