JavaScript操作BOM和DOM

目录

JavaScript组成

BOM操作

浏览器对象模型

 JavaScript 弹窗

 window.location 对象

 DOM操作

获取HTML元素

HTML DOM - 改变 HTML

 HTML DOM - 改变 CSS

JavaScript 计时事件 

JavaScript组成

ECMAScript是一种语法标准

        语法、变量和数据类型、运算符、逻辑控制语句、关键字、保留字、对象 

编码遵循ECMAScript标准

BOM操作

BOM：Browser Object Model（浏览器对象模型）

        提供了独立于内容与浏览器窗口进行交互的对象

浏览器对象模型

对象名称

说明

window

窗口对象, 可以用来控制当前窗口, 或打开新的窗口

screen

屏幕对象, 获取屏幕相关信息

navigator

浏览器对象, 通过这个对象可以判定用户所使用的浏览器

history

历史对象, 可以用来前进或后退一个页面

location

地址对象, 可以用来获取当前URL的信息

JavaScript 计时事件

在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行

localStorage

SessionStorage

存储对象, 可以用来存储数据, 和cookie相似, 区别是它是为了更大容量存储设计的, 在使用上也更加方便

 JavaScript 弹窗

弹窗

语法

说明

 警告框

window.alert()

用于确保用户可以得到某些信息

确认框

window.confirm()

用于验证是否接受用户操作

提示框

window.prompt()

用于提示用户在进入页面前输入某个值

alert()方法：语法：alert("需要弹出的文本信息") 

	
		
		
	
	
		
			alert('欢迎你');
		
	

confirm()方法：语法：confirm("对话框中显示的纯文本")

	
		
		
	
	
		删除
		
			function deleteDate(){
				/*
					confirm()弹出一个带有确定按钮和取消按钮的对话框，点击确定按钮返回true，点击取消按钮返回false
					我们可以根据返回的true或者false来执行不同的操作
				*/
				var result =confirm('确认删除吗？');
				console.log(result);
				if(result){
					console.log("数据删除成功");
				}else{
					console.log("你取消了删除操作");
				}
			}
	
		
	

prompt()方法:语法：prompt(msg（要在对话框中显示的纯文本）,defaultText（默认的输入文本）)

	
		
		
	
	
		
			//prompt():从页面中输入数据，得到的数据类型是string类型，你不输入数据，直接点击确定按钮，得到的内容是空内容，类型还是string,如果你点击取消按钮，得到的数据是null，数据类型是object
			
			// var age = prompt();
			//弹出输入框，输入框有提示信息
			// var age = prompt("请输入你的年龄：");
			//弹出输入框，输入框有提示信息和默认值
			var age = prompt("请输入你的年龄：",18);
			console.log(age);
			console.log(typeof age);
		
	

 window.location 对象

用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面

语法

                说明

location.href

返回当前页面的 URL

location.pathname

返回 URL 的路径名

location.assign()

加载新的文档

	
		
		
	
	
		加载新的文档
		
			console.log(location.href);
			console.log(location.pathname);
			
			function newPath(){
				location.assign("https://www.baidu.com/");
			}
			
			
		
	

 DOM操作

DOM：Document Object Model（文档对象模型）

        是HTML文档对象模型（HTML DOM）定义的一套标准方法，用来访问和操纵HTML文档

获取HTML元素

语法

                       说明

document.getElementById

通过id属性获取对象

document.getElementsByTagName

通过标签名获取对象

document.getElementsByClassName

通过class属性获取对象

getElementById("id属性值")：通过id属性值来获取元素，因为id具有唯一性，所以通过此函数获取的元素只有一个

getElementsByTagName("标签名")：通过标签名称来获取元素，因为一个页面中可能有多个同名的标签，所以此函数将获取来的元素放在一个类似于数组的集合中（HTMLCollection）

getElementsByClassName("class属性值")：通过class属性值来获取元素，因为class属性值可以被不同的标签重复使用，所以此函数获取的元素可能有多个，将获取的元素放在一个类似数组的集合中（HTMLCollection）

querySelector("#id属性值/.class属性值/标签名")：此函数只获取页面中满足要求的第一个元素

querySelectorAll(".class属性值/标签名")：因为class属性值可以被不同的标签使用/一个页面中可以有多个同名的标签，此函数获取的元素可能会有多个，此函数会将获取的元素存放在一个类似数组的节点结合中（NodeList）

        注意：使用getElementsByTagName("标签名")/getElementsByClassName("class属性值")/querySelectorAll("标签名/.属性值")获取元素，哪怕只有一个元素满足条件，也会将获取的这一个元素放入类似数组的集合（HTMLCollection）或者节点集合（NodeList）中

        在CSS中和JS中，如果你要操作HTML元素，第一步要做的事情都是找到这个元素，CSS中是通过选择器来找，JS中是通过上述函数来找 

	
		
		
	
	
		
		我是2级标题标签1
		我是2级标题标签2
		
我是段落标签1
		
我是段落标签2
		
我是段落标签3
		

			
列表项第1项
			
列表项第2项
			
列表项第3项
			
列表项第4项
			
列表项第5项
		
		我是3级标题标签
	
	
	
		//获取HTML元素
		//getElementById("id属性值")：通过id属性值来获取元素，因为id具有唯一性，所以通过此函数获取的元素只有一个
		var idTestEle=document.getElementById('test');
		console.log(idTestEle);
		
		//getElementsByTagName("标签名")：通过标签名称来获取元素，因为一个页面中可能有多个同名的标签，所以此函数将获取来的元素放在一个类似于数组的集合中（HTMLCollection）
		var pEles =document.getElementsByTagName("p");
		console.log(pEles);
		console.log(pEles[1]);
		console.log("-----------------------");
		//输出所有的p元素
		for(var i =0;i