JS中的DOM与BOM
javascript组成:
1. ECMAScript 基本语法。
2. BOM (浏览器对象模型)
3. DOM (文档对象模型)
一)BOM(borwser Object Model)
浏览器对象模型:使用对象描述了浏览器的各个部分的内容。
1)window :当前的窗口
window常用的方法:
open() 打开一个新的资源。
moveTo() 将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。
moveBy() 相对于当前的窗口移动指定的 x 和 y 偏移值(左上角)。
setInterval() 每隔指定的毫秒数指定指定的代码。
setTimeout() 经过指定毫秒数指定一次指定的代码。
A)
open()方法接收4个参数,分别是 打开资源名;打开方式;打开的窗口大小位置;资源找不到是否用其他代替。
下面是一个例子:
function openImage()
{
window.open("image.html","_blank","height = 500pt,width = 350pt,top = 50pt,left = 450pt",false);
}
其中第三个参数设置各种属性,我们用逗号分割开。
B)其它方法示例:
window.moveTo(100,100);
window.moveBy(30,0);
传入的参数都是移动的数值,知识参考的原点不同。
C)setInterval() 每隔指定的毫秒数指定指定的代码。循环执行
例子: var id = window.setInterval("showImage()",2000);
我们可以通过window.clearInterval(id); 来停止上面的执行循环。
setTimeout() 经过指定毫秒数指定一次指定的代码。只执行一次
例子:window.setTimeout("showImage()",2000);
2)地址栏对象
location (url地址栏对象)
常用方法有
href: 设置或获取整个 URL 为字符串。
reload() :重新加载页面地址。
示例:
document.write("当前地址栏的地址:"+location.href); 获取地址栏地址
location.href = "http://www.baidu.com"; 设置地址栏地址
location.reload(); 重新加载地址栏地址
3)屏幕对象
Screen(屏幕对象):获取电脑的屏幕的一些数据。
常用方法:
availHeight 获取系统屏幕的工作区域高度,排除 Microsoft® Windows® 任务栏。
availWidth 获取系统屏幕的工作区域宽度,排除 Windows 任务栏。
height 获取屏幕的垂直分辨率。
width 获取屏幕的垂直分辨率。
示例:
document.write("排除任务栏的高度:"+ screen.availHeight+"<br/>");
document.write("排除任务栏的宽度:"+ screen.availWidth+"<br/>");
document.write("包括任务栏的高度:"+ screen.height+"<br/>");
document.write("包括任务栏的高度:"+ screen.width+"<br/>");
二)Dom编程( Document Object Model )
文档对象模型:当一个html页面加载到浏览器的时候,那么浏览器会为每个标签都创建一个对应的对象描述该标签的所有信息,那么我们看到的网页信息实际上就是看到了这些标签对象的信息、 如果我们需要操作页面的数据,那么我们就可以通过这些标签对象进行操作。
那么现在我们利用里面提供的方法来的到页面的节点:
var elements = document.all; //获取页面上所有节点
for(var index = 0 ; index<elements.length ; index++)
{
alert("节点名字:"+elements[index].nodeName); // nodeName节点的名字
}
通过document.all返回一个页面所有便签对象的数组,然后遍历数组输出节点名字。
也可以获取某个标签的节点集合:
var images = document.images; // images 获取一个页面的所有img节点。
我们可以看一下表示节点间关系的文档树:
A)几种得到标签节点的方法:
1)通过标签的属性找节点
我们可以使用以下方法:
a)通过标签的ID:document.getElementById("html元素的id")
示例:
var imageNode = document.getElementById("iamge1");
imageNode.src = "1.jpg";
得到一个id为iamge1的节点对象,并设置的它src属性值。
b)通过标签名: document.getElementsByTagName("标签名")
示例:
var divs = document.getElementsByTagName("div"); //根据标签名字找节点,注意:返回的是一个数组。
for(var index = 0 ; index<divs.length ; index++){
divs[index].innerHTML = "我是div".fontcolor("red");
}
c)通过元素的NAME属性:document.getElementsByName("html元素的name")
示例:
var buttons = document.getElementsByName("button"); //根据name的属性值找对象,注意返回的也是一个数组对象
for(var index = 0 ; index<buttons.length ; index++){
buttons[index].value="按钮的文本";
}
2)通过关系找节点
document中还有几个方法,可以通过一个节点,来获得与它有关系的那些节点:
parentNode 获取当前元素的父节点。
childNodes 获取当前元素的所有下一级子元素
firstChild 获取当前节点的第一个子节点。
lastChild 获取当前节点的最后一个子节点。
nextSibling 获取当前节点的下一个节点。(兄节点)
previousSibling 获取当前节点的上一个节点。(弟节点)
有以下html代码:
<form id="myForm"><input type="text" id="username" /><input type="text" id="pass" /><br /></form><img src="#" id=myImage>
注意标签和标签之间不留空。
通过关系获得节点:
var a = document.getElementById("myImage");
var b = a.previousSibling;
alert("previousSibling is:" + b.nodeName);
上面示例使用了previousSibling方法,要注意: 找子节点的时候浏览器会把空文本的内容也当成了子节点。
那么如果找子节点的时候,如果只想要标签节点,其他的节点不需要,那么可以通过节点的类型进行筛选。
节点的类型:
标签节点的类型是 1.
空文本的节点类型:3
注释的节点类型:8
那么如何判断一个节点类型,我们可以使用nodeType 方法。
对于上述代码如果我们想要<form>下的所有标签节点,我们可以这样写:
var a = document.getElementById("myForm");
var b = a.childNodes;
for(var index = 0; index < b.length; index++)
{
if(b[index].nodeType == 1)
{alert("名字:"+ b[index].nodeName+" 类型:" + b[index].nodeType)};
}
B)创建、删除、 插入节点
我们可以通过下面方法来实现: (elt为一个节点对象)
document.createElement("标签名") 创建新元素节点
elt.setAttribute("属性名", "属性值") 设置节点的属性
elt.appendChild(e) 添加元素到elt中最后的位置
elt.insertBefore(newNOde, child); 添加到elt中,child之前。
注意:elt对象必须是child节点的直接父节点
elt.removeChild(eChild) 删除指定的子节
注意: elt必须是child的直接父节点
示例:
//创建一个tr对象
var trNode = document.createElement("tr");//创建tr标签节点
var tdNode1 = document.createElement("td");
var tdNode2 = document.createElement("td");
tdNode1.innerHTML = "<input type='file'/>";//设置td标签内的属性
tdNode2.innerHTML = "<a href='#' onclick='delFile(this)' >删除附件</a>"
//把td添加到tr上面
trNode.appendChild(tdNode1);
trNode.appendChild(tdNode2);
var tbody = document.getElementsByTagName("tbody")[0]; //注意: tr的 直接父节点是tbody而不是table.
var lastTr = document.getElementById("lastTr");
tbody.insertBefore(trNode , lastTr); // 第一个参数是新节点, 第二个参数是已经存在节点。
var trNode = aNode.parentNode.parentNode;
var tbody = document.getElementsByTagName("tbody")[0];
tbody.removeChild(trNode);//删除目标节点
三)利用节点实现标签间的互动
实现标签间的互动,我们可以在一个标签内添加一个时间,然后改时间触发一个函数,这个函数内部修改其它便签的属性或内容。
下面是一个例子实现: 选择一个年份下拉栏的内容时,月份下拉栏出现选项供我们选择。
html代码,为年份注册一个onchange事件,触发getMyMouth()函数。
<select id="myYear" onchange="getMyMouth()"><option>请选择年份</option></select>
<select id="myMouth" ><option>请选择月份</option></select>
利用标签节点,来添加选择即可:
function getMyMouth()
{
var myMouth = document.getElementById("myMouth");
//删除月份信息
var oldMouth = myMouth.childNodes;
for(var i = 1; i < oldMouth.length;)
{
myMouth.removeChild(oldMouth[i]);
}
myMouth.options.length = 1;//剩下一个默认选项
//添加月份信息
for(var i = 1; i < 13 ; i++)
{
var newOption = document.createElement("option");
newOption.innerHTML = i;
myMouth.appendChild(newOption);
}
}
四)利用节点操作CSS代码
得到目标标签的节点之后,我们还可以通过style属性来修改它的css样式。下面是一些例子:
var span =document.getElementById("code");
//操作span的css样式。
span.style.color="red";
span.style.fontSize="30px";
span.style.fontWeight="bold";
span.style.backgroundColor="gray";
span.style.textDecoration="line-through";
五)正则表达式
在JavaScrip中,正则创建的方式 有:
方式1:
re = /正则的代码.../模式
方式 2:
re = new RegExp("正则的代码","模式");
常用的模式有:
g (全文查找出现的所有 pattern)
i (忽略大小写)
正则对象常用的方法:
test() 判断字符串的内容是否符合正则所定义的规则
exec() 查找指定的字符串是否存在符合规则的子串
例子一:
var str = "HEllo123";
var reg = /^[a-z0-9]+$/i; //注意: javascript如果没有加上边界匹配器,那么只要全文中 存在符合规则的字符串,那么就返回true.
document.write("符合规则吗?"+reg.test(str));
结果为:true
如果要精确判断整个字符串,需要加上边界匹配器 开头^ 与 结尾$ 。
例子二:
var str = "jin wang yao tuo tang da jia gao xing ma";
//要找出三个字母组成的单词。
var reg = /\b[a-z]{3}\b/gi; // 如果没有加上模式g,那么每次都是从字符串的开始位置寻找
var line = "";
while((line = reg.exec(str))){
document.write(line+",");
}
结果为 :jin,yao,tuo,jia,gao,
\b代表字与字中间那个看不见的东西,如 here is a word 那么,这句中有好几个\b, 每个单词的前后都有一个\b. 。
exec方法会不断重开头第一个单词查找,第一个不匹配,又会重新开头查找,这样会进入死循环,只有当正则模式中加入g模式后,才会进行一次重头到尾的查找。所以exec方法常常与g模式一起使用。
JS中的DOM与BOM的更多相关文章
- js 中的 DOM 和 BOM
BOM浏览器对象模型 概念:Browser Object Model 组成: Window:浏览器窗口对象 Navigator:浏览器对象 screen:显示器屏幕对象 His ...
- JS中的函数、Bom、DOM及JS事件
本期博主给大家带来JS的函数.Bom.DOM操作,以及JS各种常用的数据类型的相关知识,同时,这也是JavaScript极其重要的部分,博主将详细介绍各种属性的用法和方法. 一.JS中的函数 [函数的 ...
- JS中的函数、BOM和DOM操作
一.JS中的函数 [关于注释] /** [文档注释]:开头两个*.写在函数上方,在调用函数时可以看到文档上方的描述信息. */ // 单行注释 /* 多行注释 */ 1.函数的声明及调用 (1) ...
- 前端(十六)—— JavaScript盒子模型、JS动画、DOM、BOM
JS盒子模型.JS动画.DOM.BOM 一.JS盒模型 1.width | height parseInt(getComputedStyle(ele, null).getPropertyValue(' ...
- js中的DOM操作汇总
一.DOM创建 DOM节点(Node)通常对应于一个标签,一个文本,或者一个HTML属性.DOM节点有一个nodeType属性用来表示当前元素的类型,它是一个整数: Element,元素 Attrib ...
- js中的DOM对象 和 jQuery对象 比较
一,二者的区别 通过 jQuery 获取的元素是一个数组,数组中包含着原生JS中的DOM对象. 总结:jQuery 就是把 DOM 对象重新包装了一下,让其具有了 jQuery 方法. 二,二者的相互 ...
- js中的DOM对象和jQuery对象的比较
1. 二者的不同之处: 通过jQuery获取的元素是一个数组, 数组中包含着原生JS中的DOM对象. 例如, 针对下面的一个div结构: <div id="Box">& ...
- python 全栈开发,Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)
昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...
- JS中的循环嵌套 BOM函数
[嵌套循环特点] 外层循环转一次,内层循环转一圈 外层循环控制行数,内层循环控制每行元素个数 [做 ...
随机推荐
- phonegap/cordova 升级版本
调用语句 : windows用户 npm update -g cordova 如果是 mac系统的用户 使用: 查看cordova信息 npm info cordova 查看cordova 版本 查 ...
- DNS协议 实践
根据DNS协议发送UDP请求,然后获取IP地址 头文件: #ifndef __DNS__ #define __DNS__ #include <stdio.h> #include <s ...
- 华为OJ平台——整形数组合并
题目描述: 将两个整型数组按照升序合并,并且过滤掉重复数组元素 输入: 输入说明,按下列顺序输入: 1 输入第一个数组的个数 2 输入第一个数组的数值 3 输入第二个数组的个数 4 输入第二个数组的数 ...
- 分层服务提供者(LSP)
分层服务提供者(LSP)(1) 开发过滤数据包的LSP程序可以定义过滤规则,恩,先看看LSP本身是DLL,可以将它安装至Winsock目录,创建套接字的应用程序不必知道此LSP的任何信息就能调用它 1 ...
- seafile修改
---恢复内容开始--- [root@seafile yunpan]# vim /yunpan/installed/seahub/seahub/templates/footer.html ---恢复内 ...
- AX Query
AX 用代码方式调用静态Query(AOT\Queries节点下面的Query)的方法 static void AXD_CallQuery_SalesInfo(Args _args) { SysQue ...
- 【MySQL】TokuDB引擎初探(MySQL升级为Percona,MySQL升级为MariaDB)
参考:http://blog.sina.com.cn/s/blog_4673e6030102v46l.html 参考:http://hcymysql.blog.51cto.com/5223301/14 ...
- IE6-IE9兼容性问题列表及解决办法总结
IE6-IE9兼容性问题列表及解决办法总结 概述 第一章:HTML. 3 第一节:IE7-IE8更新... 31.如果缺少结束标记的 P 元素后跟 TABLE.FORM.NOFRAMES 或 NOSC ...
- EPPB also support BlackBerry device
各位看倌不是小弟要賣弄英文,實在是外國朋友希望知道上一篇"雲取證"中所用的工具Elcomsoft Phone Password Breaker支援黑莓機否?又要求非要看到截屏才算數 ...
- 条款19 command 模式与好莱坞法则
当一个函数对象被当做回调时候,就是一个command模式的实例 什么是回调? 回调就是框架知道什么时候干一些事情,但是具体干什么,或许框架一无所知(因为回调函数不是他设计的),而用户则知道发生一个特定 ...