三十八章-- JavaScript操作BOM/DOM对象
首先理解js的组成:
- ECMAScript:核心标准/语法
- BOM Browser Object Model 浏览器对象模型
- DOM 文档对象模型
一、了解BOM组成和其子对象的使用
浏览器对象模型:他是能提供一套独立的能够对浏览器进行操控的对象模型
以面向对象的思想进行构成,window对象是BOM的核心对象,也是顶级对象
window: 代表浏览器窗口,对浏览器窗口的一系列操作都封装于内
history: 代表浏览器的历史记录,提供了对历史记录的相关操作
location: 代表浏览器的URL地址,提供对URL地址的相关操作
document: 代表浏览器的文档内容(页面主题,类似于当初DOM解析XML得到的document(代表所有文档节点的集合))
// 以java来表示它的对象结构(方便你理解)
public class Window{
private History history;
private Document document;
private Location location;
}
public class History{
public void go(int flag){
/// ...
}
}
public class Location{
private String href; // 浏览器URL地址
}
public class Document{
private String referrer;
}
1.window对象的常用方法和属性
window对象的常用方法:
常用属性,一般我们不会通过window对象直接操作它的对象属性,而是用对象属性的那些相关方法和属性去操作
例如:window.location = "http://www.baidu.com";(X)
// window对象是顶级对象 所以它可以省略
[window.]location.href = "http://www.baidu.com";(推荐)
方法名称 | 说 明 |
---|---|
prompt( ) | 显示可提示用户输入的对话框 |
alert( ) | 显示带有一个提示信息和一个确定按钮的警示框 |
confirm( ) | 显示一个带有提示信息、确定和取消按钮的对话框 |
close( ) | 关闭浏览器窗口 |
open( ) | 打开一个新的浏览器窗口,加载给定 URL 所指定的文档 |
setTimeout( ) | 在指定的毫秒数后调用函数或计算表达式 |
setInterval( ) | 按照指定的周期(以毫秒计)来调用函数或表达式 |
function clearCache(){
// window.alert("清除成功!");
// window.confirm()
// 如果确定为true 取消为false
var flag = confirm("确认清除系统缓存?之前下载的内容都会同时清理!");
// alert(flag);
if(flag){
alert("清除成功!");
}
}
function openNewWindow(){
// open("success.html");
open("success.html","");
open("success.html","","height=200px,width=200px");
}
属性名称 | 说 明 |
---|---|
height、width | 窗口文档显示区的高度、宽度。以像素计 |
left、top | 窗口的x坐标、y坐标。以像素计 |
toolbar=yes | no |1 | 0 | 是否显示浏览器的工具栏。黙认是yes |
scrollbars=yes | no |1 | 0 | 是否显示滚动条。黙认是yes |
location=yes | no |1 | 0 | 是否显示地址地段。黙认是yes |
status=yes | no |1 | 0 | 是否添加状态栏。黙认是yes |
menubar=yes | no |1 | 0 | 是否显示菜单栏。黙认是yes |
resizable=yes | no |1 | 0 | 窗口是否可调节尺寸。黙认是yes |
titlebar=yes | no |1 | 0 | 是否显示标题栏。黙认是yes |
fullscreen=yes | no |1 | 0 | 是否使用全屏模式显示浏览器。黙认是no。处于全屏模式的窗口必须同时处于剧院模式 |
// 在火狐浏览器内 兼容不太好 主窗口无法直接关闭 选项卡关闭还提示不太友好
function closeWindow(){
close();
}
history对象
表示用户访问过的历史记录,只能控制 不能读取
- forward():前进
- back():后退
- go():出发,走起
<a href="index1.html">点我跳转到index1</a>
<!--<a href="javascript:history.forward();">点我前进到index1历史记录</a>-->
<a href="javascript:history.go(1);">点我前进到index1历史记录</a>
<!-- 调用JS -->
<a href="javascript:goBack();">点我返回上个页面</a>
<script type="text/javascript">
function goBack(){
// 回退1个历史记录
// history.back();
history.go(-1);
}
</script>
3.location对象
名称 | 说 明 |
---|---|
host | 设置或返回主机名和当前URL的端口号 |
hostname | 设置或返回当前URL的主机名 |
href | 设置或返回完整的URL |
名称 | 说 明 |
---|---|
reload() | 重新加载当前文档 |
replace() | 用新的文档替换当前文档 |
<a href="javascript:getURL();">点我获取当前页面的URL地址</a>
<a href="javascript:getHost();">点我获取当前页面的主机信息</a>
<a href="javascript:goBaidu();">点我跳转到百度</a>
<!--<a href="http://www.baidu.com">点我跳转到百度</a>-->
<a href="javascript:location.reload();">点我刷新页面</a>
<script type="text/javascript">
function getURL(){
alert(location.href);
}
function getHost(){
alert(location.host);
}
function goBaidu(){
// 业务逻辑
// 记录..
// 清理..
alert(1);
location.href = "http://www.baidu.com";
}
</script>
4.document对象
<script type="text/javascript">
/* 获取上一页页面 (来源) 防盗操作 */
alert(document.referrer);
</script>
二、了解DOM分类和时间节点的关系类似于XML解析:DOM 和DOM4J
DOM是文档对象模型,它的核心是document对象
打印/输出
document.write();
console.log();
DOM的分类:
最核心的DOM他适合所有的标记语言,但是因为太通用了,所以在做某种具体的标记语言操作时,可能不太方便,所以就产生了各种基于核心的扩展DOM
- DOM-core核心(XML解析用的主要就是这个核心代码)
doucument.getElementById();
- HTML-DOM(为了解析HTML专门提供的一种封装了的DOM)
doucument.forms();//获取某个页面的所有form表单
- CSS-DOM(为DOM提供了样式设置的内容)
xxx.style.diaplay = "none";
DOM模型中有一个很重要的概念就是DOM树,它是按照文档内的结构进行一个绘制,将所有的内容以节点的形式表现出来,类似于一个家族数
三、熟练使用DOM数操作DOM节点
- 使用DOM-core获取元素节点
- getElementById(“id属性值”)
- getElementByName(“name属性值”)
- getElementByTagName(“标签/元素名”)
- getElementByClassName(“class属性值”)
- 使用DOM-Core的节点层次关系来获取的父节点
- parentNode获取某个节点的父节点
- childNodes获取某个节点的所有子节点
- firstChild获取某个节点的第一个子节点
- lastChild 获取某个节点的最后一个子节点
- nextSibling 获取某个节点的下一个兄弟节点
- previousSibling 获取某个节点的上一个兄弟节点
// 获取id为news的元素节点
var sectionEle = document.getElementById("news");
// 获取它的父节点
/*var bodyEle = sectionEle.parentNode;
alert(bodyEle);*/
// 获取它的所有子节点(包含着文本/注释节点等)
/*var sectionChildNodes = sectionEle.childNodes;
// alert(sectionChildNodes);
for(var i = 0; i < sectionChildNodes.length; i++){
alert(sectionChildNodes[i]);
}*/
// 获取它的第一个子节点
/*var firstChild = sectionEle.firstChild;
// 获取下一个兄弟节点
alert(firstChild.nextSibling);*/
// 获取它的最后一个子节点
var lastChild = sectionEle.lastChild;
alert(lastChild.previousSibling);
但是上方的层次访问方式都需要考虑文本节点等情况,而一般我们操作DOM都是以元素节点(标签)为基础的,所以下方属性可以直接排除掉元素节点意外的内容
- firstElementChild 第一个元素子节点
- lastElementChild 最后一个元素子节点
- nextElementChild 下一个兄弟元素节点
- previousElementSibling 上一个兄弟元素节点
在DOM中的杰迪纳相关属性信息:
- nodeName
- 元素节点:元素名
- 属性、文本、注释节点:#xxx 例如#text
- nodeType
- 元素节点:1
- 属性节点:2
- 文本节点:3
- 注释节点:8
- document节点:9
- nodeValue
- 元素节点:null
- 属性、文本、注释节点:他们的值
掌握节点的常用操作
- 操作节点的属性
- getAttribute(String attrName);根据属性名获取属性值
- settAttribute(String attrName,String value
- 创建和插入节点
- createElement(String tagName);创建元素节点(document)
- A.appendChild(B);给A节点添加一个子节点:B/给A节点追加子节点
- insertBefore(A,B);将A节点添加到B节点之前(兄弟关系)
- cloneNode(boolean deep)节点克隆 Boolean表示
- 删除和替换节点
- removeChild(node);删除某个子节点
- replaceChild(newNode,oldNode);用新的子节点替换老的子节点
- 操作节点的样式
- style:行内样式表设置
元素节点对象.style.样式属性 = “值”;
- className:使用内部或外部样式表设置(选择器设置的内容)
元素节点对象.className = "类样式名";
- 获取节点的样式