JS HTML DOM


简介

HTML DOM(Document Object Model):文档对象模型,当页面被加载时,浏览器会创建页面的DOM。通过HTML DOM 访问JS HTML 文档的所有元素。


HTML DOM TREE

HTML DOM TREE

通过可编程的对象模型,JS 获得了足够的能力动来创建动态的HTML。

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

1.0查找 HTML 元素

通常,通过JavaScript ,操作 HTML 元素。有三种方法来实现:

  • 通过 id 找到 HTML 元素
var x=document.getElementById("intro");
  • 通过标签名称找到HTML元素
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
  • 通过类型找到 HTML 元素

4.0 HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。

  • 当用户点击鼠标时
  • 当网页已加载时
  • 当图像已加载时
  • 当鼠标移动到元素上时
  • 当输入字段被改变时
  • 当提交 HTML 表单时
  • 当用户触发按键时

onload 事件会在用户进入页面时被触发。
onunload 事件会在用户离开页面时被触发。

onchange 事件常结合对输入字段的验证来使用。

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件

onfocus
当输入字段获得焦点时,改变其背景色。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • JavaScript HTML DOM 通过HTML DOM,可以访问JavaScript HTML文档的所有元素...
    edwin_hei阅读 3,188评论 0 2
  • DOM简介 当网页加载时,浏览器会创建页面的文档对象模型(DOM)。通过DOM,JS可以对HTML实现以下操作:改...
    figure_ai阅读 3,502评论 0 1
  • 警告请使用 document.write() 仅仅向文档输出写内容。如果在文档已完成加载后执行 document....
    鹿守心畔光阅读 3,762评论 0 10
  • 1.HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Obje...
    ancientear阅读 3,093评论 0 2
  • 有次和朋友去青龙山,一个可爱的女孩和我打招呼“高老师啥时候回来的?”说着急忙从自己的摊点上拿出一瓶饮料给我手里塞“...
    白卉阅读 3,698评论 3 6

友情链接更多精彩内容