JavaScriptDOM对象

最新推荐文章于 2024-07-18 11:48:33 发布

轩尼诗道-

最新推荐文章于 2024-07-18 11:48:33 发布

阅读量81

点赞数

分类专栏： JavaScript基础文章标签： javascript

本文链接：https://blog.csdn.net/lzy________/article/details/118975096

版权

JavaScript基础专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

DOM简介
事件、加载
- 事件对象
- 加载
DOM查询

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];
	}
}

轩尼诗道-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScriptDOM对象

文章目录DOM简介事件、加载事件对象加载DOM查询DOM增删改使用DOM操作CSS样式读取元素的样式DOM简介DOM：Document Object Model文档对象模型文档：网页的每一部分都会转换成了对象模型：使用模型表示对象之间的关系，方便获取对象节点Note：构成网页的基本成分，网页每一部分都可以称为节点文档节点：整个HTML文档元素节点：HTML中的HTML标签属性节点：元素的属性文本节点：HTML标签中的文本内容浏览器以及为我们提供了文档节点对象，为w
复制链接

扫一扫