HTML 之 DOM文件对象模型
文件对象模型 (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取消事件响应 |
创建、删除 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文件对象模型的更多相关文章
- JS基础速成（三）- DOM（文件对象模型）
.t1 { background-color: #ff8080; width: 1100px; height: 40px } 一.DOM树的基本结构 DOM节点分为三大类:元素节点(标签节点),属性节 ...
- JavaScript_DOM(文件对象模型)
DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API(应用程序编程接口). DOM 描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分. DOM1 级将 HTML ...
- 理清javascript的相关概念 DOM和BOM
javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异.JavaScript=语法+BOM(含DOM) ...
- AJAX入门---DOM操作HTML
AJAX入门---DOM操作HTML 一边学习AJAX一边坐着总结加深印象.上次写的是怎样简单的使用XMLHttpRequest对象.今天写的是DOM(文档对象模型(Document Object M ...
- WEB漏洞 XSS（一）
1.xss的形成原理 xss 中文名是“跨站脚本攻击”,英文名“Cross Site Scripting”.xss也是一种注入攻击,当web应用对用户输入过滤不严格,攻击者写入恶意的脚本代码(HTML ...
- python XML文件解析：用xml.dom.minidom来解析xml文件
python解析XML常见的有三种方法: 一是xml.dom.*模块,是W3C DOM API的实现,若需要处理DOM API则该模块很合适, 二是xml.sax.*模块,它是SAX API的实现,这 ...
- Python—使用xm.dom解析xml文件
什么是DOM? 文件对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接口. 一个 DOM 的解析器在解析一个 XML 文档时,一次性读 ...
- DOM和DHTML等，复习总结
DOM(Document Object Model),文件对象模型.HTML(HyperText Markup Language),超文本标记语言.HTML的超类:Node->Document: ...
- JS之BOM、客户端检测和DOM
这是第八章到第十二章的内容,粗略浏览过一遍. 一.BOM 浏览器对象模型.包括了window.location.navigator.screen和history对象. window:核心对象 1.JS ...
随机推荐
- 常见电商项目的数据库表设计（MySQL版）
转自:https://cloud.tencent.com/developer/article/1164332 简介: 目的: 电商常用功能模块的数据库设计 常见问题的数据库解决方案 环境: MySQL ...
- Codeforces Round #259 (Div. 1)A（公式）
传送门 题意 给出m个面的骰子扔n次,取最大值,求期望 分析 暴力算会有重复,而且复杂度不对. 考虑m个面扔n次得到m的概率,发现只要减去(m-1)个面扔n次得到m-1的概率即可,给出example说 ...
- （图论）51NOD 1298 圆与三角形
给出圆的圆心和半径,以及三角形的三个顶点,问圆同三角形是否相交.相交输出"Yes",否则输出"No".(三角形的面积大于0). 输入 第1行:一个数T, ...
- DBMS "无法作为数据库主体执行，因为主体“dbo”不存在、无法模拟这种..........”
解决方案: 新附加的数据库需要设置所有者才能建立数据库关系图.供参考的操作步骤如下: 选择“AdventureWorks2012LT”,右键,选择“属性”,选择“文件”页,点击“所有者”右侧按钮,点击 ...
- selenium 延迟等待的三种方式
1.最直接普通的方式:这个是设置固定的等待时间 Thread.sleep(1000); 2.显示等待方式(Explicit Wait):就是明确的要等待的元素在规定的时间之内都没找到,那么就 ...
- [书目20141009]《ReWork》
ReWork1: ============= 引言篇INTRODUCTION开局篇FIRST 新的现实缷负篇TAKEDOWNS 忘了“现实世界” 哪来的从错误中学习 计划即瞎猜 何必壮大? 工作狂 受 ...
- android开发学习——Mina框架
Apache Mina Server 是一个网络通信应用框架,对socket进行了封装. http://www.cnblogs.com/moonandstar08/p/5475766.html htt ...
- CF949A/950C Zebras
思路: 贪心乱搞. 实现: #include <bits/stdc++.h> using namespace std; vector<vector<int>> v; ...
- （Nginx+Apache）实现反向代理与负载均衡
反向代理负载均衡 使用代理服务器可以将请求转发给内部的Web服务器,使用这种加速模式显然可以提升静态网页的访问速度.因此也可以考虑使用这种技术,让代理服务器将请求均匀转发给多台内部Web服务器之一上, ...
- window下phpstudy开启redis扩展
注:一定要注意自己PHP的版本结构是64还是32位的!其次查看PHP Extension Build是NTS or TS! 1.使用phpinfo()函数查看PHP的版本信息,这会决定扩展文件版本(特 ...