【JAVA-S2阶段】JavaScript的DOM和BOM
window
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对象的相关用法
对象 | 用法 |
---|---|
Math对象 | 主要用于处理数据 例如 Math.random()获取随机数,与java中的Math处理数据类似 |
BOM
BOM:browser object model(浏览器对象模型)
BOM提供了独立于内容的、可以与浏览器窗口进行交互的对象结构。
BOM主要对history和location进行操作
DOM
DOM:document object model 文档对象模型
在文档对象模型中分为三种:core-DOM、HTML-DOM、CSS-DOM
core-DOM核心DOM中的获取节点对象
使用document对象调用getElementById(“id的值”) 在大部分时候建议使用这个方法。
也可以使用document对象调用getElementsByName()主要更具标签中的name属性的值放回具有name属性值相同的集合
也可以使用document对象调用getElementsByTagName()根据标签名字放回标签相同的集合
core-DOM核心DOM中的层次方式访问节点
或者由于浏览器兼容性问题可以使用
core-DOM核心DOM中的节点类型
节点类型 | 作用 |
---|---|
noneType | 返回节点类型 1=元素 2=属性 3=文本 |
noneValue | 返回节点中的值 |
noneName | 节点的名称 ul标签返回ul |
实例:
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).属性名