JavaScript -DOM

最新推荐文章于 2022-08-02 22:38:31 发布

weixin_54719836

最新推荐文章于 2022-08-02 22:38:31 发布

阅读量101

点赞数

分类专栏： dom 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_54719836/article/details/115694326

版权

dom 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JavaScript 之DOM一
文章目录
DOM?
一、事件
1.事件的行内写法
2.事件绑定处理函数的写法
二、文档的加载
1.文档加载的顺序
2.onload事件改变加载顺序
三、DOM查询
轮播图实验
全选练习
添加删除员工练习
DOM?
DOM全称为Document Object Model , 即JS当中的宿主对象 .
一个网页就是一个文档对象 , 一个每个标签都可以看作一个对象

结点 : 构成网页的最基本部分, 网页的每部分都是一个结点

文档结点: 整个网页,document对象
元素结点: HTML标签
属性结点: 元素的属性
文本结点: 标签中的文本内容 <_{>文本节点</}>

提示：以下是本篇文章正文内容，下面案例可供参考

一、事件
JS与HTML通过事件实现交互

1.事件的行内写法

这是一个按钮

缺点 : 不利于维护

2.事件绑定处理函数的写法

这是一个按钮

维护更加方便

二、文档的加载
1.文档加载的顺序
在HTML文件中,通常都是从上往下逐行加载的,也就是说会先加载head标签中的内容,再加载body中的内容

代码如下（示例）：

var btn = document.getElementById("btn");
		btn.onclick = function(){
			alert('dian');
		};
<button id="btn" value="按钮">这是一个按钮</button>

这种写法会报空指针异常,因为btn还没加载出来

2.onload事件改变加载顺序
onload事件会在整个页面加载完以后再触发 , 但是会影响性能

注意需要将onload事件绑定给window对象

代码如下（示例）：

	window.onload = function() {
			//获取id为btn的按钮
			var btn = document.getElementById("btn");
			//为按钮绑定一个单击响应函数
			btn.onclick = function() {
				alert("hello");
			};
		};
<button id="btn" value="按钮">这是一个按钮</button>

这样写就不能有空指针异常了

三、DOM查询
1.document对象的几个查询方法 :

1.document.getElementById(); 根据id获取元素对象
2.document.getElementsByTagName(); 根据标签名获取一组元素对象
3.document.getElementsByName(); 根据input框的name属性获取元素对象[radio]
4.document.querySelector(".info"); 根据标签属性查询,返回一个值
5.document.querySelectorAll(".info"); 根据标签属性查询,返回一个数组

2.查询实验 :

	window.onload = function(){
			var btn01 = document.getElementById("bj");	
			var btn02 = document.getElementsByName("gender");
			var btn03 = document.getElementsByTagName("li");
			alert(btn01.innerHTML); //提示出 "北京"
			for(var i = 0 ; i <btn02.length ; i++){
				alert(btn02[i].className);
				alert(btn02[i].name);
			}
			
			for(var j = 0; j < btn03.length ; j++){
				alert(btn03[i].innerHTML);
			}
			
		};

注 : document.getElementsByName(param); 方法,如果要获取class,需要使用className取值 , 其它的属性与html标签中的属性名保持一致

querySelector()与querySelectorAll()实验 :

	<script type="text/javascript">
		
		window.onload = function(){
			var div = document.querySelector(".info");
			console.log(div.innerHTML);
			
			var divList = document.querySelectorAll(".info");
			for(var i = 0 ; i < divList.length ; i++){
				console.log(divList[i].innerHTML );
			}
		};
		
	</script>
HTML👇
<body>
	
	<div class="info">1</div>
	<div class="info">2</div>
	<div class="info">3</div>
	
</body>

结果 :

轮播图实验
先给代码

	<div id="outer">
		<span id="info"></span>
		<img src="img/1.jpg" />
		<button id="pre" value="上一页"></button>
		<button id="next" value="下一页"></button>
	</div>
	
</body>

{
margin: 0;
padding: 0;
}

#outer {
width: 500px;
margin: 50px auto;
padding: 10px;
background-color: greenyellow;
/设置文本居中/
text-align: center;
}

button{
height: 30px;
width: 60px;
}

/**

思路 :
1.获取页面各元素
2.写切换算法
*/

window.onload = function(){
var pre = document.getElementById(“pre”);
var next = document.getElementById(“next”);
var img = document.getElementsByTagName(“img”)[0];
var info = document.getElementById(“info”);

 var index = 0; //索引
 var imgArrs = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
 
 info.innerHTML = "一共"+imgArrs.length+"张,当前为"+(index+1)+"zhang"; //提示文本
 
 //轮播算法
 pre.onclick = function(){
 	index--;
 	
 	//判断
 	if(index < 0){
 		index = 0;
 	}
 	
 	img.src = imgArrs[index];
 	info.innerHTML = "一共"+imgArrs.length+"张,当前为"+(index+1)+"张";
 };
 
 next.onclick = function(){
 	index++;
 	
 	if(index > imgArrs.length-1){
 		index = imgArrs.length-1;
 	}
 	
 	img.src = imgArrs[index];
 	info.innerHTML = "一共"+imgArrs.length+"张,当前为"+(index+1)+"zjhang";
 };

};

全选练习

	<script type="text/javascript">
		window.onload = function(){
			var checkedAllBox = document.getElementById("checkedAllBox"); //获取全选按钮
			var checkedNoBtn = document.getElementById("checkedNoBtn");
			var checkedRevBtn = document.getElementById("checkedRevBtn");
			var checkedAllBox = document.getElementById("checkedAllBox");
			
			var sendBtn = document.getElementById("sendBtn");
			
			var items = document.getElementsByName("items");
			
			//全选
			checkedAllBtn.onclick = function(){
				for(var i = 0 ; i<items.length ; i++){
					items[i].checked = true;
				}
				checkedAllBox.checked = true;
			};
			
			//全不选
			checkedNoBtn.onclick = function(){
				for(var i = 0 ; i<items.length ; i++){
					items[i].checked = false;
				}
				checkedAllBox.checked = false;
			};
			
			//反选
			checkedRevBtn.onclick = function(){
				for(var i = 0 ; i<items.length ; i++){
					items[i].checked = !items[i].checked;
				}
			};
			
			//提交
			sendBtn.onclick = function(){
				for(var i = 0 ; i<items.length ; i++){
					if(items[i].checked){
						alert(items[i].value);
					}
				}
			};
			
			//全选/全不选
			checkedAllBox.onclick = function(){
				for(var i = 0 ; i<items.length ; i++){
					items[i].checked = this.checked;
				}
			};
			
			//四个都选中了,checkedAllBox也应该选中
			//四个都没选中,checkedAllBox也不能选中
			for(var i = 0 ; i<items.length ; i++){
				//为4个单选框都绑定响应函数 , 点击一个就全选	
				items[i].onclick = function(){
					for(var j = 0 ; j<items.length ; j++){
						if(items[j].checked == false){
							//存在一个未被选中的
							checkedAllBox.checked = false;
							break;
						}
					}	
				};
				
				
			}
			
		};
	</script>
	
</head>
<body>
	
		<form method="post" action="">
			你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选 
			
			<br />
			<input type="checkbox" name="items" value="足球" />足球
			<input type="checkbox" name="items" value="篮球" />篮球
			<input type="checkbox" name="items" value="羽毛球" />羽毛球
			<input type="checkbox" name="items" value="乒乓球" />乒乓球
			<br />
			<input type="button" id="checkedAllBtn" value="全　选" />
			<input type="button" id="checkedNoBtn" value="全不选" />
			<input type="button" id="checkedRevBtn" value="反　选" />
			<input type="button" id="sendBtn" value="提　交" />
		</form>
	
</body>

注意:for循环会在响应函数加载之前先被加载

添加删除员工练习

weixin_54719836

关注

0
点赞
踩
0

收藏

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

JavaScript 之DOM一文章目录DOM?一、事件1.事件的行内写法2.事件绑定处理函数的写法二、文档的加载1.文档加载的顺序2.onload事件改变加载顺序三、DOM查询轮播图实验全选练习添加删除员工练习DOM?DOM全称为Document Object Model , 即JS当中的宿主对象 .一个网页就是一个文档对象 , 一个每个标签都可以看作一个对象结点 : 构成网页的最基本部分, 网页的每部分都是一个结点文档结点: 整个网页,document对象元素结点:
复制链接

扫一扫