JavaScriptDOM编程document对象

ning_ning_03

于 2022-03-18 21:42:37 发布

阅读量217

点赞数 2

文章标签： javascript 前端 jquery

本文链接：https://blog.csdn.net/m0_67768699/article/details/123584670

版权

一、BOM编程
1.属于js的组成部分之一
           2.DOM全称：document object model 文档对象模型
           3.DOM是W3C组织指定的一套标准，实现对HTML文档中标签及属性进行增删改查
           4.BOM浏览器对象模型：包含了document对象，而document属于DOM。BOM包含DOM。
           5.DOM树
               顶端---document
               根节点：html标签
               head节点 body节点

二、document对象：表示整个文档

BOM的window包含了document，因此可以直接使用window对象的document属性，通过document属性就可以访问、检索、修改XHTML文档内容与结构。

因为document对象又是DOM（Document Object Model）模型的根节点。

可以说，BOM包含了DOM(对象)，浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，从而js可以操作浏览器以及浏览器读取到的文档。

①write()方法：

可以向页面输出变量也可以向页面输出html代码

	     window.document.write("我是向页面输出的内容");
		//网页内容
		 document.write("<h1>呵呵</h1>");

②getElementById()方法：

通过id得到标签

图片切换：


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
       //设置格式
		img{
			width: 200px;
			height: 200px;
		}
	</style>
	<script type="text/javascript">
        //封装id
		function $(id){
			return document.getElementById(id);
		}
        //根据下标改变图片
		var index = 0;
		function changeImg(){
			var imgs = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
			var oImg = $("oImg");
			index++;
			console.log(index+"---"+ imgs[index]);
			if(index > imgs.length-1){
				index = 0;
			}
			oImg.src = imgs[index];
			
		}
        //设置定时器
		var timer = null;
		function autoImg(){
			if(timer!=null){
				stopImg();
			}
			timer = window.setInterval(function(){
				changeImg();
			},2000);
		}

		function stopImg(){
			window.clearInterval(timer);
		}
	</script>
</head>
<body>
	<img id="oImg" src="img/1.jpg" alt="" >
	<button onclick="changeImg();">下一张</button>
	<button onclick="autoImg();">自动切换</button>
	<button onclick="stopImg();">自动切换</button>
</body>
</html>

③getElementsByName()方法：

通过标签的name值得到标签，返回的时一个集合（数组）

④getElementsByTagName()方法：

通过标签名称得到元素

代码：

<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		//编写一个方法 来实现返回根据id获取的对象
		function $(id){
			return document.getElementById(id);
		}
		//加载函数
		window.onload = function(){
			//通过id属性获取按钮
			$("oBtn").onclick = function(){
				//利用getElementsByTagName获取一组标签输出
				var oInputs = document.getElementsByTagName("input");
				//alert(oInputs.length);
				//循环遍历
				for(var i = 0;i<oInputs.length;i++){
					console.log(oInputs[i].value);
				}
			};
			//演示getElementsByName  根据name属性获取一组标签
			$("oBtn2").onclick = function(){
				var hobbys = document.getElementsByName("hobby");
				var str = "";
				//alert(hobbys.length);
				//获取复选框中的value
				for(var i = 0;i<hobbys.length;i++){
					//console.log(hobbys[i].value);
					if(hobbys[i].checked == true){
						// console.log(hobbys[i].value);
						str+=hobbys[i].value+",";
					}
				}
				// substring 截取
				// lastIndexOf 获取最后一次出现的指定字符的下标位置
				str = str.substring(0,str.lastIndexOf(","));
				console.log(str);
			};

		};
	</script>
</head>
<body>
<!-- 	getElementsByTagName
	作用：根据标签本身获取一组对象 -->
	<input type="text" value = "1111"> <br/>
	<input type="text" value = "2222"> <br/>
	<input type="text" value = "3333"> <br/>
	<input type="text" value = "4444"> <br/>
	<input type="text" value = "5555"> <br/>
	<button id="oBtn">点击获取</button>
	<hr>
	<input name = "hobby" type="checkbox" value = "111">111 <br>
	<input checked="checked" name = "hobby" type="checkbox" value = "222">222 <br>
	<input name = "hobby" type="checkbox" value = "333">333 <br>
	<input name = "hobby" type="checkbox" value = "444">444 <br>
	<input name = "hobby" type="checkbox" value = "555">555 <br>
	<button id="oBtn2">点击获取</button>
</body>
</html>

三、元素的显示和隐藏

visibility属性

visible   表示元素是可见的
hidden   表示元素是不可见的
   object.style.visibility="值"

display属性
none 表示此元素不会被显示
block 表示此元素将显示为块级元素，此元素前后会带有换行符
object.style.display="值"

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		img{
			width: 200px;
			height: 200px;
		}
	</style>
	<script type="text/javascript">
		function $(id){
			return document.getElementById(id);
		} 
		//加载函数
		window.onload = function(){
			//显示
			$("oBtn1").onclick = function(){
				$("oImg").style.visibility = "visible"
			}
			//隐藏
			$("oBtn2").onclick = function(){
				$("oImg").style.visibility = "hidden"
			}

			//显示
			$("oBtn3").onclick = function(){
				$("oImg").style.display = "inline-block"
			}
			//隐藏
			$("oBtn4").onclick = function(){
				$("oImg").style.display = "none"
			}
		}

	</script>
</head>
<body>
	<!-- visibility和display控制标签的显示与隐藏 -->
	<img src="img/1.jpg" alt="">
	<img id="oImg" src="img/2.jpg" alt="">
	<img src="img/3.jpg" alt="">
	<hr>
	<button id="oBtn1">visibility控制显示</button>
	<button id = "oBtn2">visibility控制隐藏</button>
	<button id="oBtn3">display控制显示</button>
	<button id = "oBtn4">display控制隐藏</button>
</body>
</html>

树形菜单：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	/*padding 内填充 margin 外边距*/
		*{padding: 0px;margin: 0px;}
		div{
			margin: 0 auto;
			width: 150px;
		}
		ul{
			list-style: none;
		}
		ul>li{
			border: 1px solid red;
			width: 150px
		}
		ul>ul{
			text-indent: 2em;
			background-color: pink;
			/*display: none;*/
		}
	</style>
	<script type="text/javascript">
		function $(id){
			return document.getElementById(id);
		} 
		//控制列表的显示与隐藏
		function add(id){
			var oul = $(id);
			var result = oul.style.display;
			console.log(result);
			if(result == 'none'){
				oul.style.display = 'block';
			}else{
				oul.style.display = 'none';
			}
		}


	</script>
</head>
<body>
	<!-- 树形菜单 -->
	<div>
		<ul>
		<li onclick="add('a1');">我的基友</li>
		<ul id="a1" style = "display:none;">
			<li>张无忌</li>
			<li>杨过</li>
			<li>郭靖</li>
			<li>黄睿</li>
			<li>欧阳锋</li>
		</ul>
		<li onclick="add('a2');">我的老婆</li>
		<ul id="a2"  style = "display:none;">
			<li>杨玉环</li>
			<li>貂蝉</li>
			<li>王昭君</li>
			<li>西施</li>
		</ul>
		<li onclick="add('a3');">我的小弟</li>
		<ul id="a3"  style = "display:none;">
			<li>古天乐</li>
			<li>郭富城</li>
			<li>刘德华</li>
			<li>张学友</li>
			<li>黎明</li>
		</ul>
	</ul>
	</div>

</body>
</html>