JavaScript中的BOM和DOM

javascript组成:

1. ECMAScript 基本语法。

2. BOM (浏览器对象模型)

3. DOM (文档对象模型)

简单的说就是 BOM是浏览器对象模型,用来获取或设置浏览器的属性、行为,例如:新建窗口、获取屏幕分辨率、浏览器版本号等。
DOM是文档对象模型,用来获取或设置文档中标签的属性,例如获取或者设置input表单的value值。

一)BOM(borwser Object  Model)

浏览器对象模型:使用对象描述了浏览器的各个部分的内容。

1)window :当前的窗口

window是BOM中的顶级对象(宿主对象);

window下面的子级对象:

document: 文本,页面对象;

history:历史;

location:定位,页面跳转;

famese:框架;

navigator:导航;

screen:屏幕(属性:width,height);

window常用的方法:

open()   打开一个新的资源。

moveTo() 将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。

moveBy()  相对于当前的窗口移动指定的 x 和 y 偏移值(左上角)。

setInterval()  每隔指定的毫秒数指定指定的代码。(间歇性计时器)clearIterval() 停止间歇性计时器

setTimeout() 经过指定毫秒数指定一次指定的代码。 (一次性计时器)

clearTimeout()停止一次性计时器

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="按钮的文本";

}

d)通过元素的class名:document.getElementsByClassName("标签名") ,返回伪数组(IE9以下不支持)

兼容:

function byClassName(obj,className){
    if(document.getElementsByClassName){
        return obj.getElementsByClassName(className);
    }else{
        var eles = obj.getElementsByTagName(‘*‘);
        var arr = [];
        for(var i = 0,len = eles.length;i < len;i++){
            if(eles[i].className === className){
                arr.push(eles[i]);
            }
        }
        return arr;
    }
}

e)通过htmle的选择器:document.querySelector("选择器"),返回对象(IE8以下不支持)

f)通过htmle的选择器:document.querySelectorAll("选择器"),返回伪数组(IE8以下不支持)

2)通过关系找节点

document中还有几个方法,可以通过一个节点,来获得与它有关系的那些节点:

parentNode 获取当前元素的父节点。

childNodes 获取当前元素的所有下一级子元素

firstChild 获取当前节点的第一个子节点。

lastChild 获取当前节点的最后一个子节点。

nextSibling 获取当前节点的下一个节点。(兄节点)

nexElementSibling 获取下一个元素节点

previousSibling 获取当前节点的上一个节点。(弟节点)

previousElementSibling 获取当前节点的上一个元素节点

有以下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方法,要注意: 找子节点的时候浏览器会把空文本的内容也当成了子节点。

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);//删除目标节点

setInterval()

原文地址:https://www.cnblogs.com/lifeidg/p/10373097.html

时间: 2024-10-11 20:43:03

JavaScript中的BOM和DOM的相关文章

JavaScript:操作 BOM 和 DOM

JavaScript:操作 BOM 和 DOM 浏览器说明 由于JavaScript的出现就是为了能在浏览器中运行,所以,浏览器自然是JavaScript开发者必须要关注的. 目前主流的浏览器分这么几种: IE 6~11:国内用得最多的IE浏览器,历来对W3C标准支持差.从IE10开始支持ES6标准: Chrome:Google出品的基于Webkit内核浏览器,内置了非常强悍的JavaScript引擎——V8.由于Chrome一经安装就时刻保持自升级,所以不用管它的版本,最新版早就支持ES6了:

[转] JavaScript学习:BOM和DOM的区别和关联

BOM 1.  BOM是Browser Object Model的缩写,即浏览器对象模型. 2.  BOM没有相关标准. 3.  BOM的最根本对象是window. 从1可以看出来:BOM和浏览器关系密切.浏览器的很多东西可以通过JavaScript控制的,例如打开新窗口.打开新选项卡(标签页).关闭页面,把网页设为主页,或加入收藏夹,等等…这些涉及到的对象就是BOM. 从2可以看出来:由于没有标准,不同的浏览器实现同一功能,可以需要不同的实现方式.对于上面说的功能,不同的浏览器的实现功能所需要

实现JavaScript的组成----BOM和DOM

我们知道,一个完整的JavaScript的实现,需要由三部分组成:ECMAScript(核心),BOM(浏览器对象模型),DOM(文档对象模型). 今天主要学习BOM和DOM. BOM: BOM提供了很多对象,用来访问浏览器的功能,这些功能于网页内容无关(这些是DOM的事),目前,BOM已经被W3C搬入了HTML5规范中. window对象: BOM的core,表示浏览器的一个实例,它既是通过javascript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象,这意味着在

javascript中的BOM结构介绍

javascript中BOM结构是浏览器对象模型,所有对象父对象window 1,js基础之BOM以及Location和History对象 window.location 对象可不带 window 前缀书写. 一些例子: window.location.href 返回当前页面的 href (www.96net.com.cn)window.location.hostname 返回 web 主机的域名window.location.pathname 返回当前页面的路径或文件名window.locat

JS中的BOM以及DOM操作

screen:对象 console.log(screen.width);//屏幕宽度   console.log(screen.availHeight);//可用高度=屏幕高度-底部任务栏   console.log(screen.height);//屏幕高度   console.log(screen.availWidth);//可用宽度 location对象    *     * 完整的URL路径:    * 协议://主机名(IP地址):端口号/文件路径?传递参数(name1=value1&

细看JS中的BOM、DOM对象

DOM对象模型 [DOM树节点] DOM节点分为三大类:元素节点,文本节点,属性节点: 文本节点,属性节点为元素节点的两个子节点: 通过getElment系列方法,可以去到元素节点: [查看节点] 1.getElementById:通过id获取唯一的节点:多个同名ID只会取到第一个: 2.etElementByName:通过name取到一个数组,包含1到多个节点: 使用方式:通过循环取到每个节点,循环次数,从0开始<数组.length [查看设置属性节点] 1.查看属性节点:getAttribu

JavaScript中的BOM知识框架

浏览器对象模型(BOM)以window对象为依托,表示浏览器窗口及可见区域.同时,window对象和还是全局对象,因此所有求安局变量和函数都是它的属性,所有原生框架及其他函数都在它命名之下.BOM中对象包括window.location.navigation.screen和history.

从零开始的JS生活(二)——BOM、DOM与JS中的事件

上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举起了火把--BOM简介 BOM(Browser Object Model) 是指浏览器对象模型,在JS中BOM是个不折不扣的花心大萝卜,因为它有很多个对象,其中代表浏览器窗口的Window对象是BOM的"正室".也就是最重要的,其他对象都是正室的下手.或者叫侧室也不足为过. 2.细数BOM

JavaScript之Ajax-4 XML解析(JavaScript中的XML、Ajax返回并解析XML)

一.JavaScript中的XML XML DOM对象 - IE 浏览器通过 ActiveXObject 对象得到 XML DOM 对象 - 其他浏览器通过 DOMParser 对象得到 XML DOM 对象 XML DOM对象的支持 - XML DOM(XML Document Object Model)定义了访问和操作XML文档的标准方法 - DOM 把 XML 文档作为树结构来查看.能够通过DOM树来访问所有元素 加载并解析XML字符串 二.Ajax返回并解析XML 使用XHR发送XML字