HTML、DOM和JS的了解
1、HTML、JS、以及DOM的关系的关系说明
关于HTML、JS、以及DOM的关系一直很迷惑，虽然一直听人说，但并未理解。
偶然间，忽然懂了这三者之间的关系。
举例吧：
- HTML就是最终的页面，是一个静态的页面。是什么就是什么，没有外界操作就不会有改变；
- 如果要修改HTML的内容呢？这时就需要使用JS语言了，使用JS对HTML进行处理，调用对应函数即可；
- 但是JS如何处理的呢？JS函数内部又是如何处理的呢？这就需要DOM了。DOM 定义了访问和操作 HTML 文档的标准方法。
相当于DOM是一个底层API；JS通过对底层API进行封装，提供了简单的操作方法；我们用JS最多，但如果不用JS，其他语言同样可以通过DOM操作HTML。这就是三者之间的关系了。
2、对于DOM中结点的理解
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点
这里要注意：
- 文档节点只有一个，就是文档本身。
- HTML元素：这个包含那些呢？参考链接即可，特别全。HTML 元素参考 - HTML（超文本标记语言） | MDN
- 属性结点：HTML 属性是属性节点。但HTML属性有哪些呢？HTML 属性参考 - HTML（超文本标记语言） | MDN
- 文本节点：文本节点很好理解。我们一般在元素内直接写的文字就是文本节点（虽然一般意识不到，不过在DOM中是这么处理的）。
3、结束
HTML、DOM和JS的了解的更多相关文章
- how to get iframe dom in js
how to get iframe dom in js https://stackoverflow.com/questions/3999101/get-iframes-document-from-ja ...
- HTML(.js) – 最简单的方式操作 DOM 的 JS 库
HTML(.js) 是一个轻量的(压缩后~2kb) JavaScript 库,简化了与 DOM 交互的方法. 这个 JavaScript 库的方法可读性很好,并具有搜索和遍历 DOM 的方法.相比 j ...
- 开发成功-cpu-mem监控动态折线图--dom esayui js java
jsp ------------------------------------------------------------------------------------------- ---- ...
- JS操作DOM对象——JS基础知识（四）
一.JavaScript的三个重要组成部分 (1)ECMAScript(欧洲计算机制造商协会) 制定JS的规范 (2)DOM(文档对象模型)重点学习对象 处理网页内容的方法和接口 (3)BOM(浏览器 ...
- JS中的函数、Bom、DOM及JS事件
本期博主给大家带来JS的函数.Bom.DOM操作,以及JS各种常用的数据类型的相关知识,同时,这也是JavaScript极其重要的部分,博主将详细介绍各种属性的用法和方法. 一.JS中的函数 [函数的 ...
- DOM 以及JS中的事件
[DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document. ...
- 从零开始的JS生活（二）——BOM、DOM与JS中的事件
上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举 ...
- 从template到DOM(Vue.js源码角度看内部运行机制)
写在前面 这篇文章算是对最近写的一系列Vue.js源码的文章(https://github.com/answershuto/learnVue)的总结吧,在阅读源码的过程中也确实受益匪浅,希望自己的这些 ...
- [AaronYang原创] 大话ASP.NET MVC3+ （C#与DOM与JS页面上的很炫的技巧）
案例一:比如我要传递一个新闻标题和新闻内容 存储到数据库去 1.最简单的通用Url公式就是 function getUrl() { var d = $("#表单ID").seria ...
随机推荐
- swipeRefreshLayout与webview滑动冲突
遇到这么个bug,webview使用swipeRefreshLayout时,下拉时事件不会被webview捕获,而是执行swipeRefreshLayout的刷新,网上一大堆一大堆的解决办法,都是什么 ...
- 分布式协调服务ZooKeeper工作原理
分布式协调服务ZooKeeper工作原理 原创 2016-02-19 杜亦舒 性能与架构 性能与架构 性能与架构 微信号 yogoup 功能介绍 网站性能提升与架构设计 大数据处理框架Hadoop.R ...
- Oracle Restart能够用来给Oracle GoldenGate 做 High Availability 使用么？
Oracle Restart能够用来给Oracle GoldenGate 做 High Availability 使用么? 来源于: Can Oracle Restart be used with ...
- flink checkpoint 源码分析 （二）
转发请注明原创地址http://www.cnblogs.com/dongxiao-yang/p/8260370.html flink checkpoint 源码分析 (一)一文主要讲述了在JobMan ...
- ToStringBuilder学习（二）：两种方法用法优缺点及一个问题
研究ApacheCommon源码, 先从一个最简单的开始,即围绕Object类里的toString方法自动化实现的一系列类. 怎么来自动化地实现toString方法, 有两种:反射和手 ...
- NiftyNet 项目了解
1. NiftyNet项目概述 NiftyNet项目对tensorflow进行了比较好的封装,实现了一整套的DeepLearning流程.将数据加载.模型加载,网络结构定义等进行了很好的分离,抽象封装 ...
- js----Open（）函数
JS中open()函数介绍 window=object.open([URL ][, name ][, features ][, replace]]]]) URL:新窗口的URL地址 name:新窗口的 ...
- linux学习笔记5--命令rmdir和rm
昨天学习了创建目录的命令mkdir ,接下来学习一下linux中删除文件和目录的命令: rm命令. rm是一个危险的命令,使用的时候要特别当心,尤其对于新手,否则整个系统就会毁在这个命令(比如在/(根 ...
- IPC之共享内存
man 7 shm_overview shm_overview - Overview of POSIX shared memory. 同样,SystemV实现的共享内存是旧的机制,但应用广泛:Posi ...
- 最短路中部分点仅仅能从中随意选取K个问题
题意:给N个点,还有另外m个点(当中仅仅能选K个).求最短路. 思路:在SPFA的基础上,用一个数组来统计,在某点入队时(要拓展其它点了),若该点是m个点中的,则count[i]=原来的+1:若不是. ...
how to get iframe dom in js https://stackoverflow.com/questions/3999101/get-iframes-document-from-ja ...
HTML(.js) 是一个轻量的(压缩后~2kb) JavaScript 库,简化了与 DOM 交互的方法. 这个 JavaScript 库的方法可读性很好,并具有搜索和遍历 DOM 的方法.相比 j ...
jsp ------------------------------------------------------------------------------------------- ---- ...
一.JavaScript的三个重要组成部分 (1)ECMAScript(欧洲计算机制造商协会) 制定JS的规范 (2)DOM(文档对象模型)重点学习对象 处理网页内容的方法和接口 (3)BOM(浏览器 ...
本期博主给大家带来JS的函数.Bom.DOM操作,以及JS各种常用的数据类型的相关知识,同时,这也是JavaScript极其重要的部分,博主将详细介绍各种属性的用法和方法. 一.JS中的函数 [函数的 ...
[DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document. ...
上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举 ...
写在前面 这篇文章算是对最近写的一系列Vue.js源码的文章(https://github.com/answershuto/learnVue)的总结吧,在阅读源码的过程中也确实受益匪浅,希望自己的这些 ...
案例一:比如我要传递一个新闻标题和新闻内容 存储到数据库去 1.最简单的通用Url公式就是 function getUrl() { var d = $("#表单ID").seria ...
遇到这么个bug,webview使用swipeRefreshLayout时,下拉时事件不会被webview捕获,而是执行swipeRefreshLayout的刷新,网上一大堆一大堆的解决办法,都是什么 ...
分布式协调服务ZooKeeper工作原理 原创 2016-02-19 杜亦舒 性能与架构 性能与架构 性能与架构 微信号 yogoup 功能介绍 网站性能提升与架构设计 大数据处理框架Hadoop.R ...
Oracle Restart能够用来给Oracle GoldenGate 做 High Availability 使用么? 来源于: Can Oracle Restart be used with ...
转发请注明原创地址http://www.cnblogs.com/dongxiao-yang/p/8260370.html flink checkpoint 源码分析 (一)一文主要讲述了在JobMan ...
研究ApacheCommon源码, 先从一个最简单的开始,即围绕Object类里的toString方法自动化实现的一系列类. 怎么来自动化地实现toString方法, 有两种:反射和手 ...
1. NiftyNet项目概述 NiftyNet项目对tensorflow进行了比较好的封装,实现了一整套的DeepLearning流程.将数据加载.模型加载,网络结构定义等进行了很好的分离,抽象封装 ...
JS中open()函数介绍 window=object.open([URL ][, name ][, features ][, replace]]]]) URL:新窗口的URL地址 name:新窗口的 ...
昨天学习了创建目录的命令mkdir ,接下来学习一下linux中删除文件和目录的命令: rm命令. rm是一个危险的命令,使用的时候要特别当心,尤其对于新手,否则整个系统就会毁在这个命令(比如在/(根 ...
man 7 shm_overview shm_overview - Overview of POSIX shared memory. 同样,SystemV实现的共享内存是旧的机制,但应用广泛:Posi ...
题意:给N个点,还有另外m个点(当中仅仅能选K个).求最短路. 思路:在SPFA的基础上,用一个数组来统计,在某点入队时(要拓展其它点了),若该点是m个点中的,则count[i]=原来的+1:若不是. ...