BOM和DOM
BOM(Brower Object Model，浏览器对象模型)，主要用来访问和操作浏览器各组件的一种方法。
BOM对象有：window、location、history、screen、navigator、document、frames[]
DOM(Document Object Model，文档对象模型)，主要用来访问和操作网页元素的一种方法。
网页元素就是各样的HTML标记。
DOM对象有：网页中有若干个标记，每个标记就是一个元素，该元素都有一个对应的对象，叫“元素对象”。
<html>、<body>、<table>、<div>、<form>、<input>
<div id=“result”></div>
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>
<bodyοnlοad="init()">
</body>
</html>
扫一扫
316
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
