1、通过 id 查找 HTML 元素

  1. var x=document.getElementById("intro");

2、通过标签名查找 HTML 元素
本例查找 id="main" 的元素，然后查找 "main" 中的所有 <p> 元素：

  1. var x=document.getElementById("main");
  2. var y=x.getElementsByTagName("p");

3、改变 HTML 属性
本例改变了 <img> 元素的 src 属性：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4.  
  5. <img id="image" src="smiley.gif">
  6.  
  7. <script>
  8. document.getElementById("image").src="landscape.jpg";
  9. </script>
  10.  
  11. </body>
  12. </html>

4、改变 HTML 样式
如需改变 HTML 元素的样式，请使用这个语法：

  1. document.getElementById(id).style.property=new style

例子 1
下面的例子会改变 <p> 元素的样式：

  1. <p id="p2">Hello World!</p>
  2. <script>
  3. document.getElementById("p2").style.color="blue";
  4. </script>

5、本例改变了 id="id1" 的 HTML 元素的样式，当用户点击按钮时：

  1. <h1 id="id1">My Heading </h1>
  2. <button type="button" onclick="document.getElementById('id1').style.color='red'">

6、Visibility
如何使元素不可见。您希望元素显示或消失吗？

  1. <p id="p1">这是一段文本。</p>
  2.  
  3. <input type="button" value="隐藏文本" onclick="document.getElementById('p1').style.visibility='hidden'" />
  4. <input type="button" value="显示文本" onclick="document.getElementById('p1').style.visibility='visible'" />

7、DOM事件
1、在本例中，当用户在 <h1> 元素上点击时，会改变其内容：

  1. <h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>

2、onload 和 onunload 事件

  1. onload 和 onunload 事件会在用户进入或离开页面时被触发。
  2. onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
  3. 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. C# 使用printDocument1.Print打印时不显示 正在打印对话框(里面还有一个讨厌的取消按钮)

    C#使用printDocument1.Print打印时不显示正在打印对话框有两种方法 第一种,使用PrintController PrintController printController = n ...

  2. jquery中的data-icon和data-role

    转自:https://blog.csdn.net/Sayesan/article/details/83378524 jquery中的data-icon和data-role    data-role参数 ...

  3. 跟我学算法-图像识别之图像分类（下）(GoogleNet网络, ResNet残差网络, ResNext网络， CNN设计准则）

    1.GoogleNet 网络: Inception V1 - Inception V2 - Inception V3 - Inception V4 1. Inception v1 split - me ...

  4. 如何快速选中某单元格所在的整行或整列 Excel教程

    我们可以使用快捷键的操作来快速选中B3单元格所在的整行或整列,操作方法如下,请大家参阅! 一.正规的快捷键操作 ①快速选中整行 按下键盘上的 Shift Space 即同时按下键盘上的Shift 空格 ...

  5. 新手C#面向对象的学习2018.08.06

    class Person//声明一个Person类 { //类中的声明与Main中不同,类中声明的是字段而不是函数. public string gender; public string name= ...

  6. 进程组&Session

    [进程组] 1. getpgrp(), getpgid(0) 可获取进程组id, 进程组长的pid等于pgid. 如果进程组长exit, 则进程组依旧存在, 组内其它进程的组ID仍然是之前的ID, 即 ...

  7. a=a++问题引发的思考

    使用javap命令解析出来的a=a++过程的字节码(int a=1; a=a++): 0: iconst_1  将数值1压入栈顶 1: istore_1  栈顶值1存入局部变量表的第一个slot中 2 ...

  8. Kafka命令行常用命令说明

    基于0.8.0版本. ##查看topic分布情况kafka-list-topic.sh bin/kafka-list-topic.sh --zookeeper 192.168.197.170:2181 ...

  9. Create Empty Project In Vs But Not Debug?

    问题描述 在使用VS创建一个空的项目管理,然后,添加项目.可是,这个时候,项目虽然可以运行,但是不能Debug进行调试. 解决方法 按照下面三张图像的设置即可.

  10. html 中的<script>标签

    https://www.w3.org/TR/html51/semantics-scripting.html#the-script-element 一. <script type='text/ja ...