【JavaScript 8—基础知识点】:DOM
一、总体概述
1.1,什么是DOM
DOM(Document Object Model):D(文档):整个web加载的网页文档;O(对象):类似于window对象之类的东西,可以调用属性和方法,在这里特指document对象;M(模型):网页文档的树型结构(节点树)。
所以:W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。更多了解
1.2,节点树(M)
说明:从这个树型结构可以看出,DOM主要是对HTML的内部内容和结构进行一系列操作。
1.3,总体概况
说明:因为DOM是对文档内容、样式和结构的操作,所以,总结说来,DOM操作,是对各个节点的一系列操作。而,要想操作这些节点,那么就得找到相对应的节点,所以,我认为DOM操作的基础就是查找节点,然后就是节点操作。节点操作可以包括有:增添,移除,替换等,还包括其对于节点内部的操作,这里也就是进一步的操作,比如说对于节点内文本的操作等。最后还有一点,就是可以设置获取文档的尺寸和位置,这些,我认为都是一些样式的操作了。
二、细节探究
DOM在处理元素尺寸和位置的时候,有三个不同的方式:CSS大小、实际大小、周边大小。
2.1,CSS大小
首先:通过style获取到的是已设置的大小。如<div id="box" style="background:red;width:200px;height:200px;">测试Div</div>,获取到的就是200px,200px。
其次:获取计算后的大小,则是获取link和style标签里设置的大小。
最后:通过CSSRules获取大小,则是获取在CSS样式表中设置的大小。
注:这三种方法,都无法获取实际大小。
2.2,实际大小
在获取实际大小时,分为增添样式,添加滚动条,可视区大小。这三个方式的理解方式不同,如下:
三、BOM和DOM
总体说来,BOM和DOM是一种包含和被包含的关系。BOM是浏览器对象模型,DOM是文档对象模型。他们之间的关系,可以用下图表示:
BOM的主要对象是window对象,DOM则是在window对象下document对象下继承而来的。而根据自己的理解,BOM和DOM的关系,就好像了高楼的设计图,和房间的设计图一样。BOM主要着手的是整个浏览器页面,也就是window对象的操作,而DOM则主要着手的是在这个window页面里面的东西的一系列操作。
四、个人感受
又是一个知识点的总结,有时候真的感觉做这样的事儿很无聊,但每次总结完,又有一种充实的感觉。这也大概就是总结的力量吧!
【JavaScript 8—基础知识点】:DOM的更多相关文章
- JavaScript语言基础知识点图示(转)
一位牛人归纳的JavaScript 语言基础知识点图示. 1.JavaScript 数据类型 2.JavaScript 变量 3.Javascript 运算符 4.JavaScript 数组 5.Ja ...
- JavaScript语言基础知识点图示
原文:JavaScript语言基础知识点图示 一位牛人归纳的JavaScript 语言基础知识点图示. 1.JavaScript 数据类型 2.JavaScript 变量 3.Javascript 运 ...
- JavaScript 语言基础知识点总结
网上找到的一份JavaScript 语言基础知识点总结,还不错,挺全面的. (来自:http://t.cn/zjbXMmi @刘巍峰 分享 )
- JavaScript 语言基础知识点总结(思维导图)
JavaScript 数组 JavaScript 函数基础 Javascript 运算符 JavaScript 流程控制 JavaScript 正则表达式 JavaScript 字符串函数 JavaS ...
- 一套最全的JavaScript 语言基础知识点总结(思维导图10张)
1.DOM基础操作 2.数组基础 3.函数基础 4.运算符 5.流程控制语句 6.正则表达式 7.字符串函数 8.数据类型 9.变量 10.window对象
- 【JavaScript 7—基础知识点】:BOM
一.基础知识 1.1,什么是BOM BOM(browser object model):也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能.BOM缺少规范,每个浏览器提供商又按照自己想法去扩展 ...
- 【JavaScript 4—基础知识点】:函数
导读:函数这个东西,从VB开始就一直在用,不过那时候一般写不出来自己的函数或者类,觉得最高大上的,就是调用API函数了.现在,学习到了JavaScript,总结总结函数,显得很有必要.这篇文章,就从最 ...
- 【JavaScript 1—基础知识点】:宏观概述
导读:JavaScript是一门新的(也可以说是旧的或者半新语言),里面有很多的知识点都能和已有的知识产生共鸣.但是,虽然简单,相同点也有很多,也有不同点.我脑袋也不好使,所以对于我来说,还是有必要再 ...
- javascript的基础知识点
一:鼠标提示框 需求描述:鼠标移入都input上,div显示,移出,div消失 分析:控制display=block/none 鼠标移入,鼠标移出事件 <input type="bu ...
随机推荐
- ES-Mac OS环境搭建-kibana
简介 Kibana是一个为ElasticSearch 提供的数据分析的 Web 接口.可使用它对日志进行高效的搜索.可视化.分析等各种操作. 下载 打开elasticseach官网,单击downloa ...
- vue+webpack+VS Code入门简单的项目配置
为了方便,这边的编译器选择的是VS Code (Visual Studio Code); 打开VS Code,选择好自己的工作空间,然后新建一个文件夹作为我们项目的文件夹,然后,show time: ...
- GraphicsMagick安装&make命令使用
0.0本过程为GraphicsMagick Linux版安装,通过典型的make编译安装. 未了支持png和jpg格式,首先请安装依赖.执行 yum install -y libpng-devel y ...
- 4G牌照影响
与3G牌照发放整整讨论了10年不同,4G牌照发放在2009年3G规模建设4年后就进行了发放,也颇匹配于行业的加速度.那么,4G到底会在哪些方面.在何种程度上改变中国呢?其实,4G的影响可能没有那么大, ...
- linux服务器上的jenkins远程触发构建windows server 2012服务器上的jenkins任务
本文来自:https://blog.csdn.net/huashao0602/article/details/53318295 非常感谢原博主,亲测可行,这是我做CI持续集成试过的第6套方案了! 背 ...
- C# 分支语句 练习题
1.“请输入年份:”(1-9999) “请输入月份:”(1-12) “请输入日期:”(要判断大小月,判断闰年) 判断输入的时间日期是否正确 bool dateISOK = false;//放置日期是否 ...
- 目后佐道IT教育的品牌故事
关于目后佐道 目后佐道IT教育作为中国IT职业教育领导品牌,致力于HTML5.UI.PHP.Java+大数据.Python+人工智能.Linux.产品经理.测试.运维等课程培训.100%全程面授,平均 ...
- 11gR2新特性---Gpnp守护进程
在这篇文章中,我们会对11gR2 新的守护进程(资源名称ora.gpnpd)进行介绍,其中包含的gpnp的功能,启动顺序和基本的诊断方法. gpnp全称为grid plug and play,该组件的 ...
- 更新Svn客户端后,右键菜单中没有TortoiseSVN
环境: OS: Windows XP sp3 升级后SVNServer: VisualSVN Server 2.7.3 升级后SVNClient: 小乌龟: ...
- Codeforces Round #290 (Div. 2) _B找矩形环的三种写法
http://codeforces.com/contest/510/status/B 题目大意 给一个n*m 找有没有相同字母连起来的矩形串 第一种并查集 瞎搞一下 第一次的时候把val开成字符串了 ...