【笔记整理】—— 2.11 JavaScript DOM | 事件 | BOM

一、DOM操作

Document Object Model(文档对象模型)

js代码放到最后： 1 代码正确运行 2 保证访问速度用户体验

两种输出

console.info() //输出到控制台
document.write()	//输出到屏幕

查找元素：

通过ID选择 var ele = document.getElementById("a");

通过标签名选择 var ele = document.getElementsByClassName("a"); //var 是数组

通过类名选择 var ele = document.getElementsByTagName("a"); //var 是数组

更改元素

更改样式

元素.style.样式名称

ele.style.backgroundColor = 'red';
ele.style.fontSize = '20px

更改内容

元素.innerHTML / 元素.innerText

//改变文本内容
ele.innerText = "<h1 style='color:white;'>Hello World</h1>";
//改变元素的html内容
ele.innerHTML = "<h1 style='color:white;'>Hello World</h1>";

更改属性

元素.属性名称

a[0].href = "http://www.taobao.com";

二、JS事件

• click 点击

• dbclick 双击

• focus 光标放入输入框

• blur 光标移除输入框

• mouseover 鼠标悬浮

• mouseout 鼠标离开

  function changeBg() {
  	var colors = ['mediumpurple','black','greenyellow','red'];
  	var index = parseInt(Math.random() * 4)		//random() 随机数 0~1
  	var ele = document.getElementById("div1");
  	// 改变样式
  	ele.style.backgroundColor = colors[index];
  }
  
  function over(event){
  	// 找到事件发生的源头元素
  	var ele = event.target;
  	ele.style.backgroundColor='red';
  }
  function out(event){
  	// 找到事件发生的源头元素
  	var ele = event.target;
  	ele.style.backgroundColor='green';
  }
  
  
  

冒泡

现有一大一小两个 div 嵌套，我们要实现：点击大框弹出大框的 alert，点击小框弹出小框的alert。
可是现在由于小框在大框内，点击小框默认会先弹出小框alert，然后弹出大框alert——阻止事件冒泡 stopPropagation()

//大框
function myOutDiv(event){
	alert("out_div")
}
document.getElementById("out_div").addEventListener('click',myOutDiv);//此处是myOutDiv而不是myOutDiv()

//小框
document.getElementById("inner_div").addEventListener('click',function(event){
	event.stopPropagation();	//阻止事件冒泡
	alert("inner_div")
});

定时器

两种方式格式一样，执行次数不同

1. 无限执行

	var i = 10;
	var myTimer = setInterval(function(){	//两个参数（函数，1000毫秒）
		if(i > 0){
			document.getElementById("timer").innerText = i--;
		}
	},1000);
	
	function stop(){
		//取消定时按钮
		clearInterval(myTimer);
	}

2. 只会执行一次

   var setTimer =  setTimeout(function(){},10000);
   //取消定时按钮
   clearTimeout(setTimer);
   

三、BOM对象

Browser Object Model ( 浏览器对象模型 )

window

console.info(window);

function open1() {
	var rs = window.confirm("是否要打开新窗口？");
	if(rs){
		window.open("http://www.runoob.com");
	}
}

history

function go_back(){
	history.forward();
}

location

function loc(){
	console.info(location.href)
	//直接更改当前页面地址
	location.href="http://www.jd.com";
	//重新加载当前页
//	location.reload();
}
loc();