js 外部对象 window中的属性 document 属性(重点) 读取节点的信息 元素节点的样式 增删改查节点的方式

 

1. 外部对象

BOM:Browser Object Model	浏览器对象模型 将浏览器比喻成一个对象-window(网页初始化时自动创建的),可以通过 window 对象操控浏览器中的内容
DOM: Document Object Model	文档对象模型 将HTML文档比喻成一个对象 - document(属于window的一个属性),可以灵活的操控网页上的内容
window 对象(BOM模型)	1.作用 表示浏览器 window对象下的属性和方法在使用时,可以省略window.直接去调用 ex: window.alert()  --> alert() window.prompt() --> prompt() window.document --> document window.history  --> history
window中的对话框	1.警告框 window.alert() / alert() 2.输入框 window.prompt() / prompt() 3.确认框 window.confirm("") / confirm("") 点击"确定"按钮的话,返回 true 其余所有操作,都返回false
练习:   1.网页中创建一个 按钮,显示 "关闭"   2.点击按钮时,弹出确认框 "确认关闭网页吗"   3.如果点击 确定的话,则关闭网页   关闭网页:window.close();   4.否则什么都不操作即可

window中的定时器

定时器的分类	周期性定时器 每间隔一段时间后,就执行一段程序,反复执行
	2.一次性定时器 在指定的时间间隔后,只执行一次操作
周期性定时器	1.声明定时器 var ret = setInterval(fun,time); fun:函数,要周期性执行的操作,可以是匿名函数 time:要间隔的时间周期,以毫秒为单位的数字 ret:返回已创建好的定时器对象
	2.清除定时器 window.clearInterval(timer) timer:要停止的定时器对象
3.一次性定时器	1.声明定时器 var ret = setTimeout(fun,time); fun : 等待一定的时间后要执行的操作 time : 要等待的时长,以 ms 为单位 ret : 创建好的定时器对象
	2.清除定时器 clearTimeout(timer); timer:已经创建好的一次性定时器对象

window中的属性

1.screen 属性	作用:获取客户端显示器的相关信息 属性: 1. width / height 获取屏幕分辨率 2.availWidth / availHeight 可用宽度和可用高度
2.history 属性	1.作用:处理当前窗口所访问过的url地址们 2.属性 & 方法: 1.属性:length,表示当前窗口所访问过的url数量 2.方法: 1.back() : 后退 2.forward() : 前进 3.go( num ) 在当前页面的基础上前进或后退num步 num : 取值为正数,前进 取值为负数,后退
3.location 属性	1.作用表示浏览器上地址栏的信息 2.属性 & 方法 1.属性 : href   表示当前窗口中正在浏览的网页地址  如果为href属性设置值得话,相当于实现了浏览器跳转的功能 2.方法 : reload() 重新加载当前网页,等同于刷新操作
4.navigator 属性	1.作用封装了浏览器的相关信息 2.属性 userAgent : 显示浏览器相关信息

document 属性(重点)

document 对象 (DOM模型)	document对象,是DOM模型中的顶层对象,封装了所有和HTML元素相关的属性,方法以及事件.由于 document 是属于 window 对象的核心属性之一,所以不用声明在网页中就可以直接使用
意义	网页在加载的时候,会在内存中形成一颗节点树(DOM树).DOM树会封装网页上的所有的内容.网页上的每一个元素,每一个属性,每一段文本,都是DOM树上的一个独立的"节点"
DOM所提供的操作	1.查找节点的操作方法 2.读取节点的信息 3.修改节点的信息 4.删除节点 5.创建节点   注意: 只要DOM树上的内容产生变化的话,网页也会一同变化
DOM树上的节点的类型:	1.元素节点 - 表示的是网页中的一个元素 2.属性节点 - 表示的是元素中的一个属性 3.文本节点 - 表示的是元素中的文本内容 4.注释节点 - 表示网页中的一个注释 5.文档节点 - 表示整个HTML文档
查找元素节点	1.通过元素id查找元素节点 前提:元素一定要具备id属性,否则无法查找 方法: var elem = document.getElementById("元素ID");   elem : 对应的ID的元素在JS中的表现形式 - DOM元素/DOM对象   DOM对象属性:    1.innerHTML    修改 或 获取当前DOM对象的HTML文本    2.innerText    修改 或 获取当前DOM对象的普通文本    注意:以上两个属性只针对双标记有效    3.value    该属性只针对表单控件,允许获取或设置表单控件的

读取节点的信息

1.节点的类型	属性:nodeType 值: 返回1 : 元素节点 返回2 : 属性节点 返回3 : 文本节点 返回8 : 注释节点 返回9 : 文档节点
2.节点名称	属性:nodeName 元素节点 或 属性节点:返回标签名或属性名 文本节点 : 返回 #text 文档节点 : 返回 #document 注释节点 : 返回 #comment
3.获取 或 设置 元素节点的属性	所有元素节点都具备以下方法,用于操作属性: 1.getAttribute("attrName") 作用:获取指定属性的值 attrName:要获取的属性名称 返回值:attrName属性对应的值 2.setAttribute("attrName","attrValue") 作用:设置指定属性的值 attrName:要设置的属性名 attrValue:要设置的属性值 3.removeAttribute("attrName") 作用:将 attrName 属性从节点中删除出去

元素节点的样式

1.使用 setAttribute() 设置 class 属性值	相当于动态的为元素绑定类选择器 elem.setAttribute("class","类选择器");
2.使用元素的 className 属性修改 class 的值	elem.className = "类选择器";
3.变相的使用内联方式设置样式属性	elem.style.color="red";

 

查询节点的方式

1.根据id查询	document.getElementById();
2.根据节点的层级关系查询节点	1.parentNode属性 返回当前节点的父节点元素
	2.childNodes属性 返回当前节点的所有子元素数组
	3.children属性 返回当前节点的所有子元素数组(元素节点)
	4.nextSibling 获取当前节点的下一个兄弟节点
	5.nextElementSibling 获取当前节点的下一个元素兄弟节点
	6.previousSibling 获取当前节点的上一个兄弟节点
	7.previousElementSibling 获取当前节点的上一个兄弟元素节点

查询节点

1.根据节点的层级查询节点	1.childNodes 元素节点,文本节点,
	2.children 元素节点
	3.parentNode 获取父节点
	4.nextSibling 获取下一个兄弟节点 有可能是文本节点
	5.nextElementSibling 获取下一个兄弟元素节点
	6.previousSibling 获取上一个兄弟节点 有可能是文本节点
	7.previousElementSibling 获取上一个兄弟元素节点
2.通过标签名查询节点 - 返回数组	document|elem.getElementsByTagName("标签名"); document:整个文档内查找 elem:某个元素内查找
3.通过元素的name属性值查询节点	语法:document.getElementsByName("name属性值"); 返回值:包含指定name属性值的元素的数组
练习: 1.创建一个网页,包含多个单选按钮(name相同) 2.创建一个普通按钮 3.单击普通按钮的时候 验证多个单选按钮中必须有一个被选中   <input type="radio" checked >
4.通过元素的class值查询节点	语法: document|elem.getElementsByClassName("class"); 返回: 返回包含指定class属性值的所有元素

 

增加节点

1.创建元素节点	语法: var elem=document.createElement("元素名"); ex: var div=document.createElement("div"); div.setAttribute("id","container"); div.innerHTML="动态创建的文本";
2.增加节点到网页上	1.document.body.appendChild(elem); 向body中追加elem的新元素
	2.parentNode.appendChild(elem); 向parentNode内部追加elem新元素
	3.parentNode.insertBefore(newElem,oldElem) 将newElem元素插入到parentNode中oldElem元素之前

删除节点

在DOM中, 删除节点的行为只能由父元素发起

语法:parentNode.removeChild(elem); 删除 parentNode 中的 elem 元素

 

事件

1.什么是事件	通常都是由用户的行为来激发的操作
2.触发事件的行为	所有的事件在绑定时,必须加 on
1.鼠标事件	1.click 事件 当鼠标单击元素时触发该事件
	2.mouseover 事件 当鼠标移入进元素时的事件
	3.mouseout 事件 当鼠标移出元素时的事件
	4.mousemove 事件     当鼠标在元素内移动时的事件
2.键盘事件	1.keydown 事件 当键位按下时所激发的事件
	2.keypress 事件 当键位按下时所激发的事件
	3.keyup 事件 当键位抬起时所激发的事件
3.状态改变事件	1.load 事件 当元素加载完成时所触发的事件(body)
	change 事件 当选项发生改变时所触发的事件(select)
	3.focus 事件 当元素获取焦点时所触发的事件(文本框类)
	4.blur 事件 当元素失去焦点时所触发的事件(文本框类)
	5.submit 事件 当表单被提交时所触发的事件(表单)

 

1. 绑定的方式

1.在元素中绑定事件	<元素 on事件名=""></元素>
2.在js中动态的为元素绑定事件	语法: DOM对象.on事件名=function(){   } ex: var main = document.getElementById("main"); main.onclick = function(){ } 注意： 在JS动态绑定事件中,允许使用 this 来表示触发当前事件的DOM元素

1. 事件行为

1.状态改变事件	1.load 事件 通常为 body 绑定 load 事件,目的是为了在所有内容都加载完成之后再实现一些初始化的操作   1. <body οnlοad="函数()">   2.JS中动态绑定    window.onload = function(){    网页加载完成后,要执行的操作    }
	2.submit 事件 只有表单被提交时才会被触发 注意:该事件需要一个boolean返回值来通知表单是否要继续被提交.如果返回true,则可以提交表单.否则,阻止表单提交   JS中动态绑定: 表单对象.onsubmit = function(){ return true/false; }