文件对象模型 (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. sqlsugar的sum的用法

    通过论坛的检索 查到三篇文章是关于sum的 http://www.codeisbug.com/Ask/9/4531 http://www.codeisbug.com/Ask/14/4128 文章1:2 ...

  2. ArcGIS for JavaScript 3.9 本机IIS部署

    arcgis 官方网站经常会打不开,天朝人民都懂得!因此将arcgis for javascript 配置到本机访问 首先esri中国下载最新版3.9的API: http://support.esri ...

  3. Ocelot（十）- 路由

    Ocelot的主要功能是接收传入的http请求并将其转发到下游服务.Ocelot目前仅以另一个http请求的形式支持此功能(将来可能是任何传输机制). Ocelot描述了将一个请求路由到另一个请求作为 ...

  4. pip 的具体含义

    Python 2.7.9 and later (on the python2 series), and Python 3.4 and later include pip (pip3 for Pytho ...

  5. 利用OneDNS同步chrome数据

    将DNS服务器改成OneDNS的 117.50.11.11 备用改为 117.50.22.22 然后刷新自己的DNS缓存,接着测试一下https://test.onedns.net即可 这样既可以正常 ...

  6. apicloud运行机制

    1 首先在官网apicloud中,创建项目生成config.xml文件,预设风格. 2 将config.xml文件放在项目跟目录中,Vue项目,必须先打包生产dist文件, 3 本地或者云编译(官方工 ...

  7. 进击的Python【第七章】：python各种类，反射，异常处理和socket基础

    Python的高级应用(三)面向对象编程进阶 本章学习要点: 面向对象高级语法部分 静态方法.类方法.属性方法 类的特殊方法 反射 异常处理 Socket开发基础 一.面向对象高级语法部分 静态方法 ...

  8. linux下的日志压缩脚本

    linux下的日志压缩脚本: #!/bin/bash #第一步:先定义项目列表如下: projects="project-a project-b project-c project-d&qu ...

  9. 字符串处理 BestCoder Round #43 1001 pog loves szh I

    题目传送门 /* 字符串处理:是一道水题,但是WA了3次,要注意是没有加'\0'的字符串不要用%s输出,否则在多组测试时输出多余的字符 */ #include <cstdio> #incl ...

  10. 通过Fiddler监控Java应用发送请求及相应数据

    Fiddler可以很好的监控浏览器发送的各种请求及响应数据,对于JAVA程序默认情况下是无法监控的,但实际需求中需要监控JAVA程序发送HTTP请求及返回数据是否正确. Fiddler默认配置的监听端 ...