JavaScript学习笔记第二天

本文简介：这是接上一篇JavaScript第一天笔记：记录了js中重点需要掌握的地方，对于前端工程师来说，描述的比较浅显。需要前端工程师以此为基础去做更多的拓展才行，对于后端工程师来说，文章上的熟练掌握就行了。
本文重点：DOM、BOM、location
一、事件对象（event）
event.Target //获取当前事件的源头
event.clientX //获取当前事件发生的横向坐标
event.clientY //获取当前事件发生的纵向坐标

二、阻止事件冒泡
在父子标签中，同时定义了相同或者相关的事件属性。在触发子标签事件运行时，同时会触发父标签事件运行。
event.stopPropagation();//阻止事件冒泡【使用】 google
event.cancelBubble=”true” //早期IE不支持

三、DOM【重点】
概念：Document Object Model 文档对象模型
作用：将页面中的标签看做一个一个的对象，并且以树状结构存储。
后续通过对模型树的操作，来映射实际的页面。
树：DOM树 文档对象模型树

DOM操作API
1、获取标签对象
document.getElementById(“id值”);//通过标签的id属性获取标签对象
document.getElementByTagName(“标签名”);//通过标签的名字获取标签对象
document.getElementByName(“name值”);//通过标签name属性获取标签对象
2、操作标签对象的属性
获取属性值 obj.属性名
修改属性值 obj.属性名 = “值”
3、操作标签对象内部的文本
获取文本内容
obj.innerText 只会回去内部文本
obj.innerHTML 会获取内部的子标签和文本
修改文本内容
obj.innerText = “值”
obj.innerHTML = “值”
都会覆盖当前标签的所有子标签内容
4、标签对象的属性 （层级关系）【作用：灵活的获取标签对象】
1、obj.parentNode 获取当前标签对象的父标签对象
2、childNodes 获取当前标签对象的所有子标签对象 数组
注意：标签内部的换行也算一个子节点
3、firstChild 获取当前标签对象的第一个孩子标签对象
4、lastChild 获取当前标签对象的最后一个孩子标签对象
5、previousSibling 获取当前标签对象的上一个兄弟节点
6、nextSibling 获取当前标签对象的下一个兄弟节点
5、标签对象的创建和删除
创建文本
var text = document.createTextNode(“文本内容”)
创建标签
var el = document.createElement(“标签名”);
添加子节点
父节点.appendChild(子节点)
删除节点
父节点.removeChild(子节点)
课堂案例：动态表格
6、下拉列表相关的属性
selectobj.options 获取当前下拉列表中所有的option选项 数组
selectobj.selectedIndex 获取当前选中的option的下标
selectobj.value 获取当前选中的option的value属性值

	事件属性：onload 页面加载完成之后执行的内容  放置在body标签中 

四、BOM
概念：Broswer Object Model 浏览器对象模型
核心：将浏览器的组件看做是一个一个的对象
作用：可以通过js代码操作浏览器软件
结构

方法：window 的方法不用写window.

定时任务 在一定时间后执行的功能
执行一次
!在这里插入图片描述
循环执行

	   location【重点】
		   location.href=”url”  通过js形式发送请求	
		   发送请求：
			1、地址栏
			2、超链接
			3、form表单
			4、js  location.href