定义webbrowser中的dom文档_BOM和DOM基础

最新推荐文章于 2023-12-11 00:49:33 发布

weixin_39639622

最新推荐文章于 2023-12-11 00:49:33 发布

阅读量142

点赞数

文章标签：定义webbrowser中的dom文档

本文链接：https://blog.csdn.net/weixin_39639622/article/details/111330436

版权

1.BOM和DOM入门

首先什么是BOM？BOM是Browser Object Model的简写，即浏览器对象模型。其次BOM由一系列对象组成，是访问、控制、修改浏览器的属性的方法。并且DOM没有统一的标准(每种客户端都可以自定标准)。其中BOM的顶层是window对象。
由上图可以看出window对象是js中的顶级对象，所有定义在全局作用域中的变量、函数都会变成window对象的属性和方法，在调用的时候可以省略window。而history对象，里面记录的是浏览器的浏览历史记录，location对象提供了当前窗口加载的文档的相关信息，还提供了一些导航功能。navigator对象这个对象代表浏览器实例。而其中最重要的就是DOM对象，我们所有的操作基本都在DOM上；那么什么时DOM？
DOM是Document Object Model的简写，即文档对象模型。DOM由一系列对象组成，是访问、检索、修改XHTML文档内容与结构的标准方法。DOM标准是由w3c制定与维护。并且是跨平台与跨语言的。用于XHTML、XML文档的应用程序接口(API)。并且提供一种结构化的文档描述方式，从而使HTML内容使用结构化的方式显示。DOM的顶层是document对像。
简言之：BOM 是为了操作浏览器出现的 API，window 是其根对象。DOM 是为了操作文档出现的 API，document 是其根对象。BOM包括DOM。
2.BOM具有的方法：
（1）常见的弹窗

三种弹窗方式1.含有确定按钮的window.alert，当需要一个信息来警示你的操作而不需要返回时可以使用这个按钮
2.含有确认取消的弹窗window.confirm，需要提供一个确认与取消按钮的可以使用
3.可以输入内容的弹窗window.prompt 需要在弹窗中输入值的时候可以使用

（2）setTimeout和setInterval的区别和联系
这是浏览器中定时器的作用；其中window.setTimeout("getTimes()",1000);调用方法隔一秒再执行一次，执行一个操作时用这个；window.setInterval("getTimes()",1000);每隔一秒运行一次函数，循环间隔操作使用这个。
（3）BOM对象-location-history-navigator具有的方法
location对象：

var href=window.location.href;获取url
var hostname = window.location.hostname;获取到host名称
var port = window.location.port;获取端口号
var host = window.location.host;获取到host

history对象：
window.history.go(args)是对浏览器前进或者后退几步，当args为0为刷新当前页面，整数n为前进n次，负数n为后退n步
var he = window.screen.height;var wi = window.screen.width;获取屏幕的分辨率
3.DOM基础
（1）DOM中的节点之间的关系

父子关系（parent-child）：<html> 元素作为父级，<head> 和 <body> 元素作为子级
兄弟关系（Sibling）:<a> 和 <h1> 元素就是兄弟关系;<title> 和 <h1> 元素并不是兄弟关系

（2）我们都可以操作DOM对象进行哪些操作？

1.查询元素（进行操作元素、或者元素的属性、文本）
2.操作文本
3.操作属性
4.操作CSS样式（一个特殊的属性style）
5.操作元素

（3） DOM编程获得元素的方式

1通过标签名称获得一个对象 var username = window.document.getElementById("username");
2.通过标签名字获取到元素，结果为一个数组集合 var inp= document.getElementsByTagName("input");
3.通过标签的name属性来获取到对象 var inp =document.getElementsByName("hobby");

（4）获取到元素的属性
获取元素的属性，首先获取到节点，然后再获取到想要的属性 var inp = document.getElementById("username"); var ty= inp.type; var va= inp.value; var na=inp.name;
第二种获取到元素的属性（获得元素的默认值） var ty= inp.getAttribute("type"); 改变为inp.setAttribute()
（5）操作元素的样式
第一种：获取到元素，直接更改某一具体样式属性： var inp = document.getElementById("username"); inp.style.backgroundColor="red";
第二种:获取到元素，将设置好了class样式赋值给元素。 var div = document.getElementById("div1"); div.className()括号中跟style中的样式的名称
（6）操作文本的值
获取文本两中方法

var inn = div.innerHTML;会获取标签内的所有html内容
var inn1 = div.innerText;只会获得文本信息
注意：双标签有innerHTML，innertext，单标签没有这两个方法
特殊的标签select ，textarea这两个标签，获取到他们的值必须使用value这个方法

（7）操作节点

创建标签节点var p = document.createElement("p");
var inp = document.createElement("input");
fom.appendChild(p);在fom表单中添加p标签
fom.insertBefore(p,node);在node标签之前添加p标签
p.appendChild(inp);在p标签中添加到inp
p.removeChild（inp）;在p标签中移除inp
p.remove();移除p标签
p.innerText="picture:"在p标签中插入文本