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. windows 关机 重启 命令

    关机 shutdown -s -t 0 重启 shutdown -r -t 0 重启电脑windows 立即关机 shutdown -s 三十分钟后关机 shutdown -s -t 30 举例说明一 ...

  2. MySQL GTID （二）

    MySQL GTID 系列之二 三.在线将GTID转化为传统模式 环境见上篇系列文章 关闭GTID,不用停止服务,不影响线上业务 3.1 关闭GTID复制,调整为传统复制 #SLVAE实例上停止复制 ...

  3. Mysql 索引优化 - 1

    单表  范围查询 后面的索引会失效 双表  左右连接建立索引互相使用 三表   用小结果集驱动大表结果, 先优化括号里面的SQL, 保证JOIN被驱动的表上ON字段有索引 索引失效(常见原因) 全职匹 ...

  4. java SSH框架

    1整体流程: 1:hibernate流程: 2:hibernate使用流程: 2.1:建立用户jar包,导入hibernate相应的jar包 2.2 引入mysql的JDBC驱动包 2.3 在数据库中 ...

  5. NodeJs-Linux环境初步

    1.Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具. 使用 Express 可以快速地搭建一个完整功能 ...

  6. NBU 还原windows ORACLE数据库(FP)

    二.基于差异备份恢复7月20日星期四早上8:30分数据1.查询所需要的归档日志(因为要返回20号刂8:30分的数据,所以控制 文件要晚于这个点,即取21号凌晨2点备份的控制文件) bplist -C ...

  7. Python：如何排序（sort）

    一.前言 对Python的列表(list)有两个用于排序的方法: 一个是内建方法list.sort(),可以直接改变列表的内容: >>> list1 = [9,8,7,6,5] &g ...

  8. Java程序设计19——类的加载和反射-Part-A

    1 本文概要 本章介绍Java类的加载.连接和初始化的深入知识,并重点介绍Java反射相关的内容.本章知识偏底层点,这些运行原理有助于我们更好的把我java程序的运行.而且Java类加载器除了根加载器 ...

  9. 不要怂，就是GAN (生成式对抗网络) （二）：数据读取和操作

    前面我们了解了 GAN 的原理,下面我们就来用 TensorFlow 搭建 GAN(严格说来是 DCGAN,如无特别说明,本系列文章所说的 GAN 均指 DCGAN),如前面所说,GAN 分为有约束条 ...

  10. 打开Android Studio时报Unable to access Android SDK add-on list

    第一次安装Android studio时候弹出unable to access android sdk add-on list原因是你电脑没有SDK而且你下载的android studio又是不带SD ...