document对象

<!DOCTYPE html>
<html lang="en">
 <head>
   <title>document对象</title>
   <script>
		//1、元素节点的内容
		function f1(){
			//通过id找到body体中的元素节点
			var d1=document.getElementById("d1");
			//d1根据id找到的元素节点
			//alert(d1);//[object HTMLDivElement]
			//获取内容
			//alert(d1.innerText);//hello
			//alert(d1.innerHTML);//<em>hello</em>
			//先根据id找到元素节点
			var d2=document.getElementById("d2");
			//alert(d2.innerText);
			//alert(d2.innerHTML);//<em>你好</em>
			//设置元素节点中的内容
			d1.innerText=
		"<h3 style='color:red'>今天是星期三</h3>";
			d2.innerHTML=
			"<h3 style='color:red'>3月9日</h3>";
		}
		//2、元素节点中的属性
		function f2(){
			/*
			//(1)增加超链接的href属性
            //根据id找到body体中的超链接元素节点
			var a1=document.getElementById("a1");
			//alert(a1.innerText);//点我去百度
			//设置元素节点的属性
			a1.setAttribute("href"
			  ,"http://www.baidu.com");
			a1.setAttribute("target","_blank");
			//设置元素节点的内容
			a1.innerText="去百度跳转"; 

			//(2)设置图片的属性
			//根据id找到图片的元素节点
			var g1=document.getElementById("g1");
			g1.setAttribute("src","m.jpg");
			g1.setAttribute("width","300");
			g1.height="200";
			g1.title="这是一个可爱的小猫";
			*/

			/*
			//获取元素节点的属性
			//根据id找到按钮元素节点
			var btn=document.getElementById("btn");
			alert(btn.getAttribute("type"));
			alert(btn.getAttribute("value"));
			*/

			//删除元素节点的属性
			//将超链接的href属性删除
			var a1=document.getElementById("a1");
			a1.removeAttribute("href");
		}

		//3、元素节点的样式
		function f3(){
			//找到body体中的段落p，修改样式
			var p1=document.getElementById("p1");
			p1.style.color="blue";
			p1.style.fontSize="50px";
			p1.style.fontFamily="楷体";  
			p1.style.textAlign="center";
			p1.style.textDecoration="underline";
		}

		//执行字体变大的函数
		var num=30; //字体的初始大小为30
		function btnBig(){
			//1、根据id找到段落元素节点
			//2、调用style样式，修改fongSize
			//3、字体大小的数字是变量
			var p1=document.getElementById("p1");
			num=num+10;
			p1.style.fontSize=num+"px";
		}
		//执行字体变小的函数
		function btnSmall(){
			var p1=document.getElementById("p1");
			num=num-10;
			p1.style.fontSize=num+"px";
		}
		//执行图片隐藏的函数
		function btnHid(){
			//1、找到body体中的图片
			//2、修改图片style样式中visibility
			var g1=document.getElementById("g1");
			g1.style.visibility="hidden";
		}
		//执行图片显示的函数
		function btnShow(){
			var g1=document.getElementById("g1");
			g1.style.visibility="visible";
		}
		//执行图片切换的函数
		function btnChange(){
			var g1=document.getElementById("g1");
			g1.setAttribute("src","n.jpg");
		}
   </script>
   <style>
		#p1{
			color:red;
			font-size:30px;
		}
   </style>
 </head>
 <body>
	<div id="d1"><em>hello</em></div>
	<div id="d2"><em>你好</em></div>
	<a id="a1" href="http://www.baidu.com">
	  点我去百度</a>
	<br/>
	<img id="g1" src="m.jpg" width="300" height="200"/>
	<br/>
	<p id="p1">我是一个段落标记</p>
	<input type="button" value="点我" 
	onclick="f3();" id="btn" />
	<input type="button" value="变大" 
	onclick="btnBig();"/>
	<input type="button" value="变小" 
	onclick="btnSmall();"/>
	<br/>
	<input type="button" value="显示" 
	onclick="btnShow();"/>
	<input type="button" value="隐藏" onclick="btnHid();"/>
	<input type="button" value="切换" 
	onclick="btnChange();"/>
 </body>
</html>

通过name进行查找

<!DOCTYPE html>
<html lang="en">
 <head>
    <title>通过name进行查找</title>
	<script>
		function f1(){
			//通过name属性来查找
			var nodes=
			document.getElementsByName("sex");
			//nodes也是数组，存储了查找的元素节点
			alert(nodes.length);//2
			alert(nodes[0].value);//man
			alert(nodes[1].value);//woman
		}
	</script>
 </head>
 <body>
 	<!--关于性别的单选按钮-->
	请选择性别：
	男<input type="radio" name="sex" value="man"/>
	女<input type="radio" name="sex" value="woman"/>
	<input type="button" value="确定" onclick="f1();"/>
 </body>  
</html>

标签名查找

<!DOCTYPE html>
<html lang="en">
 <head>
    <title>标签名查找</title>
	<script>
		function f1(){
			//通过标签名查找
			var pNodes=
			document.getElementsByTagName("p");
			//pNodes是找到的所有的节点，放到了
			//数组中
			//求pNodes数组的长度
			//alert(pNodes.length);  //3
			//alert(pNodes[0].innerText);
			//alert(pNodes[1].innerHTML);
			//alert(pNodes[2].innerHTML);
			var p1=pNodes[0];
			p1.style.color="red";
			p1.innerHTML="今天是星期五";

			//1、通过document调用查找的是整个body
			//体中的元素节点
			//2、通过d1调用查找的div中的元素节点

			//通过id找到body体中的div元素节点
			var d1=document.getElementById("d1");
			var pp=d1.getElementsByTagName("p");
			alert(pp.length);//2
			alert(pp[0].innerHTML);
			alert(pp[1].innerHTML);
		}
	</script>
 </head>
 <body>
    <p>段落1</p>
	<div id="d1">
		<p>div中的段落1</p>
		<p>div中的段落2</p>
	</div>
	<input type="button" value="确定" onclick="f1();"/>
 </body>
</html>

层次关系查询节点

<!DOCTYPE html>
<html lang="en">
 <head>
   <title>层次关系查询节点</title>
   <script>
		//点击确定按钮执行的函数
		function f1(){
			//通过层次关系来查找元素节点
			var select1=
			document.getElementById("select1");
			//查询select1元素节点所有的孩子节点
			//所有的孩子节点都放入数组中
			//alert(select1.childNodes);
			//[object NodeList]
			//alert(select1.childNodes.length);//7
			//alert(select1.childNodes[0].innerHTML);
			//alert(select1.childNodes[1].innerHTML);
			var cArr=select1.childNodes;
			//使用循环查询孩子节点中所有的内容
			for(var i=1;i<cArr.length;i=i+2){
				//alert(cArr[i].innerHTML);
			}
			//通过id来查找元素节点
			var d1=document.getElementById("d1");
            var d2=document.getElementById("d2");
			//alert(d1.innerHTML);
			//alert(d2.innerHTML);
			
			//层次关系--查找第一个孩子
			//alert(select1.firstChild.innerHTML);

			//层次关系--同级别元素节点查找
			/*
		alert(select1.previousSibling
		   .previousSibling.innerHTML);
        alert(select1.nextSibling
		   .nextSibling.innerHTML);
		   */
		   	/*
			var a=select1.nextSibling.nextSibling;
			a.innerHTML="去淘宝";
			a.href="http://www.taobao.com";
			*/
			var a1=document.getElementById("a1");
			a1.innerHTML="去淘宝啊";
			a1.href="http://www.taobao.com";

			//层次关系--父节点查询
			//d1是第一个option元素节点
			alert(d1.parentNode.getAttribute("id"));
			//通过id的方式
			alert(select1.getAttribute("id"));

		}
   </script>
 </head>
 <body>
	<p>段落文本</p>
	<select id="select1">
		<option value="1" id="d1">a</option>
        <option value="2" id="d2">b</option>
		<option value="3" id="d3">c</option>
	</select>
	<a href="http://www.baidu.com" id="a1">ClickMe</a>
	<input type="button" value="确定" 
	onclick="f1();"/>
 </body>
</html>

删除元素节点

<!DOCTYPE html>
<html lang="en">
 <head>
    <title>删除元素节点</title>
	<script>
		function f1(){
			//删除div元素节点
			//找到body体中的form节点
			var fm=document.getElementById("fm");
			//找到body体中的div节点
			var dv=document.getElementById("dv");
			//fm.removeChild(dv);

			//删除超链接元素节点
			//找到body体中的a节点
			var link=
			document.getElementById("link");
			//dv.removeChild(link);
			link.parentNode.removeChild(link);
			//dv和link.parentNode指的是同一个
			//元素节点，都表示div元素节点。
		}
	</script>
 </head>
 <body>
	<form id="fm">
		<input type="button" value="删除节点" onclick="f1();" id="btn"/>
		<div id="dv" style="border:1px solid black;width:100px;height=70px;">
			<a href="" id="link">点我去百度</a>
			<p>我是一个段落标记</p>
		</div>
	</form>
 </body>
</html>

移动开发最新文章

Vue3装载axios和element-ui

android adb cmd

【xcode】Xcode常用快捷键与技巧

Android开发中的线程池使用

Java 和 Android 的 Base64

【Android Jetpack】DataStore

加:2022-03-15 22:41:49 更:2022-03-15 22:43:34

360图书馆购物三丰科技阅读网日历万年历 2024年11日历

-2024/11/24 17:21:01-

图片自动播放器
↓图片自动播放器↓

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

网站联系: qq:121756557 email:121756557@qq.com IT数码