JavaScript BOM对象和DOM对象(DHTML)

一.BOM对象

BOM(浏览器对象模型),可以对浏览器窗口进行访问和操作;使用BOM,开发者可以移动窗口/改变状态栏中的文本/执行其他与页面内容不直接相关的动作
功能:使JS有能力与浏览器"对话",通过JS控制浏览器

1.窗口(window)对象
(1)概念:

所有浏览器都支持window对象从概念上讲:一个html文档对应一个window对象从功能上讲:用于控制浏览器窗口从使用上讲:不需要创建对象,直接使用即可

(2)方法:

window.方法();//window对象属于全局变量,可省略为 方法()

alert(str):显示带有消息str,确认按钮的弹出框

alert('hello Yuan');

confirm(str):显示带有消息str,确认按钮,取消按钮的弹出框

返回值表明用户选择,选确定为true,选取消为false

var ret=confirm('hello Yuan');

prompt(str):显示带有消息str,输入框的弹出框

选择确定时返回值是输入的内容,选择取消时是null

var ret=prompt('hello...');

open(‘url’):打开一个新浏览器窗口/查找一个已命名的窗口

open('http://www.baidu.com');

close(‘url’):关闭浏览器的当前窗口

close();
close('http://www.baidu.com');//url的作用不清楚

setInterval():按指定周期(以毫秒计)调用函数/计算表达式

var clock=setInterval(func,time)
//参数说明:
//func:调用的函数/计算表达式;不带(),无法直接传参数
//time:周期;number类型;单位为ms
//clock是创建的定时器对象
setInterval(f,1000);
function f() {console.log("hello");
}

clearInterval():取消由setInterval()设置的timeout

clearInterval(clock)
//参数说明:
//clock:要取消的定时器对象
clock1=setInterval(f,1000);
function f() {console.log('hello');
}
clearInterval(clock1);

使用setInterval和clearInterval创建计时器:

//点即蓝框框格,立刻显示当前时间,之后每1000ms刷新一次
//点击停止按钮,停止刷新
<!DOCTYPE html>
<html lang='en'>
<head><meta charset='utf-8'><title>Title<title><style>#id1 {width:200px;height:50px;}</style>
</head>
<body><input typeof='text' id='id1' onclick='begin()'><button onclick='end()'>停止</button><script>function showTime() {var current_time=new Date().toLocalString();var ele=document.getElementById('id1');ele.value=current_time;}var clock1;//否则clock1是局部变量,end()找不到function begin() {if (clock1==undefined) {//否则每次点击创建一个计时器,抢占之前计时器的名字//(之前的计时器没有名字,但所有计时器都在运行)//导致之前的计时器无法取消showTime();var clock1=setInterval(showTime,1000);//创建了一个定时器对象//clock1=setInterval(showTime,1000);//此时定义的就是全局变量,无需写在外边}}function end() {clearInterval(clock1);clock1=undefined;//取消时恢复clock1的值}</script>
</body>
</html>

setTimeout():在指定毫秒数后调用函数/计算表达式

setTimeout(func,time);
//参数说明:
//func:调用的函数/计算表达式;不带(),无法直接传参数
//time:时间间隔;number类型;单位为ms
var c=setTimeout(f,1000);//创建一个定时器;只调用一次对应函数
function f() {console.log('hello');
}

clearTimeout():取消由setTimeout()设置的timeout

clearTimeout(c)
//参数说明:
//c:要取消的定时器对象
var ID = setTimeout(abc,2000);//只调用一次对应函数.
clearTimeout(ID);
function abc(){alert('aaa')
}//没有发生alert():加载完2000ms后发生,但加载完后立刻被取消

scrollTo():把内容滚动到指定的坐标

scrollTo(x,y)
//参数说明:
//x,y:分别指定x坐标和y坐标

(3)交互方法:

方法讲解:    //----------alert confirm prompt----------------------------//alert('aaa');/* var result = confirm("您确定要删除吗?");alert(result); *///prompt 参数1 : 提示信息.   参数2:输入框的默认值. 返回值是用户输入的内容.// var result = prompt("请输入一个数字!","haha");// alert(result);方法讲解:    //open方法 打开和一个新的窗口 并 进入指定网址.参数1 : 网址.//调用方式1//open("http://www.baidu.com");//参数1 什么都不填 就是打开一个新窗口.  参数2.填入新窗口的名字(一般可以不填). 参数3: 新打开窗口的参数.open('','','width=200,resizable=no,height=100'); // 新打开一个宽为200 高为100的窗口//close方法  将当前文档窗口关闭.//close();

(4)例子:

var num = Math.round(Math.random()*100);
function acceptInput() {//让用户输入(prompt),并接收用户输入结果var userNum = prompt("请输入一个0~100之间的数字!","0");//将用户输入的值与随机数进行比较if (isNaN(+userNum)) {//用户输入的无效(重复2,3步骤)alert("请输入有效数字!");acceptInput();}else if(userNum > num) {//大了==> 提示用户大了,让用户重新输入(重复2,3步骤)alert("您输入的大了!");acceptInput();}else if(userNum < num) {//小了==> 提示用户小了,让用户重新输入(重复2,3步骤)alert("您输入的小了!");acceptInput();}else {//答对了==>提示用户答对了 , 询问用户是否继续游戏(confirm).var result = confirm("恭喜您!答对了,是否继续游戏?");if(result){//是 ==> 重复123步骤.num = Math.round(Math.random()*100);acceptInput();}else {//否==> 关闭窗口(close方法).close();}}
}

2.History对象

History对象包含用户(在浏览器窗口中)访问过的URL
History对象是window对象的一个子对象,可通过window.history属性对其进行访问

(1)History对象属性:

length:返回浏览器历史列表中的URL数量

(2)History对象方法:

history.back():加载history列表中的前一个URL
history.forward():加载history列表中的下一个URL
history.go(x):加载history列表中的某个特定页面
//当x>0,表示下x个(1表示下一个);当x<0,表示上x个(-1表示上一个)//rrr2.html中://1.运行该文件
<a href="rrr.html">click</a>//2.点击跳转到rrr.html
<button onclick="history.forward()">>>></button>//4.点击跳回下一个网页(rrr.html)
//<button οnclick="history.go(1)">back</button>//同forward
//rrr.html中:
<button onclick="history.back()">back</button>//3.点击跳回上一个网页(rrr2.html)
//<button οnclick="history.go(-1)">back</button>//同back

3.Location对象

Location对象包含有关当前URL的信息
Location对象是Window对象的一个部分,可通过window.location属性来访问

location.assign(URL):加载新的页面URL
//类似于链接,可以使用history后退
location.assign('http://www.baidu.com')//跳转到baidu.com
location.reload():刷新
<button onclick='location.reload()'>click</button>
location.replace(newURL):使用新网页newURL代替当前网页
//替换当前网页,替换后无法用history后退

二.DOM对象(DHTML)
1.什么是DOM
(1)DOM是W3C(万维网联盟)的标准,DOM定义了访问HTML和XML文档的标准:

W3C文档对象模型(DOM)是中立于平台/语言的接口
允许程序/脚本动态地访问/更新文档的内容,结构,样式

(2)W3C DOM标准被分为 3 个不同的部分:

·核心 DOM:针对任何结构化文档的标准模型
·XML DOM:针对 XML 文档的标准模型,定义了所有XML元素的对象/属性,以及访问它们的方法
·HTML DOM:针对 HTML 文档的标准模型,定义了所有HTML元素的对象/属性,以及访问它们的方法

2.DOM节点
(1)根据W3C的HTML DOM标准,HTML文档中的所有内容都是节点(NODE)对象

·整个文档是一个文档节点(document对象)
·每个HTML元素(标签)是元素节点(element 对象)
·HTML元素内的文本是文本节点(text对象)
·每个HTML属性是属性节点(attribute对象)
·注释是注释节点(comment对象)

用dom树展示文档中各对象间的关系,用于对象的导航

(2)节点(自身)属性:

NODE.attributes:节点的属性节点
NODE.nodeType:节点类型
NODE.nodeValue:节点值
NODE.nodeName:节点名称(哪种标签)
NODE.innerHTML:节点的内容(包括节点)
NODE.innerTEXT:节点的文本值(不包括节点);包括子节点的文本值<div><p class='p1'>hello p</p>
</div>
<script>var ele=document.getElementsByClassName('p1')[0];//getElementsByClassName获得的是所有获得的标签构成的集合//再用索引取出想要的那个标签console.log(ele.nodeName);//pconsole.log(ele.nodeType);//1console.log(ele.nodeValue);//nullconsole.log(ele.innerHTML);//hello pele.innerHTML='hello world';//将相应标签中的文本修改为hello world
</script>

(3)导航属性:

NODE.parentNode:父节点
NODE.firstChild:第一个子元素
NODE.lastChild:最后一个子元素
NODE.childNodes:子节点
NODE.nextSibling:下一个同级节点
NODE.nextElementSibling:下一个同级标签节点
NODE.parentElement:父节点标签节点
NODE.children:所有子标签节点
NODE.firstElementChild:第一个子标签节点
NODE.lastElementChild:最后一个子标签节点
NODE.nextElementtSibling:下一个兄弟标签节点
NODE.previousElementSibling:上一个兄弟标签节点<div class='div1'><p class='p1'>hello p</p><div class='div2'>hello div<div>div3</div></div>
</div>
<script>var ele=document.getElementsByClassName('p1')[0];var p_ele=ele.parentNode;console.loh(p_ele.nodeName);//DIVvar b_ele=ele.nextElementSibling;//取不到空文本节点var b_ele2=ele.nextSibling;//两个标签间有一个空文本节点对象,会被nextSibling取console.log(p_ele.nodeName);//DIVconsole.log(p_ele.nodeName);//#textvar ele3=document.getElementsByClassName('div1')[0]console.log(ele3.children);//[p.p1,div.div2]可展开console.log(ele3.children[1].children);//[div]可展开
</script>

(4)节点树中的节点彼此拥有层级关系:

父(parent),子(child)和同胞(sibling)等术语用于描述这些关系:父节点拥有子节点;同级的子节点被称为同胞(兄弟或姐妹)
在节点树中，顶端节点被称为根（root）
每个节点都有父节点,除了根节点
一个节点可拥有任意数量的子节点
同胞是拥有相同父节点的节点

下面的图片展示了节点树的一部分,以及节点间的关系:

(5)访问HTML元素(节点),访问HTML元素等同于访问节点,我们能够以不同的方式来访问HTML元素

//页面查找:
//ById返回找到的标签对象,其他的返回找到的标签对象构成的集合对象
document.getElementById('id'):通过id属性查找
document.getElementsByTagName('tagname'):通过标签名(标签类型)查找
document.getElementsByClassName('class'):通过class属性查找
document.getElementsByName('name'):通过name属性查找
<p name='P1' id='1' class='p1'>hello p</p>
var p_0=document.getElementById('1');
var p_1=document.getElementsByTagName('p')[0];
var p_2=document.getElementsByClassName('p1')[0];
var p_3=document.getElementsByName('P1')[0];
//局部查找:
<div id="div1"><div class="div2">i am div2</div><div name="yuan">i am div2</div><div id="div3">i am div2</div><p>hello p</p>
</div>
<script>var div1=document.getElementById("div1");//支持:var ele= div1.getElementsByTagName("p");alert(ele.length);//支持:var ele2=div1.getElementsByClassName("div2");alert(ele2.length);//不支持://var ele3=div1.getElementById("div3");//不支持://var ele4=div1.getElementsByName("yuan");
</script>

3.HTML DOM Event(事件)

HTML4.0的新特性之一是可使HTML事件触发浏览器中的动作(action),比如点击某HTML元素时启动一段JS
事件通常与函数结合使用,函数在事件发生前不会被执行
event对象在事件发生时系统已经创建好了,并会在事件函数被调用时传给事件函数,要获得仅需要接收即可(见绑定方法第2条)

(1)下列属性可插入到HTML标签中来定义事件动作:

//绑定方法:
//发生event事件时执行f():
Object.event=f();
Object.event=var function(event) {pass};
//传入的event为该事件及其所有信息
<tag event='f()'></tag>;
//最后一种:造成相同类型标签重复绑定;html和js混杂,耦合度较高onclick:当用户点击某个对象时调用的事件句柄
ondblclick:当用户双击某个对象时调用的事件句柄onfocus:元素获得焦点(如点进输入框后输入框获得焦点)
//应用场景:当用户点进输入框,清除框中默认内容
onblur:元素失去焦点
//应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,发送到服务器进行验证
onchange:域的内容被改变
//应用场景:通常用于表单元素,当元素内容被改变时触发(三级联动)onkeydown:某个键盘按键被按下
//应用场景:当用户在最后一个输入框按下回车按键时,表单提交
//使用KeyCode属性获知哪个键被按下
onkeypress:某个键盘按键被按下并松开
onkeyup:某个键盘按键被松开onload:一个页面或一幅图像完成加载
只给body元素加
//应用场景:当有些事情希望页面加载完立刻执行,可以使用该属性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>window.onload=function() {var ele=document.getElementById("ppp");ele.onclick=function() {alert(123);};};function fun1() {var ele=document.getElementById("ppp");ele.onclick=function() {alert(123);};};</script>
</head>
<body onload="fun1()">
<p id="ppp">hello p</p>
</body>
</html>onmousedown:鼠标按钮被按下(不松开)
onmousemove:鼠标被从元素该移出
onmouseout:鼠标从某元素上移开
onmouseover:鼠标移到某元素上
onmouseleave:鼠标从元素离开onselect:文本被选中
onsubmit:确认按钮被点击(表单被提交)
//只能给form元素使用
//应用场景:在表单提交前验证用户输入是否正确.如果验证失败.阻止表单的提交
<form id="form"><input type="text"/><input type="submit" value="点我!" />
</form>
<script type="text/javascript">
//先发生onsubmit绑定的事件,再发生form表单本身的提交事件
//可先通过onsubmit检测输入的格式,再提交的后端检测该数据是否存在
//onsubmit检测不通过可通过下面2种方式阻止提交事件var ele=document.getElementById("form");ele.onsubmit=function(event) {//阻止表单提交方式1://onsubmit命名的事件函数,可以接受返回值//返回false表示拦截表单提交,其他为放行alert("验证失败 表单不会提交!");return false;//阻止表单提交方式2://event.preventDefault();==>通知浏览器不要执行与事件关联的默认动作alert("验证失败 表单不会提交!");event.preventDefault();}
</script>

(2)两种为元素附加事件属性的方式:

<input type='text' id='search' value='请输入用户名'\onfocus='f1()' onblur='f2()'\onclick='func(this)'>//this表示本标签
<script>function func(that) {console.log(that)}window.onload=function f3() {//window对象的onload事件var a=1console.log(a)}var ele=document.getElementById('search');function f1() {if (ele.value=='请输入用户名') {ele.value='';}}function f2() {if (!ele.value.trim()) {ele.value='请输入用户名';}}

(3)this参数找到自身:

</script>
<div id="abc" onclick="func1(this)">事件绑定方式1</div>
<div id="id123">事件绑定方式2</div>
<script>function func1(self) {//self可替换为任何值console.log(self.id)}//jquery下是$(self),这种方式this参数必须填写var ele=document.getElementById("id123").onclick=function () {console.log(this.id);}//jquery下是$(this),,这种方式不需要this参数
</script>

(4)事件传播:

<div id="abc_1" style="border:1px solid red;width:300px;height:300px;"><div id="abc_2" style="border:1px solid red;width:200px;height:200px;"></div>
</div>
<script type="text/javascript">document.getElementById("abc_1").onclick=function () {alert('111');}document.getElementById("abc_2").onclick=function(event) {alert('222');event.stopPropagation();//阻止事件向外层div传播,否则两个onclick事件均发生}
</script>

4.节点的增删改查
(1)node的CURD:

//增:创建一个标签,获取原有标签,将新标签添加到原标签中createElement(name):创建name标签father.appendChild(son):将son标签对象添加到father标签中
//删:获得要删除的标签,获得它的父标签,从父标签中删除指定标签father.removeChild(son):删除father标签中的son标签对象
//改:1.使用removeChild()+createElement()+appendChild()修改标签ele.setAttribute(name,value):将ele标签的name属性的值改为valueele.attribute='x':修改标签的css样式ele.style.color='red'ele.innerHTML='x':修改标签的内容ele.innerHTML='<h1>hello world<h1>'//为1个<h1>标签ele.innerText='x':修改标签的文本内容为xele.innerText='<h1>hello world<h1>'//为纯文本内容,整个为1个String,没有<h1>的样式2.使用father.replaceChild(newnode,oldnode)替换节点
//查:见 二.2.(5)a=ele.getAttribute(name):获取ele标签的name属性的值
//关于class的操作:ele.className:获取ele标签的class值ele.classList:获取ele标签的class值构成的数组ele.classList.add('x'):在ele标签的class数组中添加xele.classList.remove('x'):删除ele标签class数组中的x<script type="text/javascript">
//在第一个div中动态增加一个a标签. 该a标签点击之后跳转到百度首页.function addNode(){//1.获得 第一个divvar div = document.getElementById("div_1");//2.创建a标签  createElement==>创建一个a标签   <a></a>var eleA =  document.createElement("a");//3.为a标签添加属性 <a href="http://www.baidu.com"></a>eleA.setAttribute("href", "http://www.baidu.com");//4.为a标签添加内容 <a href="http://www.baidu.com">百度</a>eleA.innerHTML = "百度";    //5.将a标签添加到div中div.appendChild(eleA);}//点击后 删除div区域2function deleteNode(){//1 获得要删除的div区域var div = document.getElementById("div_2");//2.获得父亲var parent = div.parentNode;//3 由父亲操刀 parent.removeChild(div);}//点击后 替换div区域3为一个美女function updateNode(){//1 获得要替换的div区域3var div = document.getElementById("div_3");//2创建img标签对象 <img />var img = document.createElement("img");//3添加属性 <img src="001.jpg" />img.setAttribute("src", "001.JPG");//4.获得父节点var parent = div.parentNode;//5.替换parent.replaceChild(img, div);}//点击后 将div区域4克隆一份 添加到页面底部function copyNode(){//1.获取要克隆的divvar div = document.getElementById("div_4");//2.克隆 参数为true 那么克隆时克隆所有子元素. false 只克隆自己var div_copy = div.cloneNode(true);//3.获得父亲var parent = div.parentNode;//4.添加parent.appendChild(div_copy);}
</script>

JavaScript BOM对象和DOM对象(DHTML)相关推荐

jQuery对象和DOM对象使用说明
1.jQuery对象和DOM对象第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery对象和DOM对象以及它们之间的关系.DOM对象,即是我们用传 ...
jquery对象PHP转换,jquery对象和DOM对象如何相互转换？
本篇文章给大家介绍一下jquery对象和DOM对象的转换,有需要的朋友可以参考一下,希望对你有所帮助. 我们在上一篇文章jquery对象和DOM对象的区别有哪些?中也简单介绍了关于jquery对象和D ...
jquery对象PHP转换,jQuery对象与DOM对象转换方法详解_jquery
本文实例分析了jQuery对象与DOM对象的转换方法.分享给大家供大家参考,具体如下: jQuery对象转换为dom对象只有jQuery对象才能调用jQuery类库的各种函数,同样有些dom对象的属 ...
js-jQuery对象与dom对象相互转换
核心提示:jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型,一般情况下,如S('#id' ...
详解jQuery对象与DOM对象的相互转换
一直以来对于通过jQuery方式获取的对象,却不能直接使用JavaScript的方法很不理解,现在知道,原来jQuery获得的对象并不和我们平时使用getElementById获得的对象一样.所以一些 ...
jquery对象和Dom对象的不同
起因是因为我在写一个for循环的时候,trtext获取不到. var ttr=$("#tabFiles tr"); for(var i=0;i<ttr.lenght;i++) ...
JS对象与Dom对象与jQuery对象之间的区别
前言通过问题看本质: 举例: js的写法:document.getElementById('save').disabled=true; 在jquery中我是这样写的 $("#save&qu ...
jQuery对象和DOM对象
jQuery对象和DOM对象使用说明 2010-07-17 23:31 jQuery对象和DOM对象使用说明,需要的朋友可以参考下. 1.jQuery对象和DOM对象第一次学习jQuery,经常分辨 ...
jQuery对象与dom对象不能划等号
今天群里的兼哲大神说:加了方括号就不是jQuery的东西了,当时没有觉得是什么难事,今天开发起来发现,真的是不能等同的,但是[]后却可以使用JavaScript方法. jQuery对象与dom对象的转 ...
JQuery对象与DOM对象
先把对象放一边,我们先来试着实现一个最简单的小程序,在div中写入:"您好!好好学习jQuery才是最正确选择"这段文字.想像一下,如果是你你会怎么写? <html> ...

JavaScript BOM对象和DOM对象(DHTML)

JavaScript BOM对象和DOM对象(DHTML)相关推荐

最新文章

热门文章