HTML DOM（Document Object Model）文档对象模型

  • 当网页被加载时，浏览器会创建页面的文档对象模型。
  • HTMLDOM 定义了用于HTML的一系列标准的对象。通过DOM，你可以访问所有的HTML元素，连同它们所包含的文本和属性。
  • HTMLDOM独立于平台和编程语言，可以Java、JavaScript之类的调用。
  • HTMLDOM模型被构造为对象的树。

JavaScript能够改变页面中所有的HTML元素、属性、CSS样式，能够对页面中所有的事件做出反应。

HTML DOM树：

查找HTML元素

  • 通过ID查找HTML元素    getElementById()
  • 通过标签名查找HTML元素  getElementByTagName()
  • 通过类名找到HTML元素 　getElementByClass()　

改变HTML内容：

  • 利用innerHTML属性
  • document.getElementById(id).attribute=new value  如document.getElementById("image").src="landscape.jpg"

改变CSS样式：

  • document.getElementById(id).style.property = new style  如：document.getElementById("p1").style.color = "blue";
  • onclick="document.getElementById('id1').style.color='pink'"  还可以嵌在事件里

HTML事件的例子：

  • 当用户点击鼠标时　　   <h1 onclick="this.innerHTML = '哈哈'">点击文本!</h1>
  • 当网页加载时
  • 当图像加载时
  • 当鼠标移动到元素上时
  • 当输入字段被改变时
  • 当提交HTML表单时
  • 当用户触发按键时

使用HTMLDOM来分配事件：

<body>

<p>点击按钮执行 <em>displayDate()</em> 函数.</p>

<button id="myBtn">点这里</button>

<script>

document.getElementById("myBtn").onclick = function(){displayDate()};

function displayDate(){

     document.getElementById("demo").innerHTML = Date();

}

</script>

<p id="demo"></p>

</body>

onload事件和onunload事件：

  • onload事件和onunload事件会在用户进入或离开页面时触发
  • onload事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本
  • onload和onunload事件可用于处理cookie

onchange事件：

  • 常用于对输入字段进行验证
<script type="text/javascript" charset="utf-8">

    function myFunction(){

        var x = document.getElementById("fname");

        x.value = x.value.toUpperCase();

    }

</script>

onmouseover和onmouseout等事件：

  • onmouseover：用户的鼠标移至HTML元素上方
  • onmouseout：用户的鼠标移除元素
  • onmousedown：当点击鼠标按钮
  • onmouseup：当释放鼠标按钮
  • onclick：当点击鼠标

8 HTML DOM 元素的查找与改变&改变CSS样式&HTML事件的更多相关文章

  1. 所有DOM元素加载之前执行的页面加载事件[jquery]

    <script type="text/javascript"> (function() { alert("DOM还没加载"); })(jQuery) ...

  2. 如何让后加载的元素被一开始就有的css样式渲染成功（强制提升css优先级）

    今天在做搜索框中的提示语下拉的时候,提示框把搜索框的底部的border遮住,导致看起来不是很美观: 因为下方的提示框是用js后加载的它的样式也是随着js一起加载的,而这个js和它的css我们是不能改动 ...

  3. 一个DOM元素同时拥有多个类名时的样式产生冲突时 属性取决于css样式表中后读取到的属性

    如果一个DOM元素包含多个类名,其中的两个类名的属性产生冲突,并不是根据htnl中类名的顺序来决定DOM元素的属性, 而是根据css样式中的顺序来决定DOM元素的属性,它取决于css样式表中后读取到的 ...

  4. HTML DOM元素关系与操作

    <html> <head><title>DOM元素关系与操作</title></head> <body> <!-- div ...

  5. js改变css样式

      CreateTime--2017年10月31日15:14:12 Author:Marydon js改变css样式 1.js改变单个css样式 HTML部分 <div id="tes ...

  6. DOM 之 document 查找元素方法

    DOM 之 document 查找元素方法 getElementById("idName"); // 始终取得第一个 idName 的元素 getElementsByTagName ...

  7. JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;

    JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...

  8. Jsoup（三）-- Jsoup使用选择器语法查找DOM元素

    1.Jsoup可以使用类似于CSS或jQuery的语法来查找和操作元素. 2.实例如下: public static void main(String[] args) throws Exception ...

  9. Jsoup（二）-- Jsoup查找DOM元素

    一.Jsoup查找DOM元素的方法 getElementById(String id) 根据id 来查询DOM getElementsByTag(String tagName) 根据tag 名称来查询 ...

随机推荐

  1. Go递归函数

    package main import "fmt" func main() { /* 递归函数(recursion):一个函数自己调用自己,就叫做递归函数. 递归函数要有一个出口, ...

  2. 通过python代码连接MySQL以及插入和显示数据

    通过python代码连接MySQL以及插入和显示数据: 数据库huahui创建一个shibie的表,里面有两个varcahr(100)的字段,num和result. import pymysql im ...

  3. Cosmetic Airless Bottles To Meet Practical Requirements

    Today, people use cosmetic bottles, many of which are in cosmetic airless bottles. We can use them, ...

  4. git拉取代码

    1,用sourcetree拉取的时候 遇到  fatal: repository 'http://gitlab.xxx.com/XXX/XXX.git/' not found 2,可以直接在要存放代码 ...

  5. makefile的书写

    工作中会遇到makefile的书写,有必要做一些笔记.尽管网上有”万能模板“可以使用,但我觉得还是有必要从最基础的写起. 平常在windows下开发,不知道自己用过makefile,其实大部分IDE里 ...

  6. Windows上面搭建FlutterAndroid运行环境

    1.下载安装JDK https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 2.配置J ...

  7. linux中利用fstab实现磁盘分区自动挂载

    如何格式化磁盘.给磁盘分区以及挂载,参考我的另一篇博客: https://www.cnblogs.com/mediocreWorld/p/11123786.html 博客中有一个格式化分区的命令: m ...

  8. Mac 配置 React Native 环境

    OSX系统,这里假定你是iOS开发人员 Homebrew 是需要的,只有安装了Homebrew才能继续安装watchman和flow 安装 Node.js 4.0 或者更新的版本. 使用 Homebr ...

  9. github 创建gitlab每次提交都要输入账号

    在使用git提交代码到github的时候,经常要求输入用户名和密码,类似这种: 除了在 github 上添加 SSH key 网上有这么一种解决方法:使用git提交到github,每次都要输入用户名和 ...

  10. CentOS7中JDK的安装和配置

    1.使用yum线上安装jdk 这里以jdk1.7为例进行示范,1.8同理 yum -y list java*                  #浏览线上所有jdk版本列表,列表太长了,会显示不全 y ...