Java学习——JavaWeb基础（四）（JavaScript的BOM、DOM、事件）

最新推荐文章于 2022-11-07 15:05:27 发布

L~B~J

最新推荐文章于 2022-11-07 15:05:27 发布

阅读量254

点赞数 1

分类专栏： Java学习 Web学习 Java语言基础文章标签： js

本文链接：https://blog.csdn.net/weixin_45707030/article/details/105090137

版权

Java学习同时被 3 个专栏收录

52 篇文章 2 订阅

订阅专栏

Java语言基础

28 篇文章 1 订阅

订阅专栏

Web学习

10 篇文章 0 订阅

订阅专栏

一、BOM

BOM：Browser Object Model 浏览器对象模型

概念：将浏览器的各个组成部分封装为对象，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口
进行互动的对象结构。

特点：BOM对象不能自己创建，当文档加载进内存，浏览器自动创建。
组成：
		Window()：窗口对象
		Location()：地址栏对象
	    History()：历史记录(当前窗口)对象
		Navigator ：浏览器对象   基本不用仅作了解
		Screen：显示器屏幕        基本不用仅作了解	
				availHeight	获取系统屏幕的工作区域高度，排除 Microsoft Windows 任务栏。 	
				availWidth	获取系统屏幕的工作区域宽度，排除 Windows 任务栏。 	
				height		获取屏幕的垂直分辨率。 
				width		获取屏幕的水平分辨率。

1.1 Window对象（窗口对象）

Window 对象表示浏览器中打开的窗口。是BOM的顶层对象，其他对象都是该对象的子对象。
使用方式：

window.方法名；//window可以省略
方法名；

方法：

1.1.1 与弹出有关的方法

alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。 
prompt() 显示可提示用户输入的对话框。

<script type="text/javascript">
	window.alert("警告弹框"); 
	window.confirm("你确定关闭吗？");
	window.prompt("请输入地址","");
</script>

1.1.2 与定时器有关的方法

setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。循环执行
clearInterval() 取消由 setInterval() 设置的 timeout。 
setTimeout() 在指定的毫秒数后调用函数或计算表达式。 只执行一次
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。

		<script type="text/javascript">
			var bom = function() {
				alert("爆炸");
			}
			//调用一次的定时器  返回值就是你的定时器的id
			var bomid=window.setTimeout(bom, 2000);
			var boom = function() {
				document.write("爆炸");
				//需要在控制台，打印数据调试
				console.log("循环的定时器")
			}
			//调用多次的定时器 
			var boomid=window.setInterval(boom,2000);
			//取消定时器
			window.clearInterval();
			window.clearTimeout();
		</script>

使用定时器实现一个页面的时钟

	<body>
		<h1 id="time"></h1>
	</body>
	<script type="text/javascript">
		//返回对象的引用。
		var timemethod=function(){
			var obj	=document.getElementById("time");
			var str=new Date().toLocaleString();
			obj.innerText=str;
		}
		//先调用一次该方法
		timemethod();
		//设置改变值 调用定时器方法方法
		window.setInterval(timemethod,1000);
	</script>

1.1.3 与打开关闭有关的方法

open():打开新窗口 
	参数：打开目标的URL。返回值：返回新打开窗口的window引用
close():关闭窗口
	谁调用，关闭谁

	<body>
		<button type="button" id="btn">关闭按钮</button>
	</body>
	<script type="text/javascript">
		var newWindow=window.open("http://www.baidu.com");
		var button=document.getElementById("btn");
		button.onclick=function(){
			newWindow.close()
		}
	</script>

1.1.4 获取其他对象的属性

history ：对 History 对象的只读引用。请参数 History 对象。 
location ：用于窗口或框架的 Location 对象。请参阅 Location 对象。 
Navigator 对 Navigator 对象的只读引用。请参数 Navigator 对象。 
 Screen 对 Screen 对象的只读引用。请参数 Screen 对象。 
 document：对 Document 对象的只读引用。请参阅 Document 对象。

1.2 Location：地址栏对象

获取方式：可以用window对象中的属性获取（window.location;）
属性：href：设置或获取当前的URL

port 设置或返回当前 URL 的端口号。 
href：设置或获取当前的URL
hostname 设置或返回当前 URL 的主机名。 
protocol 设置或返回当前 URL 的协议。

当我们需要在浏览器输入中文时，会出现编码的问题，导致中文不能正常的显示。

1.2.1 浏览器的编码解码问题

decodeURIComponent() URI 解码
encodeURIComponent() URI 编码

		<script type="text/javascript">
			var text="中文的编码解码问题"
			document.write(text)
			document.write("<br>")
			//编码
			var encodetext=encodeURIComponent(text);
			document.write(encodetext)
			document.write("<br>")
			var decodetext=decodeURIComponent(encodetext);
			document.write(decodetext)
			document.write("<br>")
			var url=location.href;
			document.write(url)
			document.write("<br>")
			var decodeurl=decodeURIComponent(url)
			document.write(decodeurl)
		</script>

1.3 History：历史记录对象

History 对象包含用户（在浏览器窗口中）访问过的 URL。
History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。
属性：length：返回浏览器历史列表中的URL数量
注意：length表示的是当前窗口历史列表的URL数量
对象方法：

back() 加载 history 列表中的前一个 URL。 
forward() 加载 history 列表中的下一个 URL。 
go() 加载 history 列表中的某个具体页面。

在页面创建一个后退和前进按钮

<script type="text/javascript">
function goBack()
  {
  window.history.back()
  }
  function goForward()
  {
  window.history.forward()
  }
</script>
<body>
<input type="button" value="Back" onclick="goBack()" />
<input type="button" value="Forward" onclick="goForward()" />
</body>

go方法中的参数传递负数，则是后退页面，传递正数为前进页面。前进和后退的页面个数由传递的数值决定

二、DOM对象

DOM：Document Object Model 文档对象模型，将标记语言文档的各个组成部分封装为对象
组成：

		* Document：文档对象
		* Element:元素对象
		* Attribute：属性对象
		* Text：文本对象
		* Comment：注释对象
		* Node：节点对象

2.1 Document：文档对象

获取：window.document

//document 中 body属性 可以获取body标签对象
document.body.bgColor = "red";
//title 属性获取文档标题
var bt = document.title;
//获取文档最后一次修改时间
var rq=document.lastModified;

方法：
write()方法：向文档写 HTML 表达式或 JavaScript 代码。

2.1.1 获取对象的方法

getElementById():通过id属性值获取唯一的元素
getElementsByTagName():通过标签名称获取元素对象数组
getElementsByName():通过name属性值获取元素对象数组
getElementsByClassName():通过class属性值获取元素对象数组

	<body>
		<h1 id="myh">aaaaa</h1>
				<div class="mydiv">
					bbbbbbb
				</div>
				<div class="mydiv">
					bbbbbbb
				</div>
				<div class="mydiv">
					bbbbbbb
				</div>
				<div class="mydiv">
					bbbbbbb
				</div>
				<ul>
					<li>asfasdfasdfasd</li>
					<li>asfasdfasdfasd</li>
					<li>asfasdfasdfasd</li>
					<li>asfasdfasdfasd</li>
					<li>asfasdfasdfasd</li>
				</ul>
				<form action="" method="post">
					<input type="text" name="username" value="" />
					<input type="password" name="password" value="" />
					<input type="checkbox" name="hobby" id="" value="aa" />
					<input type="checkbox" name="hobby" id="" value="bb" />
					<input type="checkbox" name="hobby" id="" value="ccc" />
					<input type="checkbox" name="hobby" id="" value="dd" />
					<input type="submit" value=""/>
				</form>
	</body>
	<script type="text/javascript">
		//1.根据标签的id获取标签对象
		var id=document.getElementById("myh");
		//2.根据标签的类名获取多个标签对象
		var divclass=document.getElementsByClassName("mydiv");
		//遍历集合中的标签
		for (var i = 0; i < divclass.length; i++) {
			//alert(divclass[i]);
		}
		//3.根据标签名获取多个标签对象
		var lititle=document.getElementsByTagName("li");
		for (var i = 0; i < lititle.length; i++) {
			//alert(lititle[i])
		}
		//针对input标签，根据input里面的name属性值，获取多个标签
		//返回一个数组
		var yonghuming=document.getElementsByName("username");
		var mima=document.getElementsByName("password");
		var hobbys=document.getElementsByName("hobby");
		//数组使用foreach循环
		hobbys.forEach(function(ele){
			//alert(ele)
		})
		for (var i = 0; i < hobbys.length; i++) {
			//alert(hobbys[i])
		}
		</script>

2.1.2 创建对象的方法

createElement:创建元素对象
createAttribute：创建属性对象
createComment：创建注释对象
createTextNode：创建文本对象

	<script type="text/javascript">
		//通过id获取标签对象
		/* var body=document.getElementById("bd")
		alert(body) */
		//获取body
		var bd = document.body;
		//alert(bd)
		//创建一个标签对象
		var divs = document.createElement("div")
		//创建文本对象
		var text = document.createTextNode("文本信息");
		//给父标签添加子标签
		divs.appendChild(text);
		var att = document.createAttribute("style");
		att.value = "color:red;font-size:70px";
		//给标签设置属性 传入属性名和他对应的值
		divs.setAttribute("align", "center");
		//给标签设置属性对象 需要传入属性对象
		divs.setAttributeNode(att);
		//创建注释对象
		var zhushi = document.createComment("注释");
		bd.appendChild(zhushi)
		document.body.appendChild(divs);
		//bd.remove(); 删除自身，连同里面的子元素一块删了
		//bd.removeChild(div); //移除子元素
		//根据属性名来移除标签上的属性
		//div.removeAttribute("align");
		//移除属性对象。你传入的是一个属性对象
		//div.removeAttributeNode(attr);
	</script>

2.2 Element：元素对象

创建/获取：通过document来获取和创建。

2.2.1 元素对象的方法

removeAttribute()：删除属性
 setAttribute()：设置属性

<body>
    <a>一个标签</a>
    <button id="btn_set">设置属性</button>
    <button id="btn_removee">删除属性</button>
</body>
<script>
    //获取a标签
    var a=document.getElementsByTagName("a")[0];
    var btn_set = document.getElementById("btn_set");
    var btn_removee = document.getElementById("btn_removee");
    btn_set.onclick=function () {
        var a=document.getElementsByTagName("a")[0];
        //设置属性
        a.setAttribute("href","https://www.baidu.com")
    }
    btn_removee.onclick=function () {
        var a=document.getElementsByTagName("a")[0];
        //删除属性
        a.removeAttribute("href")
    }
</script>

2.3 Node：节点对象

节点可以是元素节点、属性节点、文本节点等等。所有dom对象都可以被认为是一个节点
**注意：**文本节点不存在子节点。

2.3.1 节点对象的方法

常用方法：

appendChild()：向节点的子节点列表的结尾添加新的子节点。
removeChild()	：删除（并返回）当前节点的指定子节点。
replaceChild()：用新节点替换一个子节点。

属性：parentNode 返回节点的父节点。

    <style>
        div{
            border: 1px black solid;
        }
        #div1{
            width: 200px;
            height: 200px;
        }
        #div2{
            width: 100px;
            height: 100px;
        }
        #div3{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<div id="div1">
    <div id="div2">div1</div>
</div>
<a id="del" href="javascript:void(0)">删除div1的子节点</a>
<a id="add" href="javascript:void(0)">添加div1的子节点</a>
</body>
<script>
    //获取a标签
    var del = document.getElementById("del");
    del.onclick = function () {
        //获取div1
        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");
        div1.removeChild(div2);
    }
    var add = document.getElementById("add");
    add.onclick = function () {
        //添加
        var div1 = document.getElementById("div1");
        var div3= document.createElement("div");
        div3.setAttribute("id","div3");
        div1.appendChild(div3)
    }
    var div2 = document.getElementById("div2");
    var div = div2.parentNode;
    alert(div)
</script>

2.4 元素对象的属性（innerHTML和innerTEXT）

获取：
innerText ：获取或设置标签之间的文本内容，不关你有没有嵌套只操作文本
innerHTML ：获取或设置标签之间的内容，如果获取的标签有子标签，把子标签也当成文本获取出来
设置：
innerText ：设置的文本内容，全部作为文本嵌入
innerHTML ：设置的文本内容，如果存在标签，会识别标签

	<body>
		<h1 id="myh1">abc</h1>
		<h2 id="myh2">
			<span>aaaaaa</span>
		</h2>
		<h3 id="myh3"></h3>
		<h3 id="myh4"></h3>
	</body>
	<script type="text/javascript">
		var h1=document.getElementById("myh1");
		//标签之间没有嵌套字标签，二者相同
		var text1=h1.innerText;
		var html1=h1.innerHTML;
		//设置h1的文本
		h1.innerText="abcd"
		//追加设置
		h1.innerText+="abcde"
		var h2=document.getElementById("myh2");
		var text2=h2.innerText;
		alert(text2);//aaaaaa
		var html2=h2.innerHTML;
		alert(html2)//<span>aaaaaa</span>
		//设置
		var h3=document.getElementById("myh3");
		//给标签内部设置文本内容，如果有子标签，也看做文本
		h3.innerText="<span>abc</span>"
		var h4=document.getElementById("myh4");
		h4.innerHTML="<span>abc</span>"
	</script>

2.5 控制元素的样式

1.使用style属性来设置
对于元素的属性里面存在-时，将-后面的第一个字母大写。比如：font-size–> fontSize
2.提前定义好类选择器的样式，通过元素的className属性来设置对应的class属性值

    <style>
        .class1 {
            width: 100px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div id="div1">
        第一个div中的内容
    </div>
    <div id="div2">
        div2的内容
    </div>
</body>
<script>
    //第一种
    var div1 = document.getElementById("div1");
    div1.style.width="200px";
    div1.style.fontSize="50px";
    div1.style.color="pink"
    var div2 = document.getElementById("div2");
    //第二种
    div2.onclick=function () {
        div2.className='class1'
    }
</script>

三、事件

L~B~J

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java学习——JavaWeb基础（四）（JavaScript的BOM、DOM、事件）

文章目录一、BOM1.1 Window对象（窗口对象）1.1.1 与弹出有关的方法1.1.2 与定时器有关的方法1.1.3 与打开关闭有关的方法1.1.4 获取其他对象的属性1.2 Location：地址栏对象1.2.1 浏览器的编码解码问题1.3 History：历史记录对象二、DOM对象2.1 Document：文档对象2.1.1 获取对象的方法2.1.2 创建对象的方法2.1.3 元素对...
复制链接

扫一扫