java贪吃蛇游戏设计,成长路线图

前端开发哪里培训好,一个前端妹子的面试笔记

  返回  

JavaScriptDOM对象

2021/7/21 20:36:16 浏览:

文章目录

  • DOM简介
  • 事件、加载
    • 事件对象
    • 加载
  • DOM查询
    • DOM增删改
    • 使用DOM操作CSS样式
    • 读取元素的样式

DOM简介

DOM:Document Object Model文档对象模型
文档:网页的每一部分都会转换成了对象
模型:使用模型表示对象之间的关系,方便获取对象

节点Note:
	构成网页的基本成分,网页每一部分都可以称为节点
	文档节点:整个HTML文档
	元素节点:HTML中的HTML标签
	属性节点:元素的属性
	文本节点:HTML标签中的文本内容
					
浏览器以及为我们提供了文档节点对象,为window属性
可以在页面中直接使用,文档节点代表整个网页

//获取id为id1的对象
var id1 = document.getElementById("id1");
id1.innerHTML = "Button";

节点的属性
在这里插入图片描述

事件、加载

用户和浏览器之间的交互行为,如点击按钮,鼠标移动…
处理事件:
在事件对应属性中设置一些js代码,当事件被触发时,就会执行JS代码
被函数绑定的单机事件称为单机响应函数

var btn = document.getElementById("id1");
//绑定事件
//单机响应函数
btn.onclick = function(){
	console.log("已点击");
}

事件对象

当事件的响应函数被触发时,浏览器每次都会将一个事件对象作为实参传递进响应函数,
在事件对象中封装了当前事件相关的一切信息
window.onload = function(){
	var box1 = document.getElementById("box1");
	box1.onmousemove = function(event){
		//解决事件对象兼容性
		event = event || window.event;
			
		var x = event.clientX; //获取鼠标可见窗口的水平坐标
		var y = event.clientY; //获取鼠标可见窗口的垂直坐标
					
		var x2 = event.pageX; //获取鼠标整个窗口的水平坐标
		var y2 = event.pageY; //获取鼠标可见窗口的垂直坐标
	}
}

加载

浏览器加载顺序为自上向下,如果想要上面的JS代码可以用onload事件
onload:
	为window绑定一个onload事件,会在整个页面加载完成后触发
//获取id为id1的按钮
window.onload = function(){
	var btn = document.getElementById("id1");
};

DOM查询

获取元素节点
	getElementById()
		通过id属性获取一个元素节点对象
	getElementsByTagName()
		通过标签名获取一组元素对象,
	getElementsByName()
		通过name属性获取一组元素节点对象
			
获取具体的元素子节点
	方法:getElementsByTagName()
	属性:
		childNodes
			会获取包括文本节点在内的所有节点,包括标签间的空格和换行文本
		chidlren
			获取当前元素的所有子元素,不包括文本
		firstChild
			获取当前元素的第一个子节点
		fristElementChild
			获取当前元素的第一个子元素,不包括子元素
		lastChild
			表示当前节点的最后一个子节点
						
获取父节点和兄弟节点
	parentNode
		获取当前节点的父节点
	previousSibling
		获取当前节点的前一个兄弟节点
	prevoiusElementSibling
		获取前一个兄弟节点,不会获取到空白文本
	nextSibling
		表示当前节点的后一个兄弟节点
				
定义一个函数,专门来为指定元素绑定单击事件
	参数:1.要绑定单机响应函数的对象id属性
		 2.事件的回调函数,当元素单击时,函数会被触发
		 function myClick(idStr, fun){
			 var btn = document.getElementById(idStr);
			 btn.onclick = fun;
		 }
					 
innerHTML:
	获取标签元素中的标签和文本内容
innerText:
	获取元素内部的文本内容,会自动去除HTML标签内容

获取body标签
	var body = document.body;
			
获取HTML
	var html = document.documentElement;
				
获取页面中所有元素
	var all = document.all;
			 
根据class属性值获取元素节点
	var box1 = document.getElementsByClassName("box1");
				
document.querySelector()
	需要一个选择器的字符串作为参数,根据一个css选择器来查询一个元素节点对象
	只会返回唯一的一个,如果有多个就返回第一个
	var box1 = document.querySelector(".box1 div") //获取class属性为 .box1 里面的div标签
			
document.querySelectorAll()
	这个方法和querySelector()类似,可以将符合条件的元素封装成数组返回

切换图片的练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
				
				var btn1 = document.getElementById("button1");
				var btn2 = document.getElementById("button2");
				var srcs = ["images/1.jpg", "images/2.jpg", "images/3.jpg"];
				var img = document.getElementsByTagName("img")[0];
				var index = 0;
				var info = document.getElementsByTagName("b")[0];
				info.innerHTML = "一共" + srcs.length + "张图片" + "当前为第" + (index + 1) + "张";
				btn1.onclick = function(){ 
					index --;
					if(index < 0){
						index = srcs.length - 1;
					}
					img.src = srcs[index];
					info.innerHTML = "一共" + srcs.length + "张图片" + "当前为第" + (index + 1) + "张";
				};
				
				btn2.onclick = function(){
					index ++;
					if(index > srcs.length - 1){
						index = 0;
					}
					img.src = srcs[index];
					info.innerHTML = "一共" + srcs.length + "张图片" + "当前为第" + (index + 1) + "张";
				}
				
			}
		</script>
		<style type="text/css">
			#box1{
				width: 240px;
				text-align: center;
				padding: 10px;
				margin: 20px auto;
				background-color: aqua;
			}
		</style>
	</head>
	<body>
		<div id="box1">
			<b></b>
			<img src="images/1.jpg" alt="图片1" id="id1" >
			<button type="button" id="button1">上一张</button>
			<button type="button" id="button2">下一张</button>
		</div>
	</body>
</html>

DOM增删改

document.createElement()
	可以用于创建一个元素节点对象
	需要一个标签名作为参数,并将创建好的对象作为返回值返回
			
document.createTextNode()
	创建一个文本节点对象
	需要一个文本节点作为参数,会返回这个节点
			
appendChild()
	向一个父节点中添加一个新的子节点
	用法:父节点.appendChild(子节点);
				
insertBefore()
	在指定节点前插入新的节点
	语法: 父节点.insertBefore(新节点, 旧节点); 
				
replaceChild()
	使用指定的子节点替换已有的子节点
	语法:父节点.replaceChild(新节点,旧节点);
				
removeChild()
	删除子节点
	语法:父节点.removeChild(子节点);
	子节点.parentNode.removeChild(子节点); 不需要知道父节是什么
			//创建li标签,创建li标签中的内容,把内容放入标签中
			var cre = document.createElement("li");
			var text = document.createTextNode("文本内容");
			cre.appendChild(text);
			
			//获取父节点,向父节点插入子节点
			var parent = document.getElementById("parent");
			parent.appendChild(cre);

使用DOM操作CSS样式

 通过JS修改元素样式:
	语法:元素.style.样式名 = 样式值;
				
如果JS中有background—color,需要去掉-然后后一个字母大写
如果CSS中设置了!important也修改不了样式
			window.onload = function(){
				var box1 = document.getElementById("box1");
				var btn1 = document.getElementById("button1");
				btn1.onclick = function(){
					box1.style.width = "300px";
					box1.style.height = "300px";
					box1.style.backgroundColor = "aquamarine";
				};
			};

读取元素的样式

 获取元素当前显示的样式:
	样式.currentStyle.属性
	只支持IE8
			 
	getComputedStyle(参数1, 参数2)
	参数1:要获取的样式
	参数2:传递一个伪元素,一般穿null
	方法会返回一个对象,对象中封装了当前元素对应的样式
	整个方法只能读,不能修改
function getStyle(obj, name){
	if(window.getComputedStyle){
		return getComputedStyle(obj, null)[name];
	} else {
		return obj.currentStyle[name];
	}
}

联系我们

如果您对我们的服务有兴趣,请及时和我们联系!

服务热线:18288888888
座机:18288888888
传真:
邮箱:888888@qq.com
地址:郑州市文化路红专路93号