014、BOM与DOM对象的应用

Screen屏幕对象

Width：屏幕的宽度

Height：屏幕的高度

availWidth：屏幕的有效宽度（不含任务栏）

availHeight：屏幕的有效高度（不含任务栏）

colorDepth：色深

<script type="text/javascript">
//实例：测试自己显示屏幕相关信息
var str = "<h2>自己屏幕的相关信息</h2>";
str += "总宽度："+screen.width;
str += "<br>总高度："+screen.height;
str += "<br>有效宽度："+screen.availWidth;
str += "<br>有效高度："+screen.availHeight;
str += "<br>颜色色深："+screen.colorDepth;
document.write(str);
</script>

navigator浏览器对象

appName：浏览器软件的名称

appVersion：版本号

platform：操作平台

systemLanguage：系统语言

userLanguage：用户语言

cookieEnabled：cookie是否启用。Cookie是用来记录用户账号信息

<script type="text/javascript">
//实例：当前浏览器的相关信息
var str = "<h2>当前浏览器的相关信息</h2>";
str += "浏览器名称："+navigator.appName;
str += "<br>浏览器版本："+navigator.appVersion;
str += "<br>操作平台："+navigator.platform;
str += "<br>系统语言："+navigator.systemLanguage;
str += "<br>用户语言："+navigator.userLanguage;
str += "<br>cookie是否启用："+navigator.cookieEnabled;
document.write(str);
//根据不同的浏览器，输出窗口的内宽
if(navigator.appName=="Netscape")
{
    //Firefox浏览器
    document.write("<hr>Firefox窗口的内宽是："+window.innerWidth);
}else
{
    //IE浏览器
    document.write("<hr>IE窗口的内宽是："+document.documentElement.clientWidth);
}
</script>

location地址栏对象

href：指完整的地址栏中的地址

hash：取出锚点名称

protocol：取出地址的协议

host：取出主机地址和端口号

hostname：取出主机名称

pathname：取出文件路径和文件名

search：取出查询字符串

location对应的方法

reload()：刷新网页，相当于单击浏览器的“刷新按钮”

<script type="text/javascript">
var str = "<h2>location获取地址的各个部分</h2>";
str += "完整地址："+location.href;
str += "<br>协议："+location.protocol;
str += "<br>主机名称："+location.hostname;
str += "<br>文件和路径："+location.pathname;
str += "<br>查询字符串："+location.search;
str += "<br>锚点名称："+(location.hash ? location.hash : "不存在");
document.write(str);
</script>
</head>

<body>
<h2>刷新网页，我就出来了</h2>
<input type="button" value="刷新网页" onclick="location.reload()" />
<input type="button" value="关闭窗口" onclick="window.close()" />
</body>

history对象

back()：相当于浏览器的“后退”按钮

forward()：相当于浏览器的“前进”按钮

go(n)：跳转到哪个历史记录。N代表历史记录

go(1)：相当于“前进”按钮

go(0)：相当于“刷新”按钮

go(-1)：相当于“后退”按钮

问题：Firefox无法正常关闭，怎么办？(有待考证)

第一步：在地址栏中输入：about:config

第二步：将选项“dom.allow_scripts_to_close_windows”的值改为“true”

Firefox通过javascript:window.close()只能关闭点击链接或新打开的窗口,不能关闭地址栏输入打开的窗口;
如果只是自己测试用,可以在地址栏中输入about:config，找到dom.allow_scripts_to_close_windows项，将其修改为true，重启Firefox。

DOM简介

W3C的DOM使用JS程序或脚本，可以动态的改变网页中元素的结构、外观和内容。

网页对应的标准：结构(XHTML)、表现(css)、行为(js)

DOM可以操作结构化的文档非常方便，结构化的文档有：html、XML。

HTML文档：具有一定的层次结构、层次关系。

HTML文档只有一个根元素(根标记)，就是<html>。

HTML文档中，各元素之间是有一定层级关系。

DOM操作HTML元素，都是从根元素，一级一级的往下查找，直到找到目标元素为止。

DOM分类

核心DOM：核心DOM中的属性和方法，可以共享于HTML和XML文档。

HTML DOM：针对HTML文档的专用接口，也就是一些专用的属性和方法。

XML DOM：针对XML文档的专用接口，也就是一些专用的属性和方法。

CSS DOM ：针对CSS定义的专用接口，用于JS给HTML元素增加样式或外观。

事件DOM：针对不同的浏览器，定义不同的事件模型对象。IE有自己的事件模型、Firefox也有自己的事件模型。

HTML节点树

根节点：每一个HTML文档都有肯只能一个根节点，就是<html>

子节点：某一个节点的下级节点。

父节点：某一个节点的上级节点。

兄弟节点：平级关系的两个节点，同属于同一个父节点

DOM节点类型

DOM中定义了12种节点类型，针对HTML文档的节点类型只有5个。

Document节点：文档节点。对应整个HTML文档。访问其它节点都是从Document节点开始的。

其它节点都包含在Document节点之下。

Element节点：元素节点。对应于网页中的各种标记。比如：<img>、<table>

Attribute节点：属性节点。对应于网页中各标记的属性。比如：<img src=“” />

Text节点：文本节点。对应于标记中的内容。Text节点必须是最底层节点。

Comment节点：注释节点（作个了解）

示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>document文档</title>
<script language="javascript">
    function get_node_table(){
        //因为有文档标题，所以此处应该是第二个节点
        var html = document.childNodes[1];
        var bodyNode = html.lastChild;
        var tableNode = bodyNode.firstChild;
        alert(tableNode.nodeName);
    }
    function get_node_tr(){
        var bodyNode = document.body;
        var tableNode = bodyNode.firstChild;
        var tbodyNode = tableNode.firstChild;
        alert(tbodyNode.childNodes[1].nodeName);
    }
    function edit_node_text(){
        var bodyNode = document.body;
        var tableNode = bodyNode.firstChild;
        var tbodyNode = tableNode.firstChild;
        var trNode = tbodyNode.childNodes[1];
        var tdNode = trNode.childNodes[1];
        tdNode.innerHTML = "<font color=‘red‘>Demo</font>";
    }
</script>
</head>

<body><table width="500" border="1"><tr><th>编号</th><th>新闻标题</th></tr><tr><td>1001</td><td>DEMO</td></tr></table>
<input type="button" value="取得table节点的名称" onClick="get_node_table()" />
<input type="button" value="取得第二个tr节点名称" onClick="get_node_tr()" />
<input type="button" value="更改‘DEMO‘内容" onClick="edit_node_text()" />
</body>
</html>

核心DOM节点属性

核心DOM中的属性是公共属性，可以应用于HTML DOM，每一个HTML标记都继承核心DOM中的属性。

一、访问节点

nodeName：节点的名称

nodeValue：节点的值，只有Text节点才有nodeValue属性。

提示：nodeValue中内容不能增加任何的标记。nodeValue和innerHTML不一样。

innerHTML中可以加各种其它的标记

nodeValue只能输入普通文本；

firstChild：第一个子节点。

lastChild：最后一个子节点。

childNodes：子节点的列表，是一个数组。只有一个子节点，也返回一个数组。

parentNode：父节点

二、给节点增加属性、删除属性、取得某一个属性的值

setAttribute(name,value)：给某一个HTML元素增加一个属性。

例如：setAttribute(“style”,”width:400;height:200px;”)  //给某个标记增加行内样式

setAttribute(“src”,”images/bg.gif”)  //给图片标记增加一个src属性，属性值为“images/bg.gif”

setAttribute(“id”,”result”);  //给某个标记增加一个id属性，属性值为“result”

getAttribute(name)：取得某个属性的值

例如： var style = document.getAttribute(“style”)

removeAttribute(name)：删除指定的一个属性

例如：obj.removeAttribute(“style”);

如果访问某一个节点呢？

访问每一个节点的起始点都是Document节点对应的document对象。

<html>节点：document.firstChild

document.documentElement

<body>节点：document.body

document.firstChild.lastChild

为什么XHTML通过document.firstChil.lastChild取不到<body>节点？

核心DOM最初是给HTML4.0文档用的。

XHTML和HTML的主要区别：DTD定义。

因此，在XHTML文档中无法使用document.firstChild.lastChild这种方式访问节点。

解决办法：将DTD定义删除，恢复HTML4.0的结构。

为什么Firefox浏览器下，经常会出现，取得某一个节点，反而返回文本节点？

Firefox会把空格、换行都当成一个节点，当成一个文本节点。

解决办法：<body>和<table>之间不能有任何的空白。

实例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
    .set{border:1px solid #660066;
    position:fixed;
    top:50px;
    right:100px;

    }
</style>
<script language="javascript">
    function change_div_style(){
        var divNode = document.getElementsByTagName(‘div‘)[0];
        var style = "width:600px;margin:50px auto;border:1px solid #e7e7e7;background-color:#e2e2e2";
        divNode.setAttribute("style",style);
    }
    function remove_div_style(){
        var divNode = document.getElementsByTagName(‘div‘)[0];
        divNode.removeAttribute(‘style‘);
    }
    function change_h2_style(){
        var h2Node = document.getElementsByTagName(‘h2‘)[0];
        var style = "text-align:center;color:#FF0000";
        h2Node.setAttribute(‘style‘,style);
    }
    function remove_h2_style(){
        var h2Node = document.getElementsByTagName(‘h2‘)[0];
        h2Node.removeAttribute(‘style‘);
    }
    function change_p_style(){
        var divNode = document.getElementsByTagName(‘div‘)[0];
        var pNodes = divNode.childNodes;
        var style = "color:#00F;";
        for(var i=1;i<pNodes.length;i++){
            pNodes[i].setAttribute(‘style‘,style);
        }
    }
    function remove_p_style(){
        var divNode = document.getElementsByTagName(‘div‘)[0];
        var pNodes = divNode.childNodes;
        for(var i=1;i<pNodes.length;i++){
            pNodes[i].removeAttribute(‘style‘);
        }
    }
</script>
</head>

<body>
<div><h2>新闻标题</h2><p>段落一</p><p>段落二</p></div>
<div class="set">
<input type="button" value="改变层的外观" onclick="change_div_style()" />
<input type="button" value="移除层的外观" onclick="remove_div_style()" /><br />
<input type="button" value="改变标题外观" onclick="change_h2_style()" />
<input type="button" value="移除标题外观" onclick="remove_h2_style()" /><br />
<input type="button" value="改变内容外观" onclick="change_p_style()" />
<input type="button" value="移除内容外观" onclick="remove_p_style()" />
</div>
</body>
</html>

三、节点的增删

createElement(tagName)：创建一个HTML元素。注意：tagName不加尖括号，如：createElement(“h2”)

createTextNode(text)：创建文本节点

appendChild(node)：将某一个子节点追加到父节点

removeChild(node)：移取某一个子节点

时间： 2024-10-20 11:56:59

014、BOM与DOM对象的应用的相关文章

百万年薪python之路 -- JS的BOM与DOM对象

BOM对象 location对象 location.href 获取URL location.href="URL" // 跳转到指定页面 location.reload() 重新加载页面,就是刷新一下页面 定时器 1. setTimeOut() 一段时间之后执行某个内容,执行一次 示例 var a = setTimeout(function f1(){confirm("are you ok?");},3000); var a = setTimeout("co

js基础和js操作bom和dom对象

流程控制 if判断 if (a == 1){ //判断条件写在小括号里面,大括号里面写条件判断成功后的代码内容 console.log('1111'); } else{ console.log('222'); } 多条件判断 var a = 0; if(a > 1){ // console.log('1111'); // var hhhh = document.getElementById('d1'); // hhhh.innerText = '彭于晏'; }else if(a<1){ con

细看JS中的BOM、DOM对象

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

css样式的部分拓展, NuMber对象、 BoM、 DoM对象的模型的间述,ing...

css部分代码 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style type="text/css"> 7 div{ 8 width: 300px; 9 height: 400px; 10 margin:100px auto; 11 position: rel

前端05.js入门之BOM对象与DOM对象。

一.关于BOM对象. BOM(浏览器对象模型),可以对浏览器窗口进行访问和操作.使用 BOM,开发者可以移动窗口.改变状态栏中的文本以及执行其他与页面内容不直接相关的动作. 用于操控用户浏览器. 1.window对象: 所有浏览器都支持 window 对象. 概念上讲.一个html文档对应一个window对象. 功能上讲: 控制浏览器窗口的. 使用上讲: window对象不需要创建对象,直接使用即可. 下面是window对象的常用方法: alert()            显示带有一段消息和一

JavaScript 参考手册——javascript本地和内置对象、BOM、DOM

本部分提供完整的 JavaScript 参考手册: JavaScript 本地对象和内置对象 Browser 对象(BOM) HTML DOM 对象 JavaScript 对象参考手册 本参考手册描述每个对象的属性和方法,并提供实例. Array Boolean Date Math Number String RegExp Global Browser 对象参考手册 本参考手册描述每个对象的属性和方法,并提供实例. Window Navigator Screen History Location

必须记的BOM常用api及DOM对象下常用api

js组成 EcmaScript js基础语法 BOM 浏览器相关 浏览器对象模型. DOM 文档对象模型 操作html BOM window对象 是js顶层对象,全局对象 window属性和方法,都可以省略window直接使用window:是浏览器BOM相关api,基本都是 window对象的 BOM相关api ?alert()   window.alert(); 弹窗prompt(); window.prompt() 弹窗接受用户输入信息confirm()   确认框 返回值:当用户点击确认时

BOM和DOM

BOM 浏览器对象模型 BOM中的对象 Window对象:是指窗口对象,可通过Window对象的属性和方法控制窗口,例如打开或关闭一个窗口 History对象:指历史页面,通过History对象的属性和方法实现前进后退的功能 Location对象:指地址栏,通过属性的方法控制页面的跳转 Document对象:指网页中的内容,通过属性和方法控制页面元素 1.Window对象的常用方法: open(); close(); alert(); prompt(); confim(); setTimeout

JavaScript高级程序设计：第8/9/10/11章 BOM与DOM

一.BOM 1. 什么是BOM? BOM(Browser Object Mode) 是指浏览器对象模型,是用于描述这种对象与对象之间层次关系的模型,浏览器对象模型提供了独立于内容的.可以与浏览器窗口进行互动的对象结构.BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象. 2. Window对象 2.1 框架与窗口关系 Window对象是指当前代码所存在的框架实例,在没有引入框架的情况下指的是浏览器窗口.同时需要了解其他窗口关系: Window