一、变量

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. Git学习笔记——搭建远程仓库

    有空再把笔记移上来 注意点:git remote add origin不是相对于所有git仓库,只相对于当前git仓库 心得:远程建立裸仓库,意味着我不应该直接操作远程仓库.如果我是管理员,我应该先p ...

  2. TODO 动态执行appium代码，便于修改和调试

    https://testerhome.com/topics/9040 还没尝试过. 不过不是很懂怎么实现的,java不是编译后再运行的语言吗?怎么一边编译一边运行呢???

  3. JavaBean+Servlet 开发时，JavaBean 编写问题

    在开发 JavaBean 时,遇见一个问题: *****  表单字段为空,提交时出现 nullPointerException 异常:  表单字段不为空,提交正常. 使用 JavaBean ,JSP页 ...

  4. Linux设备树(二 节点)

    二 节点(node)的表示 首先说节点的表示方法,除了根节点只用一个斜杠“/”表示外,其他节点的表示形式如“node-name@unit-address”.@前边是节点名字,后边是节点地址.节点名字的 ...

  5. shell数组等基本用法

    "shell"既是一种解释型编程语言,也是一个这种编程语言的解释器的名字 shell是解释型语言,就是解释器会一条一条的翻译每一条语句并执行,对比之下,C语言是编译型语言,编译器把 ...

  6. linux下的crontab安装及简单使用

    1.安装 # yum install vixie-cron # yum install crontabs # chkconfig crond on  #设为开机启动,先要安装chkconfig(yum ...

  7. 关于Navicat远程连接远程服务器的mysql 报错问题

    我们连接远程服务器的mysql,如果出现问题,很大问题会出在服务器的端口和授权问题 首先我们通过 1:netstat -an|grep 3306 来查看mysql默认的端口3306是否开启,允许哪个i ...

  8. bzoj1003 最短路+dp

    遇到小范围数据的题目就容易被限制了思维,我单知道数据小可以跑很多遍最短路,但我没想到暴力跑N ^ 2的最短路也能过 物流公司要把一批货物从码头A运到码头B.由于货物量比较大,需要n天才能运完.货物运输 ...

  9. JSON的简单使用_向前台发送JSON数据

    转自:http://www.cnblogs.com/digdeep/p/5574366.html 1.前台页面 <%@ page language="java" conten ...

  10. win10 同步批处理禁用和启用网卡

    @ echo off echo 正在启用超级管理员权限... %1 %2 ver|find "5.">nul&&goto :st mshta vbscript ...