博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
DOM
阅读量:5790 次
发布时间:2019-06-18

本文共 1739 字,大约阅读时间需要 5 分钟。

hot3.png

DOM

3.1 文档:DOM的D

当创建了一个网页并把它加载到web浏览器中时,DOM就在幕后自动生成,它把你编写的网页文档转换成一个文档对象。

3.2 对象:DOM的O

在JS中,Object分为三种:user-defined object, native object, host object.

在JS最初时,有些宿主对象就已经可用了,最基础的时window对象。

window对象对应着浏览器窗口本身,这个对象的属性和方法统称为BOM(浏览器对象模型),但是称为Window Object Model也许更贴切。BOM 提供来window.open和window.blur等方法,这两个方法时各种弹出窗口和下拉菜单的根源。

对于Window对象,应把注意力集中在浏览器窗口内的网页内容上。document对象的主要功能就是处理网页内容。

3.3 模型:DOM的M

模型的含义是某种事物的表现形式。就像一列火车模型代表一列真正的火车。一张地图代表一个城市,DOM代表加载到浏览器窗口的当前网页。浏览器提供了网页的地图(或者说模型),而我们可以通过JS来读取这张地图。

DOM把一份文件表示为一棵树(tree),有父,子,兄弟节点(parent,child,sibling)。一位特定的家族成员既是某些成员的父辈,优势另一位成员的子辈,同时还是另一位成员的兄弟。

图3-1

图3-1

   
Shopping

what to buy

dont forget to but this stuff.

  • a tin of beans
  • cheese
  • milk

图3-2

图3-2

分析下刚才的HTML文件

<html>标签表示整个文档的开始,所有的其他元素都包含在内,表示它至少是一个父节点(parent)。如果这是一颗树,这个<html>标签就是树根(根元素)
接下来深入一层,有两个分枝<head><body>。他们位于统一层次,且互不包含,所以时兄弟关系。他们有着共同的父节点<html>,但又有各自的子元素,所以他们本身又是其他一些元素的父元素。
<head>元素有两个子元素<meta><title>(兄弟关系),<body>有三个子元素:<h1>,<p>,<ul>(兄弟关系)。

3.4 节点

在DOM中,文档是由节点构成的结合,这些节点是文档树上的树枝和树叶而已。

DOM里有许多不同类型的节点,有很多类型的DOM节点包含着其他类型的节点,其中有三种:元素节点,文本节点,属性节点。

3.4.1 元素节点

DOM的原子是元素节点(element node)。他们是最低级别的节点,如<body>,<p>,<ul>之类的元素。这些元素在文档中的布局形成了文档的结构。

元素的名字就是节点的名字,文本段落是p,无序清单元素的名字是ul,列表项元素的名字是li。

3.4.2 文本节点

在互联网上,绝大多数内容都是由文本提供的。上例中<p>包含着文本‘dont forget to buy this stuff’。它是一个文本节点。在XHTML中,文本节点总是被包含在元素节点的内部。但并非所有的元素节点都包含有文本节点。

3.4.3 属性节点

属性节点用来对元素做出更具体的描述,例如几乎所有元素都有一个title属性,可以利用这个属性对包含在元素离的东西做出准确的描述。

dont forget to but this stuff

3.4.4 CSS

DOM并不是与网页结构打交道的唯一技术,CSS(层叠样式表)告诉浏览器应该如何显示一份文档的内容。

类似JS脚本,对样式的声明既可以在<head>部分(<style>标签之间),也可以放在另外的一个样式表文件里。
CSS声明元素样式的语法与JS的函数定义语法类似:

selector{ property:value; }

举例;

p{ color:yellow; font-family:"arial",sans-serif; font-size:1.2em; }

转载于:https://my.oschina.net/CharmyZ/blog/718313

你可能感兴趣的文章
Iceworks 2.8.0 发布,自定义你的 React 模板
查看>>
胖哥学SpringMVC:请求方式转换过滤器配置
查看>>
Kotlin 更加优雅的 Builder - 理解 with
查看>>
前端日拱一卒D6——字符编码与浏览器解析
查看>>
深入理解浏览器的缓存机制
查看>>
微软向Linux社区开放60000多项专利:对开源微软是认真的
查看>>
Hoshin Kanri在丰田的应用
查看>>
又拍云沈志华:如何打造一款安全的App
查看>>
克服大数据集群的挑战
查看>>
PostgreSQL并发控制(MVCC, 事务,事务隔离级别)
查看>>
DM***的第二阶段OSPF
查看>>
20180702搭建青岛RAC记录
查看>>
Spring Security OAuth 实现OAuth 2.0 授权
查看>>
linux文件及简单命令学习
查看>>
dubbo源码分析-架构
查看>>
新 Terraform 提供商: Oracle OCI, Brightbox, RightScale
查看>>
6套毕业设计PPT模板拯救你的毕业答辩
查看>>
IT兄弟连 JavaWeb教程 JSP与Servlet的联系
查看>>
Windows phone 8 学习笔记
查看>>
linux并发连接数:Linux下高并发socket最大连接数所受的各种限制
查看>>