一、变量

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. Python 的文件处理

    Python提供了os.shutil.glob 等开发包处理文件 一.OS包 os包中包含了目录创建.目录删除.文件创建.执行系统命令等方法. import os remove()   删除文件 mk ...

  2. （基础） 平方和与立方和 hdu2007

    平方和与立方和 链接:http://acm.hdu.edu.cn/showproblem.php?pid=2007 Time Limit: 2000/1000 MS (Java/Others)     ...

  3. python自动化开发-[第七天]-面向对象

    今日概要: 1.继承 2.封装 3.多态与多态性 4.反射 5.绑定方法和非绑定方法 一.新式类和经典类的区别 大前提: 1.只有在python2中才分新式类和经典类,python3中统一都是新式类 ...

  4. jmeter sampler maven项目排错记

    eclipse 创建的maven项目,引入jar包之后出现红色叹号,一直找不到原因,连main方法都无法运行,提示找不到类: 错误: 找不到或无法加载主类 soapsampler.SoapSample ...

  5. flask 渲染jinja2模版和传参

    渲染模版(html文件) A.模版文件(html)放入到template目录下,项目启动的时候会从template目录里查找, B.从flask中导入“render_tempalte”函数 C.在视图 ...

  6. 6、JPA-映射-单向一对多

    一个用户对应多个订单 实体类 Customer package com.jpa.yingshe; import javax.persistence.*; import java.util.HashSe ...

  7. Kafka权威指南 读书笔记之（五）深入Kafka

    集中讨论以下3 个有意思的话题 :• Kafka 如何进行复制:• Kafka 如何处理来自生产者和消费者的请求 :• Kafka 的存储细节,比如文件格式和索引. 集群成员关系 Kafka 使用 Z ...

  8. 阅读：ECMAScript 6 入门(2)

    参考 ECMAScript 6 入门 ES6新特性概览 ES6 全套教程 ECMAScript6 (原著:阮一峰) JavaScript 教程 重新介绍 JavaScript(JS 教程) Modul ...

  9. bzoj千题计划318：bzoj1396: 识别子串（后缀自动机 + 线段树）

    https://www.lydsy.com/JudgeOnline/problem.php?id=1396 后缀自动机的parent树上,如果不是叶子节点,那么至少有两个子节点 而一个状态所代表子串的 ...

  10. ArcGis Python脚本——批量删除字段

    注意,ArcGis中shp属性表至少要保留除OID(FID).Shape之外的1个字段. 例:批量删除“省级行政区域”除“FID”.“Shape”.“Area”之外的字段. import arcpy ...