【JAVA-S2阶段】JavaScript的DOM和BOM

window

【JAVA-S2阶段】JavaScript的DOM和BOM
window是bom的核心


在window对象中有常见的方法

方法 作用
prompt() 显示提示用户输入的对话款,在括号中放入两个参数,第一个参数是给用户的提示信息(string),第二个参数是用户输入(string)
alert() 警示窗口,可用于提示,相当于java中的system.out.println
confirm() 显示一个带有提示的窗口,与用户进行交互,可以配合if..else,按确定的时候放回true,否则false
close() 关闭窗口
open() 在括号中放入浏览器url。可以配合setinterval()每个多少毫秒打开另外一个网页,模拟病毒
settimeout() 只执行一次,在制定多少毫秒之后,执行括号里第一个参数的函数或者是表达式
setinterval() 与settimeout()进行区别,主要在执行多次,根据每个多少毫秒执行一次函数或者是表达式

window的属性

属性 作用
history history.back()后退 history.forword()前进 / history.go(-1)相当于后退, history.go(1)相当于前进
location lacation.herf 改变浏览器的url/location.reload()相当于网页的F5,刷新页面

JavaScript的内置对象

对象 用法
Date对象 主要用于处理时间类,例如 var 变量名=new Date()获取系统当前时间

Date对象的相关用法

【JAVA-S2阶段】JavaScript的DOM和BOM

对象 用法
Math对象 主要用于处理数据 例如 Math.random()获取随机数,与java中的Math处理数据类似

【JAVA-S2阶段】JavaScript的DOM和BOM


BOM

BOM:browser object model(浏览器对象模型)
BOM提供了独立于内容的、可以与浏览器窗口进行交互的对象结构。


BOM主要对history和location进行操作


DOM

DOM:document object model 文档对象模型
在文档对象模型中分为三种:core-DOM、HTML-DOM、CSS-DOM
【JAVA-S2阶段】JavaScript的DOM和BOM


core-DOM核心DOM中的获取节点对象

使用document对象调用getElementById(“id的值”) 在大部分时候建议使用这个方法。
也可以使用document对象调用getElementsByName()主要更具标签中的name属性的值放回具有name属性值相同的集合
也可以使用document对象调用getElementsByTagName()根据标签名字放回标签相同的集合


core-DOM核心DOM中的层次方式访问节点

【JAVA-S2阶段】JavaScript的DOM和BOM
或者由于浏览器兼容性问题可以使用

【JAVA-S2阶段】JavaScript的DOM和BOM


core-DOM核心DOM中的节点类型

节点类型 作用
noneType 返回节点类型 1=元素 2=属性 3=文本
noneValue 返回节点中的值
noneName 节点的名称 ul标签返回ul

实例:
【JAVA-S2阶段】JavaScript的DOM和BOM


HTML-DOM核心DOM中的CRUD操作

HTML-DOM属性的读写
节点.setAttribute(“name”,“jjjj”) 属性+值
节点.getAttribute(“value”) 获取括号中属性对应的值


创建并添加节点
创建节点 document.createElement(tagName)
添加节点
父节点.appendChild(新子节点)
旧节点.parentNode.insertBefore(新节点, 旧节点)
添加节点都是由父亲去调用


CSS-DOM

style属性 CSS属性名去-,改-后的第一个字母为大写
className属性
也可以通过HTML-DOM的属性操作来改变样式
obj.setAttribute(“style”, “font-size:12px;color:red;”);
obj.setAttribute(“class”, “RedBold clear”);

读取style属性时,浏览器兼容性解决方案:IE方案和标准方案

IE方案: obj.currentStyle.属性名
标准方案: document.defaultView.getComputedStyle(obj,null).属性名

【JAVA-S2阶段】JavaScript的DOM和BOM