喵星之旅-成长的雏鹰-Web前端-5-JavaScript操作BOM、DOM对象

成长的雏鹰JavaWeb

BOM对象的组成及子对象的使用

BOM：浏览器对象模型（Browser Object Model）
BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。

BOM可实现功能

  • 弹出新的浏览器窗口
  • 移动、关闭浏览器窗口以及调整窗口的大小
  • 页面的前进、后退

Alt text

window对象

Alt text
window.属性名= “属性值”

表示跳转到百度首页
window.location=”https://www.baidu.com“ ;

Alt text

confirm()

将弹出一个确认对话框.

1
2
confirm("对话框中显示的纯文本")

confirm()与alert ()、 prompt()区别:

  • alert( )：一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变
  • prompt( )：两个参数，输入对话框，用来提示用户输入一些信息，单击“取消”按钮则返回null，单击“确定”按钮则返回用户输入的值，常用于收集用户关于特定问题而反馈的信息
  • confirm( )：一个参数，确认对话框，显示提示对话框的消息、“确定”按钮和“取消”按钮，单击“确定”按钮返回true，单击“取消”按钮返回false，因此与if-else语句搭配使用
1
2
3
4
5
6
7
8
<script type="text/javascript">
   var flag=confirm("确认要删除此条信息吗？");
    if(flag==true)
	      alert("删除成功！");
      else
	       alert("你取消了删除");
</script>

open()方法

1
window.open("弹出窗口的url","窗口名称","窗口特征”)

Alt text

1
2
3
4
5
function openWin(){
	myWindow=window.open('','','width=200,height=100');
	myWindow.document.write("<p>这是'我的窗口'</p>");
	myWindow.focus();
}

history对象

常用方法
Alt text

Alt text

1
<a href="javascript:history.back()">返回主页面</a>

location对象

Alt text

1
2
3
4
<a href="javascript:location.href='flower.html'">查看鲜花详情</a>  
<a href="javascript:location.reload()">刷新本页</a>


Document对象

referrer 返回载入当前文档的URL
URL 返回当前文档的URL 

1
2
3
4
5
6
var preUrl=document.referrer;  //载入本页面文档的地址
if(preUrl==""){	
      document.write("<h2>您不是从领奖页面进入，5秒后将自动跳转到登录页面</h2>");
      setTimeout("javascript:location.href='login.html'",5000);
}

Document对象的常用方法

Alt text

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
Document对象访问页面元素

<script  type="text/javascript">
    function alterBook(){
        document.getElementById("book").innerHTML="现象级全球畅销书";
    }
    function all_input(){
        var aInput=document.getElementsByTagName("input");
        var sStr="";
        for(var i=0;i<aInput.length;i++){
            sStr+=aInput[i].value+"&nbsp;&nbsp;";
        }
        document.getElementById("replace").innerHTML=sStr;
    }
    function s_input(){
        var aInput=document.getElementsByName("season");
        var sStr="";
        for(var i=0;i<aInput.length;i++){
            sStr+=aInput[i].value+"&nbsp;&nbsp;";
        }
        document.getElementById("replace").innerHTML=sStr;
    }
    function clearAll(){
        document.write("");
    }
</script>

JavaScript内置对象

  • Array：用于在单独的变量名中存储一系列的值
  • String：用于支持对字符串的处理
  • Math：用于执行常用的数学任务，它包含了若干个数字常量和函数
  • Date：用于操作日期和时间

Date对象

1
2
3
var 日期对象=new Date(参数)
参数格式：MM  DD,YYYY,hh:mm:ss

常用方法
Alt text

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>时钟特效</title>
</head>
<body>
<div id="myclock"></div>
<script type="text/javascript">
    function disptime(){
        var today = new Date();  		//获得当前时间
        var hh = today.getHours();	//获得小时、分钟、秒
        var mm = today.getMinutes();//获得分钟
        var ss = today.getSeconds();//获得秒
        /*设置div的内容为当前时间*/
        document.getElementById("myclock").innerHTML="现在是:"+hh +":"+mm+": "+ss;
    }
    disptime();
</script>
</body>
</html>

定时函数

setTimeout(“调用的函数”,等待的毫秒数)

setInterval(“调用的函数”,间隔的毫秒数) 

1
2
3
4
5
6
7
8
<body>
<input name="s" type="button" value="显示提示消息" onclick="timer()" />
<script type="text/javascript">
    function timer(){
        var t=setTimeout("alert('3 seconds')",3000);
    }
</script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
<div id="myclock"></div>
<script type="text/javascript">
    function disptime(){
        var today = new Date();  		//获得当前时间
        var hh = today.getHours();	//获得小时、分钟、秒
        var mm = today.getMinutes();//获得分钟
        var ss = today.getSeconds();//获得秒
        /*设置div的内容为当前时间*/
        document.getElementById("myclock").innerHTML="现在是:"+hh +":"+mm+": "+ss;
    }
    /*使用setInterval()每间隔指定毫秒后调用disptime()*/
   var myTime = setInterval("disptime()",1000);
</script>
</body>

清除函数

clearTimeout(setTimeOut()返回的ID值)
clearInterval(setInterval()返回的ID值) 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
<div id="myclock"></div>
<input type="button" onclick="javaScript:clearInterval(myTime)" value="停止">
<script type="text/javascript">
    function disptime(){
        var today = new Date();  		//获得当前时间
        var hh = today.getHours();	//获得小时、分钟、秒
        var mm = today.getMinutes();//获得分钟
        var ss = today.getSeconds();//获得秒
        /*设置div的内容为当前时间*/
        document.getElementById("myclock").innerHTML="现在是:"+hh +":"+mm+": "+ss;
    }
    /*使用setInterval()每间隔指定毫秒后调用disptime()*/
   var myTime = setInterval("disptime()",1000);
</script>
</body>

Math对象

Alt text

1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
<div>
    本次选择的颜色是：<span id="color"></span>
    <input type="button" value="选择颜色" onclick="selColor();">
</div>
<script type="text/javascript">
    function selColor(){
        var color=Array("红色","黄色","蓝色","绿色","橙色","青色","紫色");
        var num=Math.ceil(Math.random()*7)-1;
        document.getElementById("color").innerHTML=color[num];
    }
</script>
</body>

DOM的分类和节点间的关系

DOM：Document Object Model（文档对象模型）
Alt text

节点和节点关系
Alt text

访问节点

使用getElement系列方法访问指定节点

getElementById()
getElementsByName()
getElementsByTagName()

根据层次关系访问节点

根据层次关系访问节点

节点属性
Alt text

1
2
3
4
5
6
7
<script>
    var obj=document.getElementById("news");
    var str=obj.lastChild.firstChild.nextSibling.nextSibling.innerHTML;
    ////var str=obj.lastChild.lastChild.previousSibling.previousSibling.innerHTML;
    var str=obj.lastElementChild.firstElementChild.innerHTML||obj.lastChild.firstChild.innerHTML;
    alert(str);
</script>

element属性
Alt text

1
2
3
4
5
oNext = oParent.nextElementSibling || oParent.nextSibling   
oPre = oParent.previousElementSibling || oParent.previousSibling  
oFirst = oParent. firstElementChild  ||  oParent.firstChild   
oLast = oParent.lastElementChild || oParent.lastChild

JavaScript操作DOM节点

节点信息

  • nodeName：节点名称
  • nodeValue：节点值
  • nodeType：节点类型

Alt text

操作节点的属性

1
2
3
getAttribute("属性名")
setAttribute("属性名","属性值")

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<body>
<p>选择你喜欢的书：<input type="radio" name="book" onclick="book()">我和狗狗一起活下来 <input type="radio" name="book" onclick="book()">灰霾来了怎么办</p>
<div><img src="" alt="" id="image" onclick="img()"><span></span></div>
<script>
    function book(){
        var ele=document.getElementsByName("book");
        var img=document.getElementById("image");
        if(ele[0].checked){
            img.setAttribute("src","images/dog.jpg");
            img.setAttribute("alt","我和狗狗一起活下来");
            img.nextSibling.innerHTML="我和狗狗一起活下来";
        }
        else if(ele[1].checked){
            img.setAttribute("src","images/mai.jpg");
            img.setAttribute("alt","灰霾来了怎么办");
            img.nextSibling.innerHTML="灰霾来了怎么办";
        }
    }
    function img(){
        var alt=document.getElementById("image").getAttribute("alt");
        alert("图片的alt："+alt)
    }
</script>
</body>

创建和插入节点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<body>
<p>选择你喜欢的书：<input type="radio" name="book" onclick="book()">我和狗狗一起活下来 <input type="radio" name="book" onclick="book()">灰霾来了怎么办</p>
<div></div>
<script>
    function book(){
        var ele=document.getElementsByName("book");
        var bName=document.getElementsByTagName("div")[0];
        if(ele[0].checked){
            var img=document.createElement("img");
            img.setAttribute("src","images/dog.jpg");
            img.setAttribute("alt","我和狗狗一起活下来");
            bName.appendChild(img);
        }
        else if(ele[1].checked){
            var img=document.createElement("img");
            img.setAttribute("src","images/mai.jpg");
            img.setAttribute("alt","灰霾来了怎么办");
            img.setAttribute("onclick","copyNode()")
            bName.appendChild(img);
        }
    }
    function copyNode(){
        var bName=document.getElementsByTagName("div")[0];
        var copy=bName.lastChild.cloneNode(false);
        bName.insertBefore(copy,bName.firstChild);
    }

</script>

删除和替换节点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<body>
    <ul>
        <li>
            <img src="images/f01.jpg" id="first">
            <p><input type="button" value="删除我吧" onclick="del()"></p>
        </li>
        <li>
            <img src="images/f02.jpg" id="second">
            <p><input type="button" value="换换我吧" onclick="rep()"></p>
        </li>
    </ul>
<script>
    function del(){
        var delNode=document.getElementById("first");
        delNode.parentNode.removeChild(delNode);
    }
    function rep(){
        var oldNode=document.getElementById("second");
        var newNode=document.createElement("img");
        newNode.setAttribute("src","images/f03.jpg");
        oldNode.parentNode.replaceChild(newNode,oldNode);
    }
</script>
</body>

操作节点样式

改变样式的属性:style属性\className属性 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<body>
<section id="shopping">
    <div id="cart" onmouseover="over()" onmouseout="out()">我的购物车<span>1</span></div>
    <div id="cartList">
        <h2>最新加入的商品</h2>
        <ul>
            <li><img src="images/makeup.jpg"></li>
            <li>倩碧经典三部曲套装（液体皂200ml+明肌2号水200ml+润肤乳125ml）</li>
            <li>¥558.00×1<br/>删除</li>
        </ul>
        <div class="footer">共1件商品<span>共计¥558.00</span> <span>去购物车</span></div>
    </div>
</section>
<script>
    /*document.getElementById("cartList").style.display="none";
    function over(){
        document.getElementById("cart").style.backgroundColor="#ffffff";
        document.getElementById("cart").style.zIndex="100";
        document.getElementById("cart").style.borderBottom="none";
        document.getElementById("cartList").style.display="block";
        document.getElementById("cartList").style.position="relative";
        document.getElementById("cartList").style.top="-1px";
    }
    function out(){
        document.getElementById("cart").style.backgroundColor="#f9f9f9";
        document.getElementById("cart").style.borderBottom="solid 1px #dcdcdc";
        document.getElementById("cartList").style.display="none";
    }*/

    function over(){
     document.getElementById("cart").className="cartOver";
     document.getElementById("cartList").className="cartListOver";
        //alert(document.getElementById("cartList").display);
        //alert(document.getElementById("cartList").currentStyle.display);  //使用currentStyle获取属性值
        /*使用getComputedStyle获取属性值
        var cartList=document.getElementById("cartList");
        alert(document.defaultView.getComputedStyle(cartList,null).display);*/
     }
     function out(){
     document.getElementById("cart").className="cartOut";
     document.getElementById("cartList").className="cartListOut";
     }

</script>
</body>

获取元素的样式

1
2
3
4
5
6
HTML元素.style.样式属性;
alert(document.getElementByld("cartList").display);
document.defaultView.getComputedStyle(元素,null).属性
var cartList=document.getElementByld("cartList");alert(document.defaultView.getComputedStyle(cartList,null).display);
HTML元素.currentStyle.样式属性;
alert(document.getElementByld("cartList").currentStyle.display);

获取元素位置

Alt text

随鼠标滚动的广告图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
<title>随鼠标滚动的广告图片</title>
<style type="text/css">
#main{text-align:center; width:1014px; margin: 0 auto;}
#adver{
	position:absolute;
	left:10px;
	top:30px;
	z-index:2;
}
</style>

</head>
<body>
<div id="adver"><img src="images/adv.jpg"/></div>
<div id="main"><img src="images/main1.jpg"/><img src="images/main2.jpg"/><img src="images/main3.jpg"/></div>

<script>
	var adverTop; //层距页面顶端距离
	var adverLeft;
	var adverObj; //层对象
	function inix(){
		adverObj=document.getElementById("adver"); //获得层对象
		if(adverObj.currentStyle){
			adverTop=parseInt(adverObj.currentStyle.top);
			adverLeft=parseInt(adverObj.currentStyle.left);
		}
		else{
			adverTop=parseInt(document.defaultView.getComputedStyle(adverObj,null).top);
			adverLeft=parseInt(document.defaultView.getComputedStyle(adverObj,null).left);
		}
	}
	function move(){
        var sTop=parseInt(document.documentElement.scrollTop||document.body.scrollTop);
        var sLeft=parseInt(document.documentElement.scrollLeft||document.body.scrollLeft);
		adverObj.style.top=adverTop+sTop+"px";
		adverObj.style.left=adverLeft+sLeft+"px";
	}
	window.onload=inix;
	window.onscroll=move;
</script>
</body>
</html>

文章目录
  1. BOM对象的组成及子对象的使用
    1. window对象
      1. confirm()
      2. open()方法
    2. history对象
    3. location对象
    4. Document对象
      1. Document对象的常用方法
  2. JavaScript内置对象
    1. Date对象
    2. 定时函数
    3. 清除函数
    4. Math对象
  3. DOM的分类和节点间的关系
    1. 访问节点
    2. 根据层次关系访问节点
  4. JavaScript操作DOM节点
    1. 节点信息
    2. 操作节点的属性
    3. 创建和插入节点
    4. 删除和替换节点
    5. 操作节点样式
    6. 获取元素的样式
    7. 获取元素位置
|