JavaScript day04 DOM编程2

一、DOM编程

1.Node对象

1.1属性

firstChild

描述:返回指定节点的第一个子节点

语法:node node.firstChild

lastChild

描述:返回指定节点的最后一个子节点

语法:node node.lastChild

parentNode

描述:返回当前节点的父节点

语法:node node.parentNode

nextSibling

描述:返回当前节点的下一个兄弟节点(弟弟)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>DOM编程</title>
	<script>
		function changeAttr(){
			//获取段落对象
			var pEle = document.getElementById('p');
			//以段落对象为基准，获取div对象
			var divEle = pEle.parentNode;
			//获取div对象的"弟弟"节点--ul
			var ulEle = divEle.nextSibling.nextSibling;
			//获取ul对象的第一个li节点
			var liEle = ulEle.firstChild.nextSibling;
			//控制li节点的属性
			liEle.setAttribute('type','circle');
		}
	</script>
</head>
<body>
	<div>
		<p id="p">我是段落1</p>
		<p>我是段落2</p>
	</div>
	<ul>		
		<li>我是li1</li>
		<li>我是li2</li>
	</ul>
	<input type="button" value="单击我,控制第一个li的类型" onclick="changeAttr()">
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>DOM编程</title>
	<script>
		function changeAttr(){
			//获取对象
			var pEle1 = document.getElementById('p');
			//以当前对象为基准,查找"弟弟"节点
			var pEle2 = pEle1.nextSibling.nextSibling;
			//设置属性
			pEle2.setAttribute('align','center');
		}
	</script>
</head>
<body>
	<p id="p">段落1</p>	
	<p>段落2</p>
	<input type="button" value="单击我,让第二个段落居中" onclick="changeAttr()">
</body>
</html>

语法:node node.nextSibling

previousSibling

描述:返回当前节点的上一个兄弟节点(哥哥)

语法:node node.previousSibling

1.2方法

replaceChild

描述:节点替换

语法:node node.replaceChild(newChild,oldChild)


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>DOM编程</title>
	<script>
		function replaceElement(){
			//1.创建图像节点
			var imageEle = document.createElement('img');
			//2.设置图像属性
			imageEle.setAttribute('src','images/5b3c6885Na37cc2e5.jpg');
			//3.获取段落节点
			var pEle = document.getElementById('p');
			document.body.replaceChild(imageEle,pEle);
		}
	</script>
</head>
<body>
	<p>111</p>
	<p id="p">我是段落</p>
	<p>222</p>
	<input type="button" value="单击我,可以将段落替换为图像" onclick="replaceElement()">
</body>
</html>

2.Document对象

2.1方法

getElementsByTagName()

描述:获取文档中指定标记名称所形成的集合(数组)

语法:NodeList document.getElementsByTagName(tagName)


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>DOM编程</title>
	<script>
		function removeAllParagraph(){
			//获取文档中由p标记形成的集合(数组)
			var pEles = document.getElementsByTagName('p');
			for(var n=0;n<pEles.length;n++){
				pEles[n].parentNode.removeChild(pEles[n]);
				n--;
			}
		}
	</script>
</head>
<body>
	<h1>我是BODY内的H1</h1>
	<p>段落1</p>
	<p>段落2</p>
	<div style="border:2px solid #f00;">
		<h1>我是DIV内的标题1</h1>
		<p>段落1</p>
		<h2>我是DIV内的标题2</h2>
	</div>
	<input type="button" value="单击我,可以删除页面内的所有段落" onclick="removeAllParagraph()">
</body>
</html>

createTextNode()

描述:创建文本节点

语法:TextNode document.createTextNode(string)


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>DOM编程</title>
	<script>
		function createParagraph(){
			//1.创建段落节点
			var pEle = document.createElement('p');
			//2.创建文本节点
			var txtNode = document.createTextNode('下雨了');
			//3.将文本节点追加到段落节点内
			pEle.appendChild(txtNode);
			//4.将段落节点追加到body对象
			document.body.appendChild(pEle);
		}
	</script>
</head>
<body>
	<input type="button" value="创建段落,内容自定" onclick="createParagraph()">
</body>
</html>

3.Element对象

3.1方法

getElementsByTagName()

描述:获取指定元素中包含指定标记名称所形成的集合(数组)

语法:NodeList Element.getElementsByTagName(tagName)

二、HTML DOM

HTML DOM提供针对处理HTML文档的API.

1.选取对象

Element document.getElementById(string id)

NodeList document.getElementsByTagName(string tagName)

NodeList Element.getElementsByTagName(string tagName)

2.属性控制

A.对于单个单词的HTML标记属性即HTML DOM对象属性;


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>HTML DOM</title>
	<script>
		function changeAttr(){
			//1.获取对象
			var pEle = document.getElementById('p');
			//2.设置属性			
			pEle.align = 'center';
		}
	</script>
</head>
<body>
	<p id="p">我是段落</p>
	<input type="button" value="单击我，让段落居中" onclick="changeAttr()">
</body>
</html>

B.对于合成词的HTML标记属性(如table标记的cellpading、cellspacing属性)在HTML DOM编程时,采用"驼峰标记法"命名(如cellPadding、cellSpacing)


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>HTML DOM</title>
	<script>
		function changeAttr(){
			//1.获取对象
			var tableEle = document.getElementById('table');
			//2.设置属性
			tableEle.width = '500';
			tableEle.border = '3';
			//注意:cellPadding和cellSpacing的写法
			tableEle.cellSpacing = '0';
			tableEle.cellPadding = '20';
		}
	</script>
</head>
<body>
	<table id="table">
		<tr>
			<td>中国</td>
			<td>中国</td>
		</tr>
		<tr>
			<td>中国</td>
			<td>中国</td>
		</tr>
		<tr>
			<td>中国</td>
			<td>中国</td>
		</tr>
	</table>
	<input type="button" value="单击我,控制表格的属性" onclick="changeAttr()">
</body>
</html>

C.对于HTML标记的class属性,在HTML DOM编程时使用className取代;
(因为class是ECMAScript中的关键字)


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>HTML DOM</title>
	<style type="text/css">
		.f1{
			font-size:30px;
			color:#f00;
		}
	</style>
	<script>
		function applyClass(){
			//1.获取对象
			var pEle = document.getElementById('p');
			//2.设置属性(注意className的写法)
			pEle.className = 'f1';
		}
	</script>
</head>
<body>
	<p id="p">中华人民共和国万岁</p>
	<input type="button" value="单击我,为段落使用f1CSS类" onclick="applyClass()">
</body>
</html>

D.对于HTML标记的布尔属性(如单/复选框的checked、列表项的selected属性)在HTML DOM编程时采用boolean类型表示;


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>HTML DOM</title>
	<script>
		function checkedItem(){
			//1.获取对象
			var checkboxEle = document.getElementById('checkbox');
			//2.设置属性
			//选中
			checkboxEle.checked = true;
			//禁用
			checkboxEle.disabled = true;
		}
	</script>
</head>
<body>
	<p><input type="checkbox" id="checkbox"></p>
	<p><input type="button" value="单击我,让复选框选中" onclick="checkedItem()"></p>
</body>
</html>

E.在HTML DOM编程时,某些HTMLDOM对象有自己特有的属性/方法;

3.HTMLDocument对象

getElementsByName()方法

描述:获取文档中name属性相同的对象的组成的集合(数组)

语法:NodeList document.getElementsByName(string name)


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>QQ邮箱</title>
	<script>
		//单击"控制复选框"时调用;
		function controlCkboxClick(){
			//1.获取"控制复选框"对象
			var controlCkboxEle = document.getElementById('controlCkbox');
			//2.获取name为mailCkbox的复选框组成的集合(数组)
			var mailCkboxEles = document.getElementsByName('mailCkbox');
			//3.遍历mailCkbox的复选框集合,依次让每个成员的状态与控制复选框相同
			for(var n=0;n<mailCkboxEles.length;n++){
				mailCkboxEles[n].checked = controlCkboxEle.checked;
			}
			//调用控制按锯的自定义函数
			controlBtnStatus();
		}

		//获取被选定的"邮件复选框"的数量

		function getCheckedNum(){
			//计数器
			var count = 0;
			//邮件复选框集合
			var mailCkboxEles = document.getElementsByName('mailCkbox');
			for(var n=0;n<mailCkboxEles.length;n++){
				//只有当前邮件复选框被选定,计数器才加1
				if(mailCkboxEles[n].checked){
					count++;
				}
			}
			return count;
		}

		//在单击每一个"邮件复选框"时调用

		function mailCkboxClick(){
			//获取"控制复选框"对象
			var controlCkboxEle = document.getElementById('controlCkbox');
			//获取name为mailCkbox的复选框组成的集合(数组)
			var mailCkboxEles = document.getElementsByName('mailCkbox');
			//原始方法
			/*
			if(mailCkboxEles.length==getCheckedNum()){
				controlCkboxEle.checked = true;
			} else {				
				controlCkboxEle.checked = false;
			}
			*/
			//简捷方法
			controlCkboxEle.checked = mailCkboxEles.length==getCheckedNum();
			//调用控制按锯的自定义函数
			controlBtnStatus();
		}
		//控制按钮的状态
		function controlBtnStatus(){
			var recycleBtnEle = document.getElementById('recycleBtn');
			var deleteBtnEle = document.getElementById('deleteBtn');
			//原始方式
			/*
			if(getCheckedNum()>=1){
				recycleBtnEle.disabled = false; 
				deleteBtnEle.disabled =  false;
			} else {
				recycleBtnEle.disabled = true;
				deleteBtnEle.disabled = true;
			}
			*/
			//简捷方法
			recycleBtnEle.disabled = deleteBtnEle.disabled = !getCheckedNum()>=1; 
			 
		}
	</script>
</head>
<body>
	<div id="container">
		<table width="100%" cellpadding="10" cellspacing="0" border="1">
			<tr>
				<td colspan="3">
					<input type="button" value="放入回收站" disabled id="recycleBtn">
					<input type="button" value="彻底删除" disabled id="deleteBtn">
				</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="controlCkbox" id="controlCkbox" onclick="controlCkboxClick()"></td>
				<td>主题</td>
				<td>发信人</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="mailCkbox" onclick="mailCkboxClick()"></td>
				<td>关于HTML的问题</td>
				<td>张三@sina.com.cn</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="mailCkbox" onclick="mailCkboxClick()"></td>
				<td>老师,救命呀</td>
				<td>李四@sohu.com</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="mailCkbox" onclick="mailCkboxClick()"></td>
				<td>老师,JavaScript怎么这么难呀</td>
				<td>[email protected]</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="mailCkbox" onclick="mailCkboxClick()"></td>				
				<td>拼多,拼多多</td>
				<td>[email protected]</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="mailCkbox" onclick="mailCkboxClick()"></td>
				
				<td>奔跑步,小兔子</td>
				<td>[email protected]</td>
			</tr>
		</table>
	</div>
</body>
</html>

在这里插入图片描述

JavaScript day04 DOM编程2

猜你喜欢