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:当点击鼠标

原文地址:https://www.cnblogs.com/ltfxy/p/11622037.html

时间: 2024-10-28 22:44:41

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

【JS学习笔记】DOM元素灵活查找

用className选择元素 (1)如何用className选择元素 选出所有元素 通过className条件筛选 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml&

JS DOM基础 操作属性、类、CSS样式

操作属性和类 一.属性节点操作 文本节点内容的获取和修改: 语法:elementNode.attributeName ( 元素节点.属性名)     也可以使用“[ ]” ( 元素节点[属性名]) 注意:一般我们操作属性节点时是不需要获取属性节点的,而是直接通过元素节点获取(/修改)属性节点的值.      特别的,有些属性名称与js关键字或者保留字冲突了,只能用另外的名字: class属性:要写成className(class是关键字). label标签的for属性:写成htmlFor. 通过

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

今天在做搜索框中的提示语下拉的时候,提示框把搜索框的底部的border遮住,导致看起来不是很美观: 因为下方的提示框是用js后加载的它的样式也是随着js一起加载的,而这个js和它的css我们是不能改动的.如果直接一开始就使用css设置,卸载首页的css文件中,当focus输入框的时候,输入框的css是后加载进来以及渲染的,以至于我们看到的结果是一开始写在首页css文件中的样式被后面加载的样式覆盖了: 方案一:使用js定时器,当focus后延时一会儿大概255ms左右,再来渲染提示框的上边框颜色,

Javascript:Dom简介(查找/修改HTML元素的内容及属性)

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model).HTML DOM 模型被构造为对象的树. 通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML.例如:改变HTML元素,改变HTML属性,改变CSS样式,事件响应. 代码整理自w3school:http://www.w3school.com.cn 效果图: 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit

DOM元素全屏显示解决方案

<script type="text/javascript"> function goFullscreen(id) { // Get the element that we want to take into fullscreen mode var element = document.getElementById(id); // These function will not exist in the browsers that don't support fullscr

javascript DOM元素宽高

获取元素位置 offsetLeft 元素相对于父元素的左边距离 offsetHeight 元素相对于父元素上部的距离 offsetLeft和style.left的区别 offsetLeft是只读的:style.left是可读写的,要改变元素的位置,只能使用style.left offset返回的是一个Number:style.left返回的是字符串,如“30px” style.left需要在HTML中直接定义.在CSS样式表中定义,是无法获取这个属性的 这里引出一点: 如果要获取元素属性的话,这

jQuery查看dom元素上绑定的事件列表

作为技术狂热分子的职业本能,看到一个技术产品的功能,总会忍不住想知道它是怎么被实现的.比如我每每看到别人网站一个很炫的界面或者很酷的功能,就忍不住打开了浏览器的控制台... 好,不扯远,说说当你想看到网站上某个元素绑定的事件函数的代码时应该怎么做吧. 查看原生绑定的事件函数代码 所谓原生就是通过addEventListener方法绑定到dom元素上.这个好办: 审查绑定事件的元素(对着它右键->审查元素) 在弹出的Elements视图的控制台,右侧点击“Event Listeners”页签 然后

Jsoup(二)-- Jsoup查找DOM元素

一.Jsoup查找DOM元素的方法 getElementById(String id) 根据id 来查询DOM getElementsByTag(String tagName) 根据tag 名称来查询DOM getElementsByClass(String className) 根据样式名称来查询DOM getElementsByAttribute(String key) 根据属性名来查询DOM getElementsByAttributeValue(String key,String val

Jsoup查找dom元素

package com.open1111.jsoup; import org.apache.http.HttpEntity;import org.apache.http.client.methods.CloseableHttpResponse;import org.apache.http.client.methods.HttpGet;import org.apache.http.impl.client.CloseableHttpClient;import org.apache.http.impl