文件对象模型 (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. 07_传智播客iOS视频教程_#import指令

    mac切换中英文输入法默认是Ctrl+空格键. 预处理指令的执行时机是在编译之前.在编译之前执行预处理指令. #import指令是包含文件,将指定的文件的内容在预编译的时候拷贝到写指令的地方. #im ...

  2. python pip安装第三方模块

    一.pip工具使用 安装windows版本python,自带pip工具.2者路径相同. 如果设置了环境路径,可以直接在命令提示符窗口下尝试运行pip.如果没有设置环境路径,可以先cd命令到pip工具的 ...

  3. 11.2NOIP模拟赛

    /* 根右左遍历后最长上升子序列 */ #include<iostream> #include<cstdio> #include<cstring> #include ...

  4. linux下的日志压缩脚本

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

  5. Codeforces Round #318 [RussianCodeCup Thanks-Round] (Div. 2)

    以后每做完一场CF,解题报告都写在一起吧   暴力||二分 A - Bear and Elections 题意:有n个候选人,第一个候选人可以贿赂其他人拿到他们的票,问最少要贿赂多少张票第一个人才能赢 ...

  6. 配置Ubuntu16.04第03步：安装搜狗输入法

    1.进入搜狗官网:https://pinyin.sogou.com/linux/ ,下载搜狗输入法安装包 2.使用dpkg命令安装Deb包: sudo dpkg -i sogoupinyin_2.0. ...

  7. Linux终端下对话

    1.首先查看当前账户 [hadoop@weekend01 ~]$ who hadoop   tty1         2016-11-14 09:31 (:0) hadoop   pts/0      ...

  8. poj2661Factstone Benchmark

    链接 利用log函数来求解 n!<=2^k k会达到400+W 暴力就不要想了,不过可以利用log函数来做 log2(n!) = log2(1)+log2(2)+..log2(n)<=k ...

  9. 关于python2.7的md5加密遇到的问题（TypeError: Unicode-objects must be encoded before hashing)

    https://blog.csdn.net/u012087740/article/details/48439559 import hashlib import sys def md5s(): m=ha ...

  10. struts 2.5 There is no Action mapped for namespace [/] and action name [user_find] associated with context path [/struts2_crm].

    遇到了这个错误. There is no Action mapped for namespace [/] and action name [user_find] associated with con ...