javascript学习六~BOM和DOM简介，window，screen，navigator，location，history，节点增删改查

最新推荐文章于 2018-09-28 19:22:24 发布

Carlos__z

最新推荐文章于 2018-09-28 19:22:24 发布

阅读量931

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Carlos__z/article/details/38092175

本文深入探讨了浏览器对象模型（BOM）和文档对象模型（DOM），包括其核心概念、对象属性与方法，并提供了实例代码演示如何操作网页元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

BOM和DOM

BOM(Brower Object Model，浏览器对象模型)，主要用来访问和操作浏览器各组件的一种方法。

BOM对象有：window、location、history、screen、navigator、document、frames[]

DOM(Document Object Model，文档对象模型)，主要用来访问和操作网页元素的一种方法。

网页元素就是各样的HTML标记。

DOM对象有：网页中有若干个标记，每个标记就是一个元素，该元素都有一个对应的对象，叫“元素对象”。

varobj = document.getElementById(“result”); //获取到id=result的对象

obj.innerHTML = “这里是内容”; //innerHTML是元素对象的属性

window对象的属性和方法

name：窗口名称

innerWidth和innerHeight：指浏览器窗口净宽；

document.documentElement.clientWidth和document.documentElement.clientHeight

documentElement是<html>元素对应的“元素对象”

outerWidth和outerHeight：Firefox支持，IE不支持，也没有可替代的

……

Close()：关闭窗口

Print()：

Alter()

Prompt()

Confirm()：确认对话框，点“确定”返回true

setTimeout() //只执行一次，通过“递归”实现重复执行

clearTimeout()

setInterval(); //周期执行

clearInterval()

onchange事件：当内容(值)发生改变时，去调用一个JS函数

onload事件：当网页内容(<body>中所有数据)加载完毕时，去调用一个JS函数

所有数据：指网页中的内容、图片、视频等都算。因此产生一个jQuery。

onclick事件：当点击元素时

补充：checkFileExt(this.value)

this是一个对象，代表当前正在操作的元素对象。this在这里代表<inputtype=“file”>对应的“元素对象”

screen屏幕对象

width：指屏幕的宽度，含任务栏

height：指屏幕的高度，是屏幕分辨率

availWidth：有效宽度，不含任务栏

availHeight：有效高度，不含任务栏

navigator浏览器软件对象

appName：指浏览器软件的名称

appVersion：指浏览器版本号

platform：操作平台

systemLanguage：系统语言

userLanguage：用户语言

//实例：根据不同浏览器，来输出window对象的innerWidth

var str = "浏览器名称："+navigator.appName;

str += "<br>版本号："+navigator.appVersion;

str += "<br>操作系统："+navigator.platform;

str += "<br>系统语言："+navigator.systemLanguage;

str += "<br>用户语言："+navigator.userLanguage;

document.write(str+"<hr>");

//根据不同的浏览器，输出窗口的尺寸

if(navigator.appName=="Netscape")

{

//Firefox浏览器

document.write("width："+window.innerWidth+"，height："+window.innerHeight);

}else

{

//IE

var width = document.documentElement.clientWidth;

var height = document.documentElement.clientHeight;

document.write("width："+width+"，height："+height);

}

Location地址栏对象

举例：http://www.sina.com.cn/about/index.html?username=yao&password=123456#top

href：是指完整的URL地址，经常用于“网页跳转”

protocol：访问的协议如：http://

host：主机名称，如：www.sina.com.cn

pathname：路径和文件名，如：about/index.html

search：查询字符串，如：?username=yao&password=123456

hash：锚点名称，如：#top

注意：以上各个属性，可以直接赋值。当赋一个新值时，将自动刷新网页。

reload()：重载网页，相当于“刷新”按钮

history浏览历史对象

length：有多少条历史记录

back()：相当于“返回”按钮

forward()：相当于“前进”按钮

go(n)：跳转到n指定的历史记录，n可以是0，-1代表上一页、1下一页

history.go(1)：前进

history.go(-1)：后退

history.go(0)：刷新

DOM简介

DOM是W3C制定的一个规范(标准)，让程序可以动态的修改或改变网页元素的内容、样式、结构。

DOM分类

核心DOM：是提供了操作HTML和XML文档的各种属性，是公共DOM，定义了一些公共的属性和方法。

XML DOM：针对XML操作的接口，也是一些属性和方法。

HTML DOM：针对HTML文档操作的接口，也是一些属性和方法。

Event DOM：事件对象模型，提供了一些常用的事件。比如：onclick、onload、onchange

CSS DOM：让JS去操作和访问CSS的各种属性。

HTML节点树

HTML节点树的相关概念：

一个HTML文档，只有一个根元素，就是<html>标记

父节点(parentNode)：当前节点的上一级元素；

子节点(childNode)：当前节点的下一级元素；

兄弟节点：相邻的两个节点，同属于一个父节点。

DOM节点类型

DOM中一共定义了12种节点类型，对于HTML文档的节点类型有5个：

Document文档节点：对应于当前网页文档，它对应的对象是document对象

Element元素节点：所有的HTML标记都叫“元素节点”，每个元素(标记)都对应一个“元素对象”；

Text文本节点：是指标记中的文本，是最底层的节点，它下面不能再有其它子节点。

Attribute属性节点：是指元素中所有的属性构成的节点列表。一个标记有多个属性。

Comment注释节点

核心DOM——Node节点属性——公共的属性和方法

对节点操作：增加节点、删除节点、修改节点内容、读取节点

一、节点访问的属性

nodeName：节点的名称

nodeValue：节点的值

firstChild：第一个子节点（存在兼容性问题）

lastChild：最后一个子节点（存在兼容性问题）

childNodes：子节点列表，是一个数组

注意：访问节点的操作，都是以document为起点的。

访问<html>节点的方法：

（1） document.firstChild

（2） document.documentElement

访问<body>节点的方法：

（1）document.firstChild.lastChild

（2）document.body

为什么在访问<body>下的子节点时，会返回一个#text文本节点？

核心DOM中的属性和方法，是针对HTML文档，而不是XHTML文档。先去掉DTD定义。

Firefox中会把换行或空格当成一个文本节点。

二、节点属性的修改

setAttribute(name,value)：给一个节点增加属性，name是属性名，value是属性值

removeAttribute(name)：删除节点的属性

getAttribute(name)：获取一个节点属性的值

<img />

举例：img.setAttribute(“src”,”images/bg.gif”)

三、节点的创建和删除

createElement(tagName)：创建一个指定的标记，如：document.createElement(“img”)，注意：标记不加尖括号

createTextNode(text)：创建一个文本节点。如：document.createTextNode(“年龄”)，注意：这里只能是纯文本

appendChild(node)：将一个节点，追加到某个父节点下。追到父节点的最后。

insertBefore(new,current)：将一个新节点，追加到当前节点之前。Current当前节点，是已经存在的节点。New是新节点，是刚刚创建的。

removeChild(node)：移除一个子节点。

//定义全局变量

var img_width_min = 15;

var img_width_max = 80;

var x_left = 0;

var x_right = 0;

var y_top = 0;

var y_bottom = 0;

//定义初始化的函数

function init()

{

document.body.bgColor = "#000";

x_right = window.innerWidth - img_width_max;

y_bottom = window.innerHeight - img_width_max;

//定时器

setInterval("showStar()",1000);

}

//显示星星

function showStar()

{

//创建一个图片

var node_img = document.createElement("img");

//随机图片大小和随机坐标

var width = getRandom(img_width_min,img_width_max);

var x = getRandom(x_left,x_right);

var y = getRandom(y_top,y_bottom);

//增加src的属性

node_img.setAttribute("src","images/xingxing.gif");

//增加style属性

var style ="position:absolute;left:"+x+"px;top:"+y+"px;";

style += "width:"+width+"px;";

node_img.setAttribute("style",style);

//增加一个onclick事件属性

node_img.setAttribute("onclick","removeImg(this)");

//将图片追加到<body>元素下

document.body.appendChild(node_img);

}

function removeImg(obj)

{

document.body.removeChild(obj);

}

function getRandom(min,max)

{

return Math.floor(Math.random()*(max-min)+min);

}

</script>

</head>

<bodyonload="init()">

</body>

</html>