一、变量

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. Luogu P2617 Dynamic Rankings

    带修主席树的模板,因为状态不好所以敲了很长时间,不过写完感觉能更好地理解主席树了. 核心其实就是树状数组套主席树,维护方法不再是以前的那种一步一修改,而是对于树状数组上的每一个点建立一棵权值线段树,然 ...

  2. Linux设备树(一 概述)

    一 概述 设备树(Device tree)是一套用来描述硬件属相的规则.ARM Linux采用设备树机制源于2011年3月份Linux创始人Linus Torvalds发的一封邮件,在这封邮件中他提倡 ...

  3. shell基础之bash

    一直单单知道部署服务器等命令,shell语言还没有用心学习过,简单的学习下以供不时之需 .sh:bash脚本文件 很多时候需要多个命令来完成一项工作,而这个工作又常常是重复的,这个时候我们自然会想到将 ...

  4. 【知名的3D造型设计软件】犀牛 Rhinoceros 5.5.2 for Mac

    [简介] 今天和大家分享最新的3D设计软件 犀牛 Rhinoceros for Mac 5.5.2 版本,支持中文界面,这是一款Mac上知名的3D造型软件,犀牛可以广泛地应用于三维动画制作.工业制造. ...

  5. mysql执行update报错 Err] 1055 - 'information_schema.PROFILING.SEQ' isn't in GROUP BY

    mysql执行update报错 Err] 1055 - 'information_schema.PROFILING.SEQ' isn't in GROUP BY 今天开发的同事发来如下错误信息,最最简 ...

  6. chrome截图全网页

    1.F12 2.ctrl+shift+p 3.输入:capture 4.选择Capture full size screenshot

  7. Elastic Stack之FileBeat使用实战

    Elastic Stack之FileBeat使用实战 作者:尹正杰  版权声明:原创作品,谢绝转载!否则将追究法律责任.   本篇博客数据流走向:FileBeat ===>logstash == ...

  8. hadoop datanode 启动出错

    FATAL org.apache.hadoop.hdfs.server.datanode.DataNode: Initialization failed for block pool Block po ...

  9. C#设计模式（12）——组合模式

    1.组合模式 在软件开发中我们经常会遇到处理部分与整体的情况,如我们经常见到的树形菜单,一个菜单项的子节点可以指向具体的内容,也可以是子菜单.类似的情况还有文件夹,文件夹的下级可以是文件夹也可以是文件 ...

  10. angular,vue,react的基本语法—样式处理

    基本语法 样式处理: vue: 动态属性: v-bind:class 简写 :class react: 变量:class={selecter} angular: 指令:[ngClass]=" ...