DOMBOM(source、methods、contents、Application)

何为DOM?

Document Object Model Dom,是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上,组织页面的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM。

可以认为DOM是页面上数据和结构的一个树形表示。

Source:

DOM的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”,双方为了在JavaScript与JScript一决生死,于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物,既有VBScript、ActiveX、以及微软自家的DHTML格式等,使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。

Methods:

HTML DOM是关于如何获取、修改、添加或删除HTML元素的标准。

HTML文档中的所有节点组成了一个文档树。

访问HTML元素等同于访问节点,主要有以下三种方式:

1)通过使用getElementById()方法

2)通过使用getElementByTagName()方法

3)通过使用getElementByClassName()方法

获取到DOM对象后,可以做很多事情,如获取该节点的各种信息,进一步获取其子节点、父节点的信息,还可以层层推进直到根或叶子。

Contents:

 

 

DOM= Document Object Model,文档对象模型,DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说,这是表示和处理一个HTML或XML文档的常用方法。

换句话说,这是表示和处理一个HTML或XML文档的常用方法。有一点很重要,DOM的设计是以对象管理组织(OMG)的规约为基础的,因此可以用于任何编程语言。最初人们把它认为是一种让JavaScript在浏览器间可移植的方法,不过DOM的应用已经远远超出这个范围。Dom技术使得用户页面可以动态地变化,如可以动态地显示或隐藏一个元素,改变它们的属性,增加一个元素等,Dom技术使得页面的交互性大大地增强。

Application:

通过 JavaScript,您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。

DOM的修改

1)改变HTML内容;

2)改变CSS样式;

3)改变HTML属性;

4)创建新的HTML元素;

5)删除已有的HTML元素;

6)改变时间(处理程序)。

也就是说,从dom操作开始,真正能够通过编程对文档进行控制。

何为BOM?

 

Source:

BOM:Browser Objec Model,是指浏览器对象模型,是用于描述这种对象和对象之间层次关系的模型。BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。

Methods:

对BOM的子对象包括document、history、location、screen、navigator和frame对象,每个对象都有许多的操作方法。

DOM对象的方法前面也说了,就如window,有window.open(),打开窗口,或window.close,关闭窗口,再如系统对话框,消息框alert,对话框confirm等等。

Contents:

BOM由多个对象组成,其中代表浏览器窗口的window对象是BOM的顶层对象,其他对象是该对象的子对象,包含了document、history、location、screen、navigator和frame对象。

 

Application:
1. 弹出新浏览器窗口的能力;
2. 移动、关闭和更改浏览器窗口大小的能力;
3. 可提供WEB浏览器详细信息的导航对象;
4.可提供浏览器载入页面详细信息的本地对象;
5 .可提供用户屏幕分辨率详细信息的屏幕对象;
6. 支持Cookies;
7. Internet Explorer对BOM进行扩展以包括ActiveX对象类,可以通过JavaScript来实现ActiveX对象。

 

转载于:https://www.cnblogs.com/ceneasy/p/9853611.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/249139.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

sublime 无法下载插件解决办法(亲测有效)

最近发现sublime装不到插件 只需要在Preferences > Package Settings > Package Control > Settings - User页面加上以下代码即可: "channels":["https://erhan.in/channel_v3.json"]上述频道亲测有效,如果还不能使用的小…

ES命令

基础概念 Elasticsearch有几个核心概念。从一开始理解这些概念会对整个学习过程有莫大的帮助。 接近实时(NRT) Elasticsearch是一个接近实时的搜索平台。这意味着,从索引一个文档直到这个文档能够被搜索到有一个轻微的延迟&#xff…

Bug : Bash on Ubuntu on Windows scp work on window but not in shell file

: No Permission转载于:https://www.cnblogs.com/rgqancy/p/10726154.html

图片做背景撑开div

需求点&#xff1a; 设计师给了一张超大背景图&#xff0c;需要做一个不知道大小广告位&#xff0c;要求就是要把图片撑满整个页面&#xff0c;而且还得保证自适应。 解决方案一 &#xff08;亲测有效&#xff09; HTML代码&#xff1a; <div class"wrap">…

十一、jQuery的基本用法

初步接触不是很习惯&#xff0c;之前都是用的js&#xff0c;但是jQuery去掉了js很多繁琐的内容&#xff0c;用的不是很熟&#xff0c;所以先简单的记录一下&#xff0c;后续在继续补充 jq获取html内容: $("#id") 获取id $(".class") class名 …

spring-注解---IOC(3)

spring--注解---IOC(3) package com.zwj.bean;public class Blue {public Blue(){System.out.println("blue...constructor");}public void init(){System.out.println("blue...init...");}public void detory(){System.out.println("blue...detory..…

绝对定位的div图片居中自适应

需求点 固定定位div中添加图片内容&#xff0c;保证图片垂直居中&#xff0c;并且自适应。 一般在第三方UI组件中&#xff0c;这种布局需求较为常见 解决方案一 &#xff08;亲测有效&#xff09; HTML代码&#xff1a; <div class"el-carousel__item is-active is…

英语进阶系列-A06-本周总结

本周总结 目录Content 英语进阶系列-A01-再别康桥 英语进阶系列-A02-英语学习的奥秘 英语进阶系列-A03-英语升级练习一 英语进阶系列-A04-英语升级练习二 英语进阶系列-A05-英语升级练习三 古诗Poem 再别康桥 回乡偶书 梅花 劝学 游子吟 词汇Vocabulary be; have; give; get; t…

在div中设置文字与内部div垂直居中

要实现如图一所示的结果&#xff1a; html代码如下&#xff1a; <!DOCTYPE html> <html><head lang"zh"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta charset"utf-8" /><title>商…

王之泰201771010131《面向对象程序设计(java)》第九周学习总结

第一部分&#xff1a;理论知识学习部分 第7章异常、日志、断言和调试 概念&#xff1a;异常、异常类型、异常声明、异常抛出、 异常捕获1.异常处理技术2.断言的概念及使用3.基本的调试技巧 1&#xff09;异常的概念 a.Java的异常处理机制可以控制程序从错误产生的 位置转移到能…

vue移动端UI框架——Vant全局引入vs局部引入

全局引入 1.在main.js中全局引入全部vant组件 优点&#xff1a;可以在所有vue文件的template中定义所需组件缺点&#xff1a;打包发布时会增加包的大小&#xff0c;Vue的SPA首屏打开时本来就有些慢&#xff0c;同时不能在js中使用类似Toast功能的组件 代码如下&#xff1a; …

大前端完整学习路线(完整版),路线完整版

第一阶段&#xff1a; HTMLCSS: HTML进阶、CSS进阶、divcss布局、HTMLcss整站开发、 JavaScript基础&#xff1a; Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。 JS基本特效&#xff1a; 常见特效、例如&#xff1a;tab、…

web-8. 多框架页面的创建

8. 多框架页面的创建 8.1 框架概念 框架是由单个框架加上框架集构成的区域。 每个框架是指页面中一个独立额区&#xff0c;框架集是一个关于框架结构的页面&#xff0c;定义本页面的框架数、大小、布局以及框架之间的相互关系。 8.2 框架集标记 框架集文件保存了所有框架的信息…

汇编语言第二章知识梳理及思考

第二章 寄存器&#xff08;CPU工作原理&#xff09; CPU概述 CPU由运算器、控制器、寄存器等器件组成&#xff0c;这些器件靠内部总线相连。 内部总线实现CPU内部各个器件之间的联系。 外部总线实现CPU和主板上其他器件的联系。 寄存器概述 8086CPU有14个寄存器&#xff1a; AX…

前端面试题总结(js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源)持续更新

Vue面试题 生命周期函数面试题 1.什么是 vue 生命周期 2.vue生命周期的作用是什么 3.第一次页面加载会触发哪几个钩子 4.简述每个周期具体适合哪些场景 5.created和mounted的区别 6.vue获取数据在哪个周期函数 7.请详细说下你对vue生命周期的理解&…

Neural Networks and Deep Learning 读书笔记

1 转载于:https://www.cnblogs.com/jellyj/p/9867103.html

JS中的数据类型转换:String转换成Number的3种方法

今天有个学员问了个关于数据类型转换的问题&#xff0c;我觉得这个是可以给大家说一下的。 JavaScript中&#xff0c;可以通过以下3种方法来将string值转换成number&#xff1a; 1.调用Number()来对string进行值类型转换。 2.parseInt()。 3.parseFloat()。 Number() 使用…

Java学习——使用Static修饰符

程序功能&#xff1a;通过两个类 StaticDemo、LX4_1 说明静态变量/方法与实例变量/方法的区别。 package Pack1;public class Try {public static void main(String[] args) {// TODO Auto-generated method stubSystem.out.println("静态变量x"StaticDemo.getX());非…

JavaScript从入门到精通之入门篇(一)概念与语法

入门篇大纲 第一部分 概念与语法 1.JavaScript的历史 2.基本概念 3.JavaScript的使用、调试和异常处理 4.基本词法和变量 5.数据类型和类型转换 6.运算符 算数运算符 赋值运算符 一元运算符 使用一元运算符&#xff0c;将会把所有的内容转换为数值运算&#xff0c;不…

【小记】-005--纯CSS实现的小玩意儿

效果图奉上 代码奉上 <!DOCTYPE html> <html lang"zh"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv"X-UA-Compatible&q…