HTML DOM的总结
DOM 是 Document Object Model(文档对象模型)的缩写,是 W3C(万维网联盟)的标准
W3C DOM 标准被分为 3 个不同的部分:
1、核心 DOM - 针对任何结构化文档的标准模型
2、XML DOM - 针对 XML 文档的标准模型
3、HTML DOM - 针对 HTML 文档的标准模型
HTML DOM 定义了所有 HTML 元素的对象和属性,以及访问它们的方法。
换言之,HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
所有 HTML 元素被定义为对象,而编程接口则是对象方法和对象属性。
DOM技术使用户页面可以动态的变化,从而大大使页面的交互性增强。但是DOM必须通过JavaScript等脚本语言来进行操作。
简单说就是DOM规定了HTML,XML等的一些规范,使JavaScript可以根据这些规范来进行各种操作。而这些规范我们可以用树来形象的表示:
通过这样的树,我们就可以很快找到我们想要操作的节点,进而进行各种属性,方法,事件等的操作。
使用前先来了解一下元素节点的意思吧。
父(parent)、子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟或姐妹)。看这个图:
再来看一下html DOM的常用属性吧,如图
接下来就说一下具体的JavaScript对HTML网页内容进行的操作,常用的方法如下:
DOM中常用的事件如下:
下面根据以上来实现几个小例子:
1,添加新的节点:
<span style="font-size:18px;"> <!DOCTYPE html>
<html>
<body> <div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div> <script>
var para=document.createElement("p");//创建一个标签p节点名为para
var node=document.createTextNode("这是新段落。");//定义节点元素的内容
para.appendChild(node);//将元素和内容联系起来 var element=document.getElementById("div1");//找到节点为div1的节点
element.appendChild(para);//向节点div1中添加新节点para
</script> </body>
</html>
</span>
2,删除某个节点元素:
<span style="font-size:18px;"> <!DOCTYPE html>
<html>
<body> <div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div> <script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);//删除父节点中的子节点child
</script> </body>
</html>
</span>
3,获得焦点时改变颜色,这个是经常用的:
<span style="font-size:18px;"> <!DOCTYPE html>
<html>
<head>
<script>
function myFunction(x)
{
x.style.background="yellow";
}
</script>
</head>
<body> 请输入英文字符:<input type="text" onfocus="myFunction(this)"> <p>当输入字段获得焦点时,会触发改变背景颜色的函数。</p> </body>
</html>
</span>
4,鼠标移动上元素和移开元素:
<span style="font-size:18px;"> <!DOCTYPE html>
<html>
<body> <div
onmouseover="mOver(this)"
onmouseout="mOut(this)"
style="background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;">
Mouse Over Me
</div> <script>
function mOver(obj)
{
obj.innerHTML="谢谢你"
} function mOut(obj)
{
obj.innerHTML="把鼠标指针移动到上面"
}
</script> </body>
</html>
</span>
总结起来就是:DOM文档对象模型,可以理解为所建的html文件就是一个文档。W3C把这个文档中的html元素都抽象成了一个个对象,js就是通过这些抽象的对象来执行各种操作。
HTML DOM的总结的更多相关文章
- 关于DOM的操作以及性能优化问题-重绘重排
写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...
- 读书笔记:JavaScript DOM 编程艺术(第二版)
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
- 页面嵌入dom与被嵌入iframe的攻防
1.情景一:自己的页面被引入(嵌入)至别人的页面iframe中 if(window.self != window.top){ //url是自己页面的url window.top.location.hr ...
- 通俗易懂的来讲讲DOM
DOM是所有前端开发每天打交道的东西,但是随着jQuery等库的出现,大大简化了DOM操作,导致大家慢慢的“遗忘”了它的本来面貌.不过,要想深入学习前端知识,对DOM的了解是不可或缺的,所以本文力图系 ...
- HTML DOM 介绍
本篇主要介绍DOM内容.DOM 节点.节点属性以及获取HTML元素的方法. 目录 1. 介绍 DOM:介绍DOM,以及对DOM分类和功能的说明. 2. DOM 节点:介绍DOM节点分类和节点层次. 3 ...
- HTML DOM 对象
本篇主要介绍HTML DOM 对象:Document.Element.Attr.Event等4个对象. 目录 1. Document 对象:表示文档树的根节点,大部分属性和方法都是对元素进行操作. 2 ...
- 重撸js_2_基础dom操作
1.node 方法 返回 含义 nodeName String 获取节点名称 nodeType Number 获取节点类型 nodeValue String 节点的值(注意:文本也是节点) 2.inn ...
- 虚拟dom与diff算法 分析
好文集合: 深入浅出React(四):虚拟DOM Diff算法解析 全面理解虚拟DOM,实现虚拟DOM
- 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼?
引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...
- jQuery学习之路(2)-DOM操作
▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作 看 ...
随机推荐
- angularJs的一次性数据绑定:双冒号::
angularJs 中双冒号 ::来实现一次性数据绑定. 原文: https://blog.csdn.net/qianxing111/article/details/79971544 -------- ...
- 【Qt】splitter
一段简单的切割窗体的程序: <span style="font-size:18px;">#include "mainwindow.h" #inclu ...
- 算法笔记_168:历届试题 矩阵翻硬币(Java)
目录 1 问题描述 2 解决方案 1 问题描述 问题描述 小明先把硬币摆成了一个 n 行 m 列的矩阵. 随后,小明对每一个硬币分别进行一次 Q 操作. 对第x行第y列的硬币进行 Q 操作的定义: ...
- Navicat如何直接修改表中数据?
Navicat如何直接修改表中数据?
- PHP 表单和用户输入
PHP 的 $_GET 和 $_POST 用于检索表单中的值,比如用户输入. index.php页面 <?php /*时间:2014-09-14 *作者:葛崇 *功能:表单传值小实例 * ...
- 【JS】怎样同一时候处理多个window.onload事件
有时引用其他js时,其js却使用了window.onload事件,这种话,引入的页面的onload事件就有可能执行不了.如何才干两个都执行呢?除了将两个写到一块儿去的方法外,还有其他的方法 if(wi ...
- SVN如何查看修改的文件记录
主要是有四个命令,svn log用来展示svn 的版本作者.日期.路径等等:svn diff,用来显示特定修改的行级详细信息:svn cat,取得在特定版本的某文件显示在当前屏幕:svn list, ...
- glibc的几个有用的处理二进制位的内置函数(转)
— Built-in Function: int __builtin_ffs (unsigned int x) Returns one plus the index of the least sign ...
- SettingsEditplus
迁移时间:2017年5月20日10:51:51Author:Marydon官网下载 http://www.editplus.com/设置一 1.修改字体大小及背景色 首选项-->Genera ...
- 配置的好的Apache和PHP语言的环境下,如何在Apache目录下htdocs/html目录下 同时部署两个项目呢
建虚拟目录打开Apache->conf->httpd.conf在最下面粘贴NameVirtualHost 127.0.0.1 <VirtualHost 127.0.0.1> S ...