文件对象模型 (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. 《MuseGAN: Multi-track Sequential Generative Adversarial Networks for Symbolic Music Generation and Accompaniment》论文阅读笔记

    出处:2018 AAAI SourceCode:https://github.com/salu133445/musegan abstract: (写得不错 值得借鉴)重点阐述了生成音乐和生成图片,视频 ...

  2. HDU1072:Nightmare

    传送门 题意 给出一张n*m的图 0.墙 1.可走之路 2.起始点 3.终点 4.时间重置点 问是否能到达终点 分析 我的训练专题第一题,一开始我设个vis数组记录,然后写炸,不能处理重置点根vis的 ...

  3. 洛谷P4344 [SHOI2015]脑洞治疗仪（珂朵莉树）

    传送门 看到区间推倒……推平就想到珂朵莉树 挖脑洞直接assign,填坑先数一遍再assign再暴力填,数数的话暴力数 //minamoto #include<iostream> #inc ...

  4. tableView 顶部多出一部分解决方法

    1.self.automaticallyAdjustsScrollViewInsets = NO; 此方法解决之后 不能保证tableView 能彻底的滑动到底部 2. self.edgesForEx ...

  5. Go JSON嵌套解析失败

    //结构体成员变量名首字母要大写,要小写需要用tag,请看范例. //如果没有tag,嵌套时就无法解析属性,解析失败就是空值. type messageRow struct { UserID stri ...

  6. python爬虫之requests+selenium+BeautifulSoup

    前言: 环境配置:windows64.python3.4 requests库基本操作: 1.安装:pip install requests 2.功能:使用 requests 发送网络请求,可以实现跟浏 ...

  7. c语言程序设计案例教程（第2版）笔记（三）—变量、结构体

    零散知识点: 变量        :C语言中,每个变量必须先定义后引用.所谓变量存在是指系统为这个变量分配一块存储空间,此时对变量的操作,就是对变量所对应的存储空间中存放的数据进行操作.人们将变量占据 ...

  8. logstsh | logstash-input-jdbc 启动错误收集

    1: Failed to execute action {:action=>LogStash::PipelineAction::Create/pipeline_id:main, :excepti ...

  9. head first python /chapter7 web（python 3 转 python 2.7）

    前言 书中使用的是python3,我这里使用的是python2.7 Web 的目录树 webapp/ ├── cgi-bin │ ├── athletelist.py │ ├── athletemod ...

  10. ural1076 Trash 垃圾

    Description You were just hired as CEO of the local junkyard.One of your jobs is dealing with the in ...