DOM

最新推荐文章于 2022-12-25 11:39:48 发布

是草莓味的啊

最新推荐文章于 2022-12-25 11:39:48 发布

阅读量125

点赞数

分类专栏： Web前端文章标签： Web前端 DOM

本文链接：https://blog.csdn.net/weixin_43908649/article/details/104394612

版权

Web前端专栏收录该内容

45 篇文章 0 订阅

订阅专栏

一、概述

1.DOM(Document Object Model)文档对象模型,处理可扩展标志语言(html)的标准编程接口
2.将html标签对象化,网页中的每一个元素都看作是一个对象.
3.Dom可以访问所有的对象,以及对象的文本和属性,对象间的关系,可以对对象进行修改和删除,同时也可以创建新的元素.

作用:参与制作动态网页,可以在所有的浏览器提供一种一致的方法,通过代码访问html的结构和内容,在浏览器加载页面时,会解析元素,当遇到js时,会使用dom来检查页面,完成动态的修改页面

二、DOM对象

所有元素以及元素的属性attributr和文本text都可以当做dom对象

1.Window对象

表示浏览器中打开的窗口(都可以省略window.)

1.alert();//显示带有一段消息和一个确认按钮的警告框
2.confirm();//显示带有一段消息和确认按钮和取消按钮的对话框
3.prompt();//显示可提示用户输入的对话框

<script>
	function load(){
		alert("我是一个警告框");
		(window.)confirm("我是一个确认框");//window.可以省略
		prompt("我是一个提示框,请输入你的用户名");
	}	
</script>
<body onload="load()">	</body>

4.window.setInterval(“函数()”,时间);//周期函数,搁一秒弹出一次
5.clearInterval();//取消由setInterval设置的timeout

<script>
	function load(){
		window.setInterval("method1()",1000);
	}	
	function method1(){
		alert("周期函数,搁一秒弹出一次");
	}
</script>
<body onload="load()">	</body>

6.window.setTimeout(“函数()”,时间);//不是周期函数,一秒后仅弹出一次",
7.clearTimeout();//取消由setTimeout设置的timeout

<script>
	function load(){
		window.setTimeout("method2()",1000);
	}	
	function method2(){
		alert("不是周期函数,一秒后仅弹出一次");
	}
</script>

8.print();//打印窗口的内容
9.open();//打开一个新的流浪器窗口或查找一个已命名的窗口
10.close();//关闭浏览器窗口

11.blur();//失去焦点（把键盘焦点从顶层窗口移开）
focus();//获得焦点

function method(){
	document.getElementById("text1").focus();
}
<input type="text" id="text1" onclick="method()"/>

2.location对象

1.location对象包含有关当前URL的信息,location对象是window对象的一部分,通过window.location.属性(方法)来访问,window可以省略
2.属性:
①.host;//设置返回的主机名,和当前URl的端口号
②.hostname//设置返回当前URL的主机名
③.href//设置返回完整的URL,点击时或加载时直接跳转到指定URL页面

//举个栗子:1秒钟之后跳转到百度页面
function load(){
	setTimeout("method2()",1000);
}	
function method2(){
	window.location.href="http://www.baidu.com";
}
<body onload="load()"></body>

3.方法
①.assign()//加载新的文档
②.reload();//重新加载当前文档
window.location.reload();
③.replace();//用新的文档替换当前文档

3.History对象

1.包含用户(在浏览器窗口中)访问过的URL,可以通过window.history.属性来访问(window可省略)
2.方法
①back();//回退到前一个url
②forward();//前进
③go();//跳转到指定具体的页面

<body>
		<a href="4-2DOM对象.html">跳转</a>
		<input type="button" value="回退" onclick="window.history.back()"/>
		<input type="button" value="前进" onclick="window.history.forward()"/>
	</body>

三、节点

1.html中每个部分都是节点

1.文档本身是文档节点
2.所有html元素是元素节点
3.所有html属性是属性节点
4.html元素内文本是文本节点
5.注释是注释节点
6.换行也是属于节点

2.访问获取节点

1.通过id获得节点(id是惟一的)
var span1=document.getElementById(“span1”);
console.info(span1);//把span1节点打印到控制台

2.通过标签名获得节点(可以有很多span标签,所有得到的是一个span集合)
var spans=document.getElementsByTagName(“span”);
console.info(spans.length);
for(var i=0;i<spans.length;i++){
console.info(spans[i]);
}

3.通过name的属性值获得节点(name可以相同)
var spans1=document.getElementsByName(“span1”);
console.info(spans1.length);
for(var i=0;i<spans1.length;i++){
console.info(spans1[i]);
}

3.节点的属性(节点.属性)(属性访问不用加括号)

先用上面三种获取节点
再使用节点的属性

1.获取标签内文本值(只获得文本，html标记会被解析)
console.info(span1.innerText);//打印出 span1(空格+span1)

2.获取标签内文本值和子标签（不会解析html标记，原样打印出来）
console.info(span1.innerHTML);//打印出 span1

3.nodeName:节点名称//变成大写
4.nodeValue:节点的值//元素节点没有值
5.nodeType:节点类型//元素节点是1,属性节点是2,文本节点是3,注释节点是8,文档节点是9
console.info(span1.nodeName+","+span1.nodeValue+","+span1.nodeType);//访问文本节点,打印出:SPAN,null,1

6.首先获取元素节点div1
div1.childNodes(获取div元素所有子节点,返回的是一个集合)
div1.firstChild(获取元素第一个子节点)
div1.lastChild(获取元素最后一个子节点)

var div1=document.getElementById("div1");
var elements=div1.childNodes;
for(var i=0;i<elements.length;i++){
	console.info(elements[i]);
}
console.info(div1.firstChild);
console.info(div1.lastChild);

4.节点操作(js中DOM节点的创建,删除插入操作)

1.创建一个普通节点(括号里面写要创建的节点名称)
var newelmt=document.createElement(“input”);

2.创建文本节点
var textnode=document.createTextNode("我是文本");

innerHTML与createTextNode的异同
同：都可以把一段内容添加到一个节点中
异：若确定插入内容没有html标签，用innerHTML更简洁，不确定（如让用户插入）用createTextNode
createTextNode：添加内容中有html标签会当作文本处理，不会被浏览器解析
innerHTML：添加内容中有html标签会被解析

3.为节点创建属性
①.节点.setAttribute(“属性”,“属性值”);//键值对的形式设置
②.节点.属性(.属性)=“属性值”;//链式形式设置
newelmt.setAttribute(“type”,“text”);
newelmt.value=“marry”;
newelmt.style.color=“red”;
newelmt.id=“new”;

4.添加节点
①.在某节点之前加入一个节点:父节点.insertBefore(新添加节点,要添加的后一个节点元素);
②.添加子节点,默认加到父节点的最后:父节点.appendChild(新添加节点)

在div1中的span1节点元素前添加一个新节点span2
var span2=document.createElement("span");
var span3=document.createElement("span");
div1.insertBefore(span2,span1);
div1.appendChild(span3);
添加前：<div id="div1"><span id="span1"></span></div>
添加后：<div id="div1"><span id="span2"></sapn><span id="span1"></span><span id="span3"></sapn></div>

5.删除子节点:
父节点.removeChild(要删除节点);

6.替换节点:
父节点.replaceChild(新节点,被替换节点);

5.select对象

1.常用属性
①.options:返回<select>元素中所有<option>的一个数组,索引从0开始,如果把option.length设置为0,所有选项都会被清除.
②.selectedIndex:设置或返回下拉列表中被选中的索引号
③.size:设置或返回下拉列表中一次显示的选项数

2.常用方法
①.add(option):用于向<select>添加一个<option>元素
②.remove(index):从下拉列表删除选项

3.常用事件
onchange:常与selectIndex/selected关联使用(省市联动，当被选中的省发生变化，则会触发onchenge事件，改变市的选项内容)

6.option对象

1.创建option对象:var option=new Option(text,value);[Option的O要大写]

2.常用属性
①.index:返回下拉列表中选项的索引位置
②.text:设置或返回选项的文本值
③.value:设置或返回选项的值
④.selected:若为true,则该选项被选中

四、例子

//轮播图练习
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第四章练习轮播图</title>
		<script type="text/javascript">
			onload=function(){
				window.setInterval("method1()",2000);
			}
			var i=1;
			function method1(){
				i++;
				if(i>3){
					i=1;
				}
				//获得img对象
				var img=document.getElementById("img1");
				//通过对象.属性获得或设置属性值
				img.src="./"+i+".jpg";
			}
		</script>
	</head>
	<body>
		<img src="./1.jpg" id="img1">
	</body>
</html>

//定时弹出广告
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第四章定时函数练习</title>
		<script>
			var time;
			window.onload=function(){
				time=window.setTimeout("show()",2000);
			}
			function show(){
				var img=document.getElementById("img1");
				//css的显示和隐藏display:block(显示),none(隐藏)
				//如果想设置对象的style属性，就用 对象.style.属性
				img.style.display="block";
				window.clearTimeout(time);
				//返回值time是setTimeout的ID，可以通过ID来取消定时器，window.clearTimeout(time);
				time=window.setTimeout("hide()",2000);
			}
			function hide(){
				var img=document.getElementById("img1");
				img.style.display="none";
				window.clearTimeout(time);
				time=window.setTimeout("show()",2000);
			}
		</script>
	</head>
	<body>
		<img src="./1.jpg" id="img1">
	</body>
</html>

//使用select和option对象实现二级联动
<!DOCTYPE html>
<html>
	<head>
		<title>第四章使用js完成二级联动</title>
		<meta charset="utf-8">
		<script>
			function getshi(index){
				var shi=document.getElementById('shi');
				if(index!=""){
					shi.options.length=0;
				}
				var arrs=new Array(3);
				arrs[0]=["杭州市","温州市","义乌市","嘉兴市"];
				arrs[1]=["南京市","苏州市","扬州市","无锡市"];
				arrs[2]=new Array("武汉市","襄阳市","宜昌市");
				for(var i=0;i<arrs[index].length;i++){
					var option=new Option(arrs[index][i],i);
					shi.add(option);
				}
			}
		</script>
	</head>
	<body>
		<h1><b>省市二级联动</b></h1>
		籍贯:
		<select id="sheng" onchange="getshi(this.value)">
			<option value="">请选择</option>
			<option value="0">浙江省</option>
			<option value="1">江苏省</option>
			<option value="2">湖北省</option>
		</select>
		<select id="shi">
			<option>请选择</option>
		</select>
	</body>
</html>

//表单校验
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第四章练习表单校验</title>
		<style type="text/css">
			#div1{
				border: 1px solid blue;
				background-color: lightpink;
				width: 100%;
				height: 600px;
				margin: auto;
			}
			#div2{
				border: 3px solid gray;
				background-color: white;
				width: 800px;
				height: 400px;
				margin: auto;
				position: absolute;
				top: 100px;
				left: 360px;
			}
		</style>
		<script type="text/javascript">
			function method1(){
				var username=document.getElementById("username").value;
				if(username==""){
					var span1=document.getElementById("span1").innerHTML="<font color='red'>用户名不能为空</font>";
				}
				var password1=document.getElementById("password1").value;
				if(password1==""){
					var span2=document.getElementById("span2").innerHTML="<font color='red'>密码不能为空</font>";
				}
				var password2=document.getElementById("password2").value;
				if(password2!=password1){
					var span3=document.getElementById("span3").innerHTML="<font color='red'>两次密码不一致</font>";
				}
				var email=document.getElementById("email").value;
				if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(email)){
					var span4=document.getElementById("span4").innerHTML="<font color='red'>邮箱错误</font>";
				}
				else if(username!=""&&password1!=""&&password2==password1&&/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(email)){
					alert("注册成功");
				}
			}
		</script>
	</head>
	<body>
		<div id="div1">
			<div id="div2">
				<table border="0" cellpadding="10px" cellspacing="0">
					<form action="#" method="post">
						<tr>
							<td width="100px">用户名</td>
							<td><input type="text" id="username"/><span id="span1"></span></td>
						</tr>
						<tr>
							<td width="100px">密码</td>
							<td><input type="password" id="password1"/><span id="span2"></span></td>
						</tr>
						<tr>
							<td width="100px">确认密码</td>
							<td><input type="password" id="password2"/><span id="span3"></span></td>
						</tr>
						<tr>
							<td width="100px">性别</td>
							<td>
								<input type="radio" name="sex"/>男
								<input type="radio" name="sex"/>女
							</td>
						</tr>
						<tr>
							<td>籍贯</td>
							<td>
								<select>
									<option value="bj">北京</option>
									<option value="sh">上海</option>
									<option value="hn">河南</option>
								</select>
								<select>
									<option value="zy">信阳</option>
									<option value="sq">商丘</option>
									<option value="zz">郑州</option>
								</select>
							</td>
						</tr>
						<tr>
							<td width="100px">爱好</td>
							<td>
								<input type="checkbox" name="hobby"/>篮球
								<input type="checkbox" name="hobby"/>足球
								<input type="checkbox" name="hobby"/>排球
								<input type="checkbox" name="hobby"/>羽毛球
							</td>
						</tr>
						<tr>
							<td width="100px">邮箱</td>
							<td>
								<input type="text" id="email"/><span id="span4"></span>
							</td>
						</tr>
						<tr>
							<td colspan="2">
								<input type="button" value="注册" onclick="method1()"/>
							</td>
						</tr>
					</form>
				</table>
			</div>
		</div>
	</body>
</html>

//实现表格隔行换色和多选框全选反选
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第四章练习多选框全选</title>
		<script type="text/javascript">
			window.onload=function(){
				var td1=document.getElementById("td1");
				var tab1=document.getElementById("tab1");
				var length=tab1.rows.length;
				for(var i=1;i<length;i++){
					if(i%2==0){
						tab1.rows[i].style.backgroundColor="yellow";
					}else{
						tab1.rows[i].style.backgroundColor="pink";
					}
				}
			}
			function choiceAll(){
				//获取表头行的复选框
				var All=document.getElementById("All");
				//获得表格体中所有复选框
				var choices=document.getElementsByName("choice");
				//判断总复选框是否被选中
				if(All.checked==true){
					for(var i=0;i<choices.length;i++){
						choices[i].checked=true;
					}
				}else{
					for(var i=0;i<choices.length;i++){
						choices[i].checked=false;
					}
				}
			}
		</script>
	</head>
	<body>
		<table border="1px" cellspacing="1px" align="center" id="tab1">
			<thead>
				<tr>
					<th><input type="checkbox" id="All" onclick="choiceAll()"></th>
					<th>序号</th>
					<th>学科</th>
					<th>描述</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr>
				<td id="td1"><input type="checkbox" name="choice"></td>
				<td>1</td>
				<td>java</td>
				<td>万物皆对象,学了java不愁没对象!</td>
				<td><a>修改</a>|<a>删除</a></td>
			</tr>
			<tr>
				<td id="td1"><input type="checkbox" name="choice"></td>
				<td>2</td>
				<td>大数据</td>
				<td>海量数据的存储分析与处理,超强大的!</td>
				<td><a>修改</a>|<a>删除</a></td>
			</tr>
			<tr>
				<td id="td1"><input type="checkbox" name="choice"></td>
				<td>3</td>
				<td>前端</td>
				<td>网站和APP的页面全是他们写出来的,厉害吧!</td>
				<td><a>修改</a>|<a>删除</a></td>
			</tr>
			</tbody>
		</table>
	</body>
</html>

是草莓味的啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM

第四章4-1概述1.DOM(Document Object Model)文档对象模型,处理可扩展标志语言(html)的标准编程接口2.将html标签对象化,网页中的每一个元素都看作是一个对象.3.Dom可以访问所有的对象,以及对象的文本和属性,对象间的关系,可以对对象进行修改和删除,同时也可以创建新的元素.0作用:参与制作动态网页,可以在所有的浏览器提供一种一致的方法,通过代码访问htm...
复制链接

扫一扫

专栏目录