1.背景介绍
        什么是DOM？简单地说，DOM是一套对文档的内容进行抽象和概念化的方法, 在现实世界里，人们对所谓的'世界对象模型'都不会陌生，例如，当用'汽车'、'房子'和'树'等名词来称呼日常生活环境里的事物时，我们都可以百分百的肯定对方知道我们说的是什么，这是因为人们在对这些名词所代表的的东西有着相同的认知。于是，当对别人说"汽车停在车库里"时，可以断定他们不会理解为"小鸟关在壁橱里",我们的"世界对象模型"不进可以用来描述客观存在的事物，还可以同来描述抽象概念。例如，假设有个人想我问路，而我给出的答案是"左边第三栋房子"，这个答案有没有意义取决于那个人能够理解"左边"和"第三"的含义。如果他不会数数或者分不清左右，则不管他是否理解这几个概念，我的回答对他都不会有任何的帮助。在现实世界中，正是因为大家对抽象的"世界对象模型"有着基本的共识，人们才能用非常简单的话来表达出复杂的含义并得到对方的理解。而DOM的定义则是由W3C所制定的标准，定义为"一个与系统平台和编程语言无关的接口，程序和脚本可以通过这个接口动态地访问和修改文档的内容`、结构和样式。"

2.知识剖析
        2.1. 节点是什么

        节点这个词是一个网络用语，代表了网络中的一个连接点。一个网络就是由一些节点构成的集合。

        在现实世界中，一切事物都由原子构成。原子就是现实世界的节点。但是原子同样还可以进一步分解为更细小的亚原子微粒。这些亚原子微粒同样也是节点。

        DOM也是同样的情况。文档是由节点构成的集合，只不过此时的节点是文档树上的树枝和树叶而已。

        在DOM中有许多不同类型的节点。就像原子包含着亚原子微粒那样，也有很多类型的DOM节点包含着其他类型的节点。接下来我们先看看其中的三种：元素节点、文本节点和属性节点。

        2.2. 元素节点

        在DOM中的原子就是元素节点。

        像是我们现在所看到的这个网页，我们在编写时，会用到诸如<body>、<head>、<p>这些元素。如果把Web上的文档比作一座大厦，那么元素就是建造这座大厦的砖块，这些元素在在文档中的布局形成了文档的结构。元素可以包含其他的元素，在我们所看到的页面页中，内容都被包含在在一个<section>元素的内部。而唯一没有被包含在其他元素中的唯一元素是'<html>'，他和我们的节点树的根元素，其他的所有元素都被包含在'<html>'中。

　　网页的部分节点树:

 

        2.3. 文本节点

        元素节点只是节点类型的一种。如果一份文档完全有一些空白元素构成，他将有一个结构，但这份文档本身将不会包含什么内容。

        在我们的ppt首页中，'<p>'元素包含着文本，'分享人：刘洪利'。他就是一个文本节点。在html文档里，文本节点总是被包含在元素节点的内部。

        2.4. 属性节点

        属性节点用来对元素做出更具体的描述。例如，几乎所有的元素都有一个title属性，而我们可以利用这个属性对包含在元素里的东西做出准确的描述：'<p title="a gentle reminder">这是一个带有温馨提示的p标签</p>'

        在DOM中，title="a gentle reminder"是一个属性节点。因为属性总是被放在起始标签里，所以属性节点总是被包含在元素节点中。并非所有的标签都包含着属性，但是所有的属性都被元素包含.

　　元素的构成:

   2.5. 常见的DOM操作

获取DOM

        通过使用 getElementById() 方法匹配元素的id属性来访问元素节点，对元素节点进行操作

        通过使用 getElementsByTagName() 方法匹配元素的tagName来访问元素节点，对元素节点进行操作

        通过使用 getElementsByClassName() 方法匹配元素的className来访问元素节点，对元素节点进行操作

        值得注意的是， getElementsByTagName() 和 getElementsByClassName() 这两种方法因为其访问的是节点中的可能为复数的属性，所以得到的会是一个以数组的形式来体现出来的元素节点集合，我们可以通过打印获取到的DOM节点来判断类型 .

DOM事件          

        onclick事件---当用户点击时执行

        onload事件---当用户进入时执行

        onunload事件---用用户离开时执行

        onmouseover事件---当用户鼠标指针移入时执行

        onmouseout事件---当用户鼠标指针移出时执行

        onmousedown事件---当用户鼠标摁下时执行

        onmouseup事件---当用户鼠标松开时执行

        onblur事件---当对象失去焦点时发生

        onchange事件---当对象域的值被改变时发生

        button 事件---属性可返回一个整数，指示当事件被触发时哪个鼠标按键被点击。

DOM及相关操作的更多相关文章

  1. JavaScript中的DOM及相关操作

    一.什么是DOM JavaScript由ECMAScript.DOM和BOM三部分组成,其中DOM代表描述网页内容的方法和接口,即文档对象模型(Document Object Model).在网页上, ...

  2. js DOM优化相关探索

    我在这尝试两个方面:-->DOM与js -->DOM与浏览器 (最近在秒味视频上学到不少,哈哈哈) 一.DOM与js 1.js与dom的交互问题 频繁的与dom交互,是一件浪费时间与金钱的 ...

  3. 前端学习笔记(zepto或jquery)——对li标签的相关操作（一）

    对li标签的相关操作——点击li标签进行样式切换的两种方式 Demo演示: 1 2 3 4 // 详解: 第一种方式(以ul为基础): $("ul").bind("cli ...

  4. 10-JavaScript之DOM的事件操作

    JavaScript之DOM的事件操作 1.介绍 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等 ...

  5. 前端 ----关于DOM的事件操作

    关于DOM的事件操作   一.JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for ...

  6. python 全栈开发，Day51(常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍)

    昨日内容回顾 1.三种引入方式 1.行内js <div onclick = 'add(3,4)'></div> //声明一个函数 function add(a,b){ } 2. ...

  7. Dom的样式操作和属性操作

    如果说web的研究对象是html和css,那么整个dom结构,包含html树和dom树的dom结构才是研究对象,而在整个页面呈现上面,js起到的作用则是异步的用户行为. 按照上面整个思路,获取dom元 ...

  8. 前端JavaScript(2) --常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍

    昨日内容回顾 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 ...

  9. 从零自学Hadoop(20)：HBase数据模型相关操作上

    阅读目录 序 介绍 命名空间 表 系列索引 本文版权归mephisto和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 文章是哥(mephisto)写的,SourceLink 序 ...

随机推荐

  1. 小白搭建WNMP详细教程---PHP安装与设置

    php的安装请参考WAMP中PHP的安装教程https://www.cnblogs.com/missbye/p/12049925.html 需要注意的是,我们下载的PHP版本要下载Non Thread ...

  2. Flink-v1.12官方网站翻译-P004-Flink Operations Playground

    Flink操作训练场 在各种环境中部署和操作Apache Flink的方法有很多.无论这种多样性如何,Flink集群的基本构件保持不变,类似的操作原则也适用. 在这个操场上,你将学习如何管理和运行Fl ...

  3. python爬虫selenium相关

    首先上很好用的selenium中文文档,基本上所有问题都能通过阅读此文档解决.可惜好像没找到翻译者名称. https://python-selenium-zh.readthedocs.io/zh_CN ...

  4. 看KubeEdge携手K8S，如何管理中国高速公路上的10万边缘节点

    摘要:为保证高速公路上门架系统的落地项目的成功落地,选择K8s和KubeEdge来进行整体的应用和边缘节点管理. 一.项目背景 本项目是在高速公路ETC联网和推动取消省界收费站的大前提下,门架系统的落 ...

  5. 基于线段树的RMQ

    RMQ(Range Minimum/Maximum Query)区间最值查询,即给出长度为n的数组A,以及m组询问s.t(s<=t<=n),返回区间[s,t]中的最值. 基于线段树的方法实 ...

  6. Codeforces Round #697 (Div. 3) G. Strange Beauty (DP,数学)

    题意:给你一组数,问你最少删去多少数,使得剩下的数,每个数都能整除数组中其它某个数或被数组中其它某个数整除. 题解:我们直接枚举所有因子,\(dp[i]\)表示\(i\)在数组中所含的最大因子数(当我 ...

  7. UVA-11019 二维哈希算法

    UVA-11019 题意: 就是给你AB两个字符矩阵,问你B矩阵在A矩阵中的出现次数. 题解:  参考链接:https://blog.csdn.net/qq_38891827/java/article ...

  8. Git命令回退代码并同步到远程仓库

    git log 找到要回退的commit版本号并复制 git reset --hard [commitid] 本地库版本回退 git push -f origin [branchName] 同步到远端 ...

  9. 国产网络测试仪MiniSMB - 如何3秒内创建出16,000条源/目标MAC地址号递增流

    国产网络测试仪MiniSMB(www.minismb.com)是复刻smartbits的IP网络性能测试工具,是一款专门用于测试智能路由器,网络交换机的性能和稳定性的软硬件相结合的工具.可以通过此以太 ...

  10. 注意力(Attention)与Seq2Seq的区别

    什么是注意力(Attention)? 注意力机制可看作模糊记忆的一种形式.记忆由模型的隐藏状态组成,模型选择从记忆中检索内容.深入了解注意力之前,先简要回顾Seq2Seq模型.传统的机器翻译主要基于S ...