一、变量

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. struts2 UI标签 和 主题

    四.Struts2的UI标签和主题 1.Struts2中UI标签的优势 自动的数据回显和错误提示功能 自带的简单样式和排版 2.表单标签的通用属性 说明:UI标签中value的取值一般都是字符串. 2 ...

  2. Linux(centos7)如何安装Zend Optimizer Zend Guard Loader

    下载地址:http://www.zend.com/en/products/loader/downloads#Linux 1.解压 wget http://downloads.zend.com/guar ...

  3. IO 多路复用介绍

    IO多路复用 概念说明 在进行解释之前,首先要说明几个概念: 用户空间和内核空间 进程切换 进程的阻塞 文件描述符 缓存 I/O 用户空间与内核空间 现在操作系统都是采用虚拟存储器,那么对32位操作系 ...

  4. Luogu P3966 [TJOI2013]单词

    题目链接 \(Click\) \(Here\) 本题\(AC\)自动机写法的正解之一是\(Fail\)树上跑\(DP\). \(AC\)自动机是\(Trie\)树和\(Fail\)树共存的结构,前者可 ...

  5. Go-day07

    今日内容概要: 1.json解析 2.文件操作 3.命令行参数 4.错误处理 一.Golang里的类型断言 1 em必须为initerface类型才可以进行类型断言 比如如下代码会报错 s := &q ...

  6. springboot学习之maven多环境打包的几种方式

    在应用部署的时候,往往遇到需要发布到不同环境的情况,而每个环境的数据库信息.密钥信息等可能会存在差异. 1.在默认的application.properties或者yaml中设置profile spr ...

  7. flask session

    flask session工作机制: 把敏感数据经过加密后放入到‘session’中,然后在把'session'存放到cookie中,下次请求的时候,再从浏览器发送过来的cookie中读取sessio ...

  8. docker仓库harbor搭建

    1.安装docker-compose [root@docker02 ~]# yum install epel-release [root@docker02 ~]# pip install docker ...

  9. python 面向对象(六)MRO C3算法 super

    ########################总结################ 面向对象回顾 类:对某一个事物的描述,对一些属性和方法的归类 class 类名: var=123#类变量 def ...

  10. 使用nvm安装node,全局npm,cnpm

    1.nvm-windows下载 下载地址https://github.com/coreybutler/nvm-windows/releases,下载nvm-setup.zip 2.安装nvm 首先把n ...