DOM学习日记1
1、通过 id 查找 HTML 元素
var x=document.getElementById("intro");
2、通过标签名查找 HTML 元素
本例查找 id="main" 的元素，然后查找 "main" 中的所有 <p> 元素：
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
3、改变 HTML 属性
本例改变了 <img> 元素的 src 属性：
<!DOCTYPE html>
<html>
<body> <img id="image" src="smiley.gif"> <script>
document.getElementById("image").src="landscape.jpg";
</script> </body>
</html>
4、改变 HTML 样式
如需改变 HTML 元素的样式，请使用这个语法：
document.getElementById(id).style.property=new style
例子 1
下面的例子会改变 <p> 元素的样式：
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
5、本例改变了 id="id1" 的 HTML 元素的样式，当用户点击按钮时：
<h1 id="id1">My Heading </h1>
<button type="button" onclick="document.getElementById('id1').style.color='red'">
6、Visibility
如何使元素不可见。您希望元素显示或消失吗？
<p id="p1">这是一段文本。</p>
<input type="button" value="隐藏文本" onclick="document.getElementById('p1').style.visibility='hidden'" />
<input type="button" value="显示文本" onclick="document.getElementById('p1').style.visibility='visible'" />
7、DOM事件
1、在本例中，当用户在 <h1> 元素上点击时，会改变其内容：
<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>
2、onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
DOM学习日记1的更多相关文章
- Linux学习日记-使用EF6 Code First(四)
一.在linux上使用EF 开发环境 VS2013+mono 3.10.0 +EF 6.1.0 先检测一下EF是不是6的 如果不是 请参阅 Linux学习日记-EF6的安装升级(三) 由于我的数据库 ...
- android学习日记05--Activity间的跳转Intent实现
Activity间的跳转 Android中的Activity就是Android应用与用户的接口,所以了解Activity间的跳转还是必要的.在 Android 中,不同的 Activity 实例可能运 ...
- android学习日记03--常用控件Dialog
常用控件 9.Dialog 我们经常会需要在Android界面上弹出一些对话框,比如询问用户或者让用户选择.这些功能我们叫它Android Dialog对话框 对话框,要创建对话框之前首先要创建Bui ...
- android学习日记03--常用控件checkbox/radiobutton
常用控件3.checkbox 复选框,确定是否勾选,点击一下勾选,点击第二下取消,当有一系列备选项时适合用checkbox控件,方便用户提交数据. 贴上例子Activity的java代码 packag ...
- android学习日记03--常用控件button/imagebutton
常用控件 控件是对数据和方法的封装.控件可以有自己的属性和方法.属性是控件数据的简单访问者.方法则是控件的一些简单而可见的功能.所有控件都是继承View类 介绍android原生提供几种常用的控件bu ...
- Zend Framework学习日记(2)--HelloWorld篇(转)
Zend Framework学习日记(2)--HelloWorld篇 这一篇主要演示如何用zf命令行工具建立一个基于Zend Framework框架的工程,也是我初学Zend Framework的小练 ...
- Zend Framework学习日记(1)--环境搭建篇(转)
Zend Framework学习日记(1)--环境搭建篇 (1)开发工具 Zend Framework框架:http://framework.zend.com/download/latest 包含2个 ...
- Python 学习日记（第三周）
知识回顾 在上一周的学习里,我学习了一些学习Python的基础知识下面先简短的回顾一些: 1Python的版本和和安装 Python的版本主要有2.x和3.x两个版本这两个版本在语法等方面有一定的区别 ...
- 配置ssh免密码登录——集群学习日记
度过了难熬的考试月时期之后,最近和小伙伴一起参加的的比赛进入了紧张的准备时期.在进行工作的时候,发现有很多基础的知识点,自己不是很清楚以及了解,所以在想,要不就边学习的时候边写下学习日记,以供自己后来 ...
随机推荐
- jeesite快速开发平台(三)----项目文件结构与配置文件详解
转自:https://blog.csdn.net/u011781521/article/details/54893535
- 想取得刚才nextval()的值时，放心大胆的用currval()吧，currval()的返回值并不会因为nextval()的并发访问而混乱
以前写sql的时候总是担心current()得到的值并不会绝对等于我上一次nextval()取得的值;因为可能其他线程并发访问nextval(). 先说结论吧:当你拿到一个数据库连接,先nextval ...
- vue.js常见面试题及常见命令介绍
Vue.js介绍 Vue.js是JavaScript MVVM(Model-View-ViewModel)库,十分简洁,Vue核心只关注视图层,相对AngularJS提供更加简洁.易于理解的API.V ...
- css常用属性总结：颜色和单位
在css代码编写中,估计颜色和单位是必不可少的,然而在css中关于颜色和单位值的写法有很多种写法,所以有必要把它弄清楚. 颜色 当初我在初学前端的时候,就会冒出一个疑问“我该如何设置网页颜色?”,一般 ...
- freemaker在表格中遍历数据
Controller层如下所示: @RequestMapping(value = "/test", method = RequestMethod.GET) public Strin ...
- jQuery插件Highcharts
Highcharts 是一个用纯 JavaScript 编写的一个图表库, 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站和非商业用途使用. ...
- POJ2533 最长递增子序列
描述: 7 1 7 3 5 9 4 8 输出4 最长递增子序列为1 3 5 9,不必连续. 解法: 三种思路: 转化为最长公共子序列(n^2),动态规划(n^2),不知叫什么解法(nlogn). 解法 ...
- Django基础学习三_路由系统
今天主要来学习一下Django的路由系统,视频中只学了一些皮毛,但是也做下总结,主要分为静态路由.动态路由.二级路由 一.先来看下静态路由 1.需要在project中的urls文件中做配置,然后将匹配 ...
- YourKit Java Profiler安装和破解
YourKit Java Profiler是业界领先的Java性能剖析工具.其独立版本安装成功且首次启动 YourKit Java Profiler 后,会弹出一个对话框,让用户选择 YourKit ...
- 前端基础之:JQuery