Javascript入门(二)变量、获取元素、操作元素
一、变量
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入门(二)变量、获取元素、操作元素的更多相关文章
- 从零开始学 Web 之 jQuery(二)获取和操作元素的属性
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- javascript 里找元素操作元素
javascript 一.找到元素. var d = document.getElementById("") var d = document.getElementsByNa ...
- JavaScript入门(二)
JavaScript入门—操作DOM树 要点 DOM树是一个树形结构,操作DOM树通常是“更新.遍历.新增.删除”. 更新DOM树 拿到DOM节点 var id=document.getElement ...
- JavaScript入门二
******函数****** **函数定义** //普通函数定义 function f1() { console.log("Hello word!") } //带参数的函数 fun ...
- Spring Boot入门(二):获取配置文件值
本篇博客主要讲解下在Spring Boot中如何获取配置文件的值. 1. 使用yaml配置文件 Spring Boot默认生成的配置文件为application.properties,不过它也支持ya ...
- javascript 入门 之select2获取远程数据
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta lan ...
- JQuery快速入门-操作元素的属性和样式
我们在学习JavaScript时,详细介绍了DOM对象.从DOM树可以得知,对DOM的操作,主要包括:元素的属性.内容.值.CSS. 一.元素属性的操作 在 jQuery 中,可以对元素的属性执行获取 ...
- 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...
- jquery选择器如何获取父级元素、同级元素、子元素
一.新建页面 <ul> <li>list item 1</li> <li>list item 2</li> <li class=&qu ...
随机推荐
- 【译】3. Java反射——构造函数
原文地址:http://tutorials.jenkov.com/java-reflection/constructors.html ================================= ...
- 使用rdbtools工具来解析redis rdb文件
工欲善其事必先利其器,日常工作中,好的工具能够高效的协助我们工作:今天介绍一款用来解析redis rdb文件的工具,非常好用.会之,受用无穷! 一.rdbtools工具介绍 源码地址:https:// ...
- group by、where、having
where:是利用数据库本来存在的数据在查询,是在group by.having之前执行. group by:是将本来就有的数据按照条件进行分组. having:是将数据库没有的数据,可以理解为gro ...
- Python递归_打印节点信息
Python递归_打印节点信息 递归特性:1.必须由一个明确的结束条件2.每次进入更深一层递归时,问题规模相比上一次递归都应该有所减少3.递归效率不高,递归层次过多会导致栈溢出(在计算机中,函数调用时 ...
- bzoj2938 AC自动机 + 拓扑排序找环
https://www.lydsy.com/JudgeOnline/problem.php?id=2938 题意:给出N个01病毒序列,询问是否存在一个无限长的串不存在病毒序列 正常来说,想要寻找一个 ...
- Java案例整理
1.随机点名器案例 1.1 案例介绍 随机点名器,即在全班同学中随机的找出一名同学,打印这名同学的个人信息. 此案例在我们昨天课程学习中,已经介绍,现在我们要做的是对原有的案例进行升级,使用 ...
- webserver nginx / https / upstream
s nginx server_name 配置 https://segmentfault.com/q/1010000008426747?_ea=1647456 问题:我的host还没有域名,server ...
- Jquery Pagination分页插件使用
JqueryPagination是个简单轻量级的分页插件,使用起来很容易,只要初始化一个实例,并设置总数量.翻页回调函数.其它参数就可以实现无刷新分页功能了. 准备工作 下载jquery.min.js ...
- 关于CURL的初步认识
前言:你知道?这个CURL可以做爬虫的工作但是仅限于小型的爬虫.............. (一) CURL的认识 下面我觉得用图片来展示curl比较直观: 所谓的curl就是客户端访问了服务器1,那 ...
- 前端基础之JQuery - day15
写在前面 上课第15天,打卡: 张国臂掖,以通西域: ########### # 课上简书 # ########## http://jquery.cuishifeng.cn/index.html JQ ...