一、变量

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入门(二)变量、获取元素、操作元素的更多相关文章

  1. 从零开始学 Web 之 jQuery（二）获取和操作元素的属性

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  2. javascript 里找元素操作元素

      javascript  一.找到元素. var d = document.getElementById("") var d = document.getElementsByNa ...

  3. JavaScript入门(二)

    JavaScript入门—操作DOM树 要点 DOM树是一个树形结构,操作DOM树通常是“更新.遍历.新增.删除”. 更新DOM树 拿到DOM节点 var id=document.getElement ...

  4. JavaScript入门二

    ******函数****** **函数定义** //普通函数定义 function f1() { console.log("Hello word!") } //带参数的函数 fun ...

  5. Spring Boot入门(二)：获取配置文件值

    本篇博客主要讲解下在Spring Boot中如何获取配置文件的值. 1. 使用yaml配置文件 Spring Boot默认生成的配置文件为application.properties,不过它也支持ya ...

  6. javascript 入门 之select2获取远程数据

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta lan ...

  7. JQuery快速入门-操作元素的属性和样式

    我们在学习JavaScript时,详细介绍了DOM对象.从DOM树可以得知,对DOM的操作,主要包括:元素的属性.内容.值.CSS. 一.元素属性的操作 在 jQuery 中,可以对元素的属性执行获取 ...

  8. 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

    本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...

  9. jquery选择器如何获取父级元素、同级元素、子元素

    一.新建页面 <ul> <li>list item 1</li> <li>list item 2</li> <li class=&qu ...

随机推荐

  1. fiddler接口测试，js代码修改日志展示（埋点用）

    fiddler 通过fiddler 发送接口信息: http://blog.csdn.net/java2013liu/article/details/53380381 rules--automatic ...

  2. JDBC 增、改、删 MySQL中的表

    在数据库test里先创建表school,内容如下 通过JDBC增加第五人tom,修改他的生日,最后删除tom import java.sql.Connection; import java.sql.D ...

  3. Oracle提权

    1.创建JAVA包 select dbms_xmlquery.newcontext('declare PRAGMA AUTONOMOUS_TRANSACTION;begin execute immed ...

  4. angular 中如果表单有相同的name一般会出现如下错误

    Unhandled Promise rejection Cannot assign to a reference or variable

  5. 剑指Offer_编程题_11

    题目描述 输入一个整数,输出该数二进制表示中1的个数.其中负数用补码表示.   class Solution { public: int NumberOf1(int n) { int size = 3 ...

  6. python 基础技巧

    多个字典合并 >>> d1 = {'name' : 'revotu', 'age' : 99} >>> d2 = {'age' : 24, 'sex' : 'mal ...

  7. ansible-playbook 单个yml文件部署tomcat简单示例

    #单yaml配置[root@jenkins pb]# cat tomcat.yml --- - hosts: eee vars: #设置变量 war_files: /var/lib/jenkins/w ...

  8. DirectX11 With Windows SDK--05 键盘和鼠标输入

    前言 提供键鼠输入可以说是一个游戏的必备要素.在这里,我们不使用DirectInput,而是使用Windows的消息处理机制,不过要从头开始实现会让事情变得很复杂.DXTK提供了鼠标输入的Mouse. ...

  9. Cannot make a static reference to the non-static

    public class SeckillServiceImpl implements SeckillService{ private SeckillDao seckillDao; private Su ...

  10. HTTP.SYS远程执行代码漏洞分析 （MS15-034 ）

    写在前言:   在2015年4月安全补丁日,微软发布了11项安全更新,共修复了包括Microsoft Windows.Internet Explorer.Office..NET Framework.S ...