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的更多相关文章

  1. Linux学习日记-使用EF6 Code First(四)

    一.在linux上使用EF 开发环境 VS2013+mono 3.10.0 +EF 6.1.0 先检测一下EF是不是6的 如果不是  请参阅 Linux学习日记-EF6的安装升级(三) 由于我的数据库 ...

  2. android学习日记05--Activity间的跳转Intent实现

    Activity间的跳转 Android中的Activity就是Android应用与用户的接口,所以了解Activity间的跳转还是必要的.在 Android 中,不同的 Activity 实例可能运 ...

  3. android学习日记03--常用控件Dialog

    常用控件 9.Dialog 我们经常会需要在Android界面上弹出一些对话框,比如询问用户或者让用户选择.这些功能我们叫它Android Dialog对话框 对话框,要创建对话框之前首先要创建Bui ...

  4. android学习日记03--常用控件checkbox/radiobutton

    常用控件3.checkbox 复选框,确定是否勾选,点击一下勾选,点击第二下取消,当有一系列备选项时适合用checkbox控件,方便用户提交数据. 贴上例子Activity的java代码 packag ...

  5. android学习日记03--常用控件button/imagebutton

    常用控件 控件是对数据和方法的封装.控件可以有自己的属性和方法.属性是控件数据的简单访问者.方法则是控件的一些简单而可见的功能.所有控件都是继承View类 介绍android原生提供几种常用的控件bu ...

  6. Zend Framework学习日记(2)--HelloWorld篇(转)

    Zend Framework学习日记(2)--HelloWorld篇 这一篇主要演示如何用zf命令行工具建立一个基于Zend Framework框架的工程,也是我初学Zend Framework的小练 ...

  7. Zend Framework学习日记(1)--环境搭建篇(转)

    Zend Framework学习日记(1)--环境搭建篇 (1)开发工具 Zend Framework框架:http://framework.zend.com/download/latest 包含2个 ...

  8. Python 学习日记(第三周)

    知识回顾 在上一周的学习里,我学习了一些学习Python的基础知识下面先简短的回顾一些: 1Python的版本和和安装 Python的版本主要有2.x和3.x两个版本这两个版本在语法等方面有一定的区别 ...

  9. 配置ssh免密码登录——集群学习日记

    度过了难熬的考试月时期之后,最近和小伙伴一起参加的的比赛进入了紧张的准备时期.在进行工作的时候,发现有很多基础的知识点,自己不是很清楚以及了解,所以在想,要不就边学习的时候边写下学习日记,以供自己后来 ...

随机推荐

  1. Remove “Quick Access” entry in Eclipse Juno

    Here is a quick hack which doesn't require any plugin installation, instead you just need to add a f ...

  2. abd启动不了

    解决办法: 杀死 db.exe或者tadb.exe

  3. 46. Permutations (Back-Track,Sort)

    Given a collection of numbers, return all possible permutations. For example,[1,2,3] have the follow ...

  4. 查找yum 安装目录

    [root@DB-Server ~]# rpm -qa | grep -i mysql MySQL-server-advanced-5.6.20-1.rhel5 MySQL-client-advanc ...

  5. 用MapReduce读HBase写MongoDB样例

    1.版本信息: Hadoop版本:2.7.1 HBase版本:1.2.1 MongDB版本:3.4.14 2.HBase表名及数据: 3.Maven依赖: <dependency> < ...

  6. Java NIO API详解(转)

    原文连接: http://www.blogjava.net/19851985lili/articles/93524.html 感谢原作者 NIO API 主要集中在 java.nio 和它的 subp ...

  7. vue生命周期小笔记

    一张图谨记vue每个生命周期的获取状态 beforecreate :可以在这加个loading事件 created :在这结束loading,还做一些初始化,实现函数自执行 mounted : 在这发 ...

  8. 个人如何免费申请一个微信小程序账号进行开发尝鲜

    大家都知道微信小程序并没有开放个人申请注册账号,觉得很遗憾,作为一个开发者,居然不能一览究竟. 前段时间研究了一番,教大家如何个人申请注册一个小程序账号,不花300块钱,当然只能作为开发尝鲜,不能发布 ...

  9. Gym 101201G Maximum Islands (最大独立集)

    题意:给定一个图,L代表陆地,W代表水,C表示不确定,问你最多有多少岛. 析:首先给定的L周围必须是是W,只有这样才是最优的,因为如果是L,那么还得有另外的W来包围,不是最优的,那么剩下的就剩下C了, ...

  10. MFC中的一般经验之谈5

    MFC中提供了CString的类,可以用在一切使用字符串的地方.可以完美取代const char* 或者 LPCTSTR(经常在WinAPI)中传递参数.并且如果需要通过空间进行字符串的数据传递DDX ...