8 HTML DOM 元素的查找与改变&改变CSS样式&HTML事件
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事件的更多相关文章
- 所有DOM元素加载之前执行的页面加载事件[jquery]
<script type="text/javascript"> (function() { alert("DOM还没加载"); })(jQuery) ...
- 如何让后加载的元素被一开始就有的css样式渲染成功（强制提升css优先级）
今天在做搜索框中的提示语下拉的时候,提示框把搜索框的底部的border遮住,导致看起来不是很美观: 因为下方的提示框是用js后加载的它的样式也是随着js一起加载的,而这个js和它的css我们是不能改动 ...
- 一个DOM元素同时拥有多个类名时的样式产生冲突时 属性取决于css样式表中后读取到的属性
如果一个DOM元素包含多个类名,其中的两个类名的属性产生冲突,并不是根据htnl中类名的顺序来决定DOM元素的属性, 而是根据css样式中的顺序来决定DOM元素的属性,它取决于css样式表中后读取到的 ...
- HTML DOM元素关系与操作
<html> <head><title>DOM元素关系与操作</title></head> <body> <!-- div ...
- js改变css样式
CreateTime--2017年10月31日15:14:12 Author:Marydon js改变css样式 1.js改变单个css样式 HTML部分 <div id="tes ...
- DOM 之 document 查找元素方法
DOM 之 document 查找元素方法 getElementById("idName"); // 始终取得第一个 idName 的元素 getElementsByTagName ...
- JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;
JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...
- Jsoup（三）-- Jsoup使用选择器语法查找DOM元素
1.Jsoup可以使用类似于CSS或jQuery的语法来查找和操作元素. 2.实例如下: public static void main(String[] args) throws Exception ...
- Jsoup（二）-- Jsoup查找DOM元素
一.Jsoup查找DOM元素的方法 getElementById(String id) 根据id 来查询DOM getElementsByTag(String tagName) 根据tag 名称来查询 ...
随机推荐
- js获取用户当前地理位置（省、市、经纬度）
在很多情况下,我们需要用到定位功能,来获取用户当前位置.当前比较流行的定位API有腾讯地图.百度地图.高德地图.搜狗地图等等,在这里我使用的是腾讯地图定位API,根据用户IP获取用户当前位置,API返 ...
- Python 多任务(线程) day2 （1）
结论:多线程全局变量是共享的 (03) 因为多线程一般是配合使用,如果不共享,那么就要等到一个线程执行完,再把变量传递给另一个线程,就变成单线程了 但是如果多个线程同时需要修改一个全局变量,就会出现资 ...
- Spring - 周边设施 - H2 embedded 版本引入
1. 概述 在 Spring 开发中, 引入 H2 做辅助测试数据库 2. 场景 复习 Spring, 复习到 持久化 部分 需要一个 数据库 来做测试 方案 方案1: 搭建 MySQL 实例 虽然现 ...
- Ansible - playbook - 概要
概述 简单描述 ansible playbook 1. playbook 概述 ansible 的 "脚本" 场景 ansible 单条命令, 执行一个操作 问题 如果执行多个操作 ...
- 作业1：使用go搭建一个web-server
todo1:搭建web-server的原理 todo2:go实现web-server
- python小白的爬虫之旅
1.爬www.haha56.net/main/youmo网站的内容 ieimport requests import re response=requests.get("http://www ...
- Python jupuyter 的安装与使用（windows下）
1.win+R cmd 打开命令窗 2.pip install jupyter pip安装jupyter 3.安装好后 执行jupyter的启动命令: jupyter notebook --ip=0 ...
- 使用SSH客户端远程登录Linux主机
使用SSH客户端远程登录Linux主机(可替代samba.ftp服务) . Linux系统起初就是为多用户而产生的,可以允许多个用户同时登录linux主机各自进行操作,如图1所示: 图1 SSH(Se ...
- netty学习1
1.IO java 自带IO流 1)同步处理方式,一个请求占用一个线程,高并发常见出现问题 2.java nio 实在jdk1.4版本上新添加的new IO / 非阻塞IO 可多路并发 3.Netty ...
- idea新建项目相关名词意义
新建项目中的对比 建完之后的项目对比 对比 新建中Artifact的名称对应maven中名字 新建中package的名字对应的是项目中src下package名字 新建中project name的名字对 ...