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. 分析AppClassLoader,ExtClassLoader 和URLClassLoader 的关系

    测试代码: class Hello { public String str = "Hello World"; public void fun() { System.out.prin ...

  2. 解决laravel出现Syntax error or access violation: 1055 '***' isn't in GROUP BY

    laravel 5.3 以后默认开启 mysql严格模式(strict)在mysql在严格模式下, 并且开启了ONLY_FULL_GROUP_BY的情况下,group by 的字段没有出现在 sele ...

  3. MySQL 整型

    MySQL中我们建表的时候,类型可以用bigint(20), 这是什么意思呢? 首先我们看bigint, MySQL的整型类型有这样几种: 类型      占用字节 tinyint        1 ...

  4. python 的头文件包含问题

    一个python项目中一个文件需要引用另一个文件中的类,遇到的几个问题,总结如下: 0x01 情况一:在同一目录下 project |--a.py |--b.py |--main.py 在main.p ...

  5. shell查找七天之前的文件

    #!/bin/bashaweekago=`date -d "7 days ago" +%s`for f in $(ls) do stat -c %Y ${f} aa=`stat - ...

  6. WEB前后端约定接口

  7. DIV 设置垂直居中

    要说面试官经常问的问题中“如何将一个块元素水平垂直居中”就算一个. 之前的面试中也有中招,现在总结一下. 1.CSS垂直水平居中 要让DIV水平和垂直居中,必需知道该DIV得宽度和高度,然后设置位置为 ...

  8. ubuntu14.04安装好Hadoo之后接着安装hbase和介绍常用命令

    1.解压 tar -zxvf hbase-1.0.0-bin.tar.gzsudo mv hbase-1.0.0 /opt/hbasecd /optsudo chmod -R 775 hbase 2. ...

  9. 超好用的免费Redis客户端

    Redis这款基于内存的键值对(key-vlaue)数据库,自带了一个基于命令行式的管理工具redis-cli,但是使用起来并不方便.虽然现在有了许多的图形化管理工具,有些需要收费,有些不好用.最终还 ...

  10. MyBatis XML常用配置

    1.属性(properties) 可外部配置且可动态替换的,既可以在典型的 Java 属性文件中配置,亦可通过 properties 元素的子元素来传递. 可以外部定义好properties文件通过 ...