文件对象模型 (DOM: Document Object Model)

DOM 是 W3C定义的一种访问文档的标准。

"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."

DOM分为三种类型：

Core DOM - 对所有类型文档的标准模型

XML DOM - 对XML文档的标准模型

HTML DOM - 对HTML 文档的标准模型

HTML DOM 是关于HTML文档的对象模型，它用一种树形结构将所有的HTML元素组织起来。

比如：

  <html>

  <head>

      <title>My title</title>

  </head>

  <body>

      <h1>My header</h1>

      <a href="XXX">My link</a>

  </body>

  </html>

上述代码的HTML DOM结构如下：

  • 访问 DOM元素

DOM 可以从任意节点开始，通过id, 标签名，类名 来定位、访问其子树中的 HTML元素

通过id 定位: var x = document.getElementById("element_id")　　#找到 document节点下的 id为 element_id的元素

通过标签名定位： var y=x.getElementsByTagName("p")　　　　　　#找到 x节点下的所有<p>标签，注意这里函数名中是 Elements

通过类名定位：var z = y.getElementsByClassName("intro")　　　　 #找到 y的所有节点下的所有类名为 <intro>的元素

  • 更改 DOM元素

HTML DOM将 HTML中的所有元素作为对象，定义了所有HTML元素的 内容、属性、方法、事件。

HTML DOM 定义了获取，改变，增添，删除 HTML元素的标准。

改变 HTML元素内容：

　　通过 innerHTML属性可以改变某个 HTML元素的内容

　　比如

document.getElementbyTagName('a').innerHTML = "This is my link"

　 将<a href="XXX">My link</a> 变成了 <a href="XXX">This is my link</a>

改变 HTML元素属性：

　　通过 .attribute = new value 可以改变某个 HTML元素的属性

　　比如

document.getElementbyTagName('a').href= "www.baidu.com"

　　将<a href="XXX">This is my link</a> 变成了 <a href="www.baidu.com">This is my link</a>

  • 响应 DOM事件：

　　使HTML元素响应事件有三种方式：

　　1. 在 HTML中 通过事件属性填写响应函数　　

<a id="myButton" onclick="alert('click!')">按钮</a>

　　2. 通过 DOM 获取事件属性填写响应函数　　

document.getElementById('myButton').onclick = function(){alert('click!')}

　　3. 通过 DOM 设定EventListener 填写响应函数

document.getElementById('myButton').addEventListener("click",function(){alert("click!")})
三种响应函数设置方式对比
方式1 直接写入HTML中，简洁 不能使用匿名函数或闭包 为同一事件设立多个响应，新的会覆盖旧的 不能取消事件响应
方式2 写在脚本中，作用域灵活 可以使用匿名函数、闭包 为同一事件设立多个响应，新的会覆盖旧的 不能取消事件响应
方式3 写在脚本中，作用域灵活 可以使用匿名函数、闭包 可以为同一事件设立多个响应且不会覆盖，并设定处理事件属于 冒泡模式/捕获模式 可以通过 removeEventListener取消事件响应

　　HTML DOM事件对象参考手册

  • 创建、删除 DOM元素

　　创建 DOM元素时，必须要依附在某个已有的DOM元素下作为其子节点

var child=document.createElement("p")

var parent = decument.findElementbyTagName("body")

parent.appendChild(child)

　　删除 DOM元素时，必须要制定所删除元素的父节点

var parent = document.findElementbyTagName("body");

var child = parent.findElementbyTagName("p");

parent.removeChild(child)

　　

HTML 之 DOM文件对象模型的更多相关文章

  1. JS基础速成（三）- DOM（文件对象模型）

    .t1 { background-color: #ff8080; width: 1100px; height: 40px } 一.DOM树的基本结构 DOM节点分为三大类:元素节点(标签节点),属性节 ...

  2. JavaScript_DOM(文件对象模型)

    DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API(应用程序编程接口). DOM 描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分. DOM1 级将 HTML ...

  3. 理清javascript的相关概念 DOM和BOM

    javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异.JavaScript=语法+BOM(含DOM) ...

  4. AJAX入门---DOM操作HTML

    AJAX入门---DOM操作HTML 一边学习AJAX一边坐着总结加深印象.上次写的是怎样简单的使用XMLHttpRequest对象.今天写的是DOM(文档对象模型(Document Object M ...

  5. WEB漏洞 XSS（一）

    1.xss的形成原理 xss 中文名是“跨站脚本攻击”,英文名“Cross Site Scripting”.xss也是一种注入攻击,当web应用对用户输入过滤不严格,攻击者写入恶意的脚本代码(HTML ...

  6. python XML文件解析：用xml.dom.minidom来解析xml文件

    python解析XML常见的有三种方法: 一是xml.dom.*模块,是W3C DOM API的实现,若需要处理DOM API则该模块很合适, 二是xml.sax.*模块,它是SAX API的实现,这 ...

  7. Python—使用xm.dom解析xml文件

    什么是DOM? 文件对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接口. 一个 DOM 的解析器在解析一个 XML 文档时,一次性读 ...

  8. DOM和DHTML等，复习总结

    DOM(Document Object Model),文件对象模型.HTML(HyperText Markup Language),超文本标记语言.HTML的超类:Node->Document: ...

  9. JS之BOM、客户端检测和DOM

    这是第八章到第十二章的内容,粗略浏览过一遍. 一.BOM 浏览器对象模型.包括了window.location.navigator.screen和history对象. window:核心对象 1.JS ...

随机推荐

  1. 《StarGAN: Unified Generative Adversarial Networks for Multi-Domain Image-to-Image Translation》论文笔记

    ---恢复内容开始--- Motivation 使用单组的生成器G和判别训练图片在多个不同的图片域中进行转换 效果确实很逆天,难怪连Good Fellow都亲手给本文点赞 Introduction 论 ...

  2. bzoj 4596

    4596: [Shoi2016]黑暗前的幻想乡 Time Limit: 20 Sec  Memory Limit: 256 MBSubmit: 257  Solved: 152[Submit][Sta ...

  3. 转载：NOR Flash擦写和原理分析

    1. NOR FLASH 的简单介绍 NOR FLASH 是很常见的一种存储芯片,数据掉电不会丢失.NOR FLASH支持Execute On Chip,即程序可以直接在FLASH片内执行(这意味着存 ...

  4. 【转载】CAS操作

    [本文转载]http://blog.csdn.net/hsuxu/article/details/9467651 CAS CAS:Compare and Swap, 翻译成比较并交换. java.ut ...

  5. Python数据存储 — MySQL数据库操作

    本地安装MySQL 调试环境python3.6,调试python操作mysql数据库,首先要在本地或服务器安装mysql数据库. 安装参考:https://mp.csdn.net/postedit/8 ...

  6. ACM_不知所措的统计员

    Problem Description: GDUFE-GAME完美结束,按照惯例,会有一篇报道,描述活动期间的盛况,因此相关人员找到负责统计的ASDF,但是ASDF只知道第i个人在S_i时进场,在E_ ...

  7. vijos P1412多人背包 DP的前k优解

    https://vijos.org/p/1412 把dp设成,dp[i][v][k]表示在前i项中,拥有v这个背包,的第k大解是什么. 那么dp[i][v][1...k]就是在dp[i - 1][v] ...

  8. hdu 6012 Lotus and Horticulture 打标记

    http://acm.hdu.edu.cn/showproblem.php?pid=6012 我们希望能够快速算出,对于每一个温度,都能够算出它在这n颗植物中,能得到多少价值. 那么,对于第i科植物, ...

  9. CentOS 7 下用 firewall-cmd / iptables 实现 NAT 转发供内网服务器联网

    自从用 HAProxy 对服务器做了负载均衡以后,感觉后端服务器真的没必要再配置并占用公网IP资源. 而且由于托管服务器的公网 IP 资源是固定的,想上 Keepalived 的话,需要挤出来 3 个 ...

  10. PHP（二）常用函数

    数学函数 数组函数 字符串函数