文件对象模型 (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. 【413】C 语言 Command line

    Command-Line Arguments All the executable programs above have a main(void) program more generally, e ...

  2. maven中添加json-lib的jar包

    在maven配置文件pom.xml中添加如下配置信息: <dependency> <groupId>net.sf.json-lib</groupId> <ar ...

  3. Visual Studio一些插件

    让JavaScript像C#一样支持Region http://www.cnblogs.com/codealone/p/3647127.html

  4. 【黑金教程笔记之002】【建模篇】【Lab 01 永远的流水灯】—笔记&勘误

    学习并行操作的思想. 勘误001: Page 17,模块图下方,“扫描频配置定为100Hz”应为10Hz. 勘误002: Page 17,最后一行 “10ms”应为100ms:“2.5ms”应为25m ...

  5. bzoj 4078: [Wf2014]Metal Processing Plant【二分+2-SAT+枚举+并查集】

    枚举从大到小s1,二分s2(越大越有可能符合),2-SAT判断,ans取min 思路倒是挺简单的,就是二分的时候出了比较诡异的问题,只能二分s2的值,不能在数组上二分... 有个优化,就是当不是二分图 ...

  6. 使用vmware12安装Ubuntu 遇到的两个问题和解决

    1.need the x86-64 cpu,but only detected the xxx cpu. 这是因为bios中的virtual function 是 disabled,改为enabled ...

  7. 移动游戏By HYJ

    暴力求SG函数即可,记忆化贼方便 /*program from Wolfycz*/ #include<cmath> #include<cstdio> #include<c ...

  8. poj 3164 Command Network (朱刘算法)

    题目链接: http://poj.org/problem?id=3164 题目大意: 有n个点(用坐标表示)各点编号分别为1—>n,m条单向路,问能否存在一个花费价值最小的网络,能使从1点到达任 ...

  9. ACM_逆序数（归并排序）

    帮挂科 Time Limit: 2000/1000ms (Java/Others) 64bit IO Format: %lld & %llu Problem Description: 冬瓜发现 ...

  10. Retinex系列之McCann99 Retinex 分类： 图像处理 Matlab 2014-12-03 11:27 585人阅读 评论(0) 收藏

    一.McCann99 Retinex McCann99利用金字塔模型建立对图像的多分辨率描述,自顶向下逐层迭代,提高增强效率.对输入图像的长宽有 严格的限制,要求可表示成 ,且 ,. 上述限制来源于金 ...