首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

014、BOM与DOM对象的应用

作者：郑小蒜9299_941611_G | 来源：互联网 | 2023-08-06 02:54
Screen屏幕对象Width：屏幕的宽度Height：屏幕的高度availWidth：屏幕的有效宽度（不含任务栏）availHeight：屏幕的有效高度（不含任务栏）colorD

Screen屏幕对象

Width：屏幕的宽度

Height：屏幕的高度

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

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

colorDepth：色深

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

navigator浏览器对象

appName：浏览器软件的名称

appVersion：版本号

platform：操作平台

systemLanguage：系统语言

userLanguage：用户语言

COOKIEEnabled：COOKIE是否启用。COOKIE是用来记录用户账号信息

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

location地址栏对象

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

hash：取出锚点名称

protocol：取出地址的协议

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

hostname：取出主机名称

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

search：取出查询字符串

location对应的方法

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

技术分享技术分享 
<script type="text/Javascript">
var str = "
location获取地址的各个部分
";
str += "完整地址："+location.href;
str += "
协议："+location.protocol;
str += "
主机名称："+location.hostname;
str += "
文件和路径："+location.pathname;
str += "
查询字符串："+location.search;
str += "
锚点名称："+(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>
View Code

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文档中，各元素之间是有一定层级关系。

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

DOM分类

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

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

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

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

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

HTML节点树

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

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

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

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

技术分享

DOM节点类型

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

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

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

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

Attribute节点：属性节点。对应于网页中各标记的属性。比如：

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 = "Demo";
    }
script>
head>

<body><table width="500" border="1"><tr><th>编号th><th>新闻标题th>tr><tr><td>1001td><td>DEMOtd>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>
View Code

核心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对象。

节点：document.firstChild

                     document.documentElement

节点：document.body

                     document.firstChild.lastChild

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

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

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

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

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

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

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

解决办法：和

之间不能有任何的空白。

实例代码：

技术分享技术分享 
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>
View Code

三、节点的增删

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

createTextNode(text)：创建文本节点

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

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

014、BOM与DOM对象的应用


推荐阅读
  • version

    CentOS 6.5安装VMware Tools及共享文件夹显示问题解决方法

    CentOS 6.5安装VMware Tools及共享文件夹显示问题解决方法
    本文介绍了在CentOS 6.5上安装VMware Tools及解决共享文件夹显示问题的方法。包括清空CD/DVD使用的ISO镜像文件、创建挂载目录、改变光驱设备的读写权限等步骤。最后给出了拷贝解压VMware Tools的操作。 ... [详细]
  • version

    Alink回归预测的不完善问题及期待

    本文讨论了Alink回归预测的不完善问题，指出目前主要针对Python做案例，对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法，以及Maven的相关知识。最后，对Alink回归预测的未来发展提出了期待。 ... [详细]
  • js

    ABAP开发发送邮件程序的配置和代码整理

    本文介绍了通过ABAP开发往外网发邮件的需求，并提供了配置和代码整理的资料。其中包括了配置SAP邮件服务器的步骤和ABAP写发送邮件代码的过程。通过RZ10配置参数和icm/server_port_1的设定，可以实现向Sap User和外部邮件发送邮件的功能。希望对需要的开发人员有帮助。摘要长度：184字。 ... [详细]
  • js

    asp.net微信公众平台开发目录汇总陆续更新的相关内容

    本文内容为asp.net微信公众平台开发的目录汇总，包括数据库设计、多层架构框架搭建和入口实现、微信消息封装及反射赋值、关注事件、用户记录、回复文本消息、图文消息、服务搭建（接入）、自定义菜单等。同时提供了示例代码和相关的后台管理功能。内容涵盖了多个方面，适合综合运用。 ... [详细]
  • io

    lua语言闭包、模式匹配、日期、编译、模块的特性及应用

    本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值，函数可以作为变量自由传递，也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性，为程序开发带来了便利。 ... [详细]
  • js

    基于layUI的图片上传前预览功能的2种实现方式

    基于layUI的图片上传前预览功能的2种实现方式
    本文介绍了基于layUI的图片上传前预览功能的两种实现方式：一种是使用blob+FileReader，另一种是使用layUI自带的参数。通过选择文件后点击文件名，在页面中间弹窗内预览图片。其中，layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块，并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]
  • sum

    HDU 2372 El Dorado（DP）的最长上升子序列长度求解方法

    HDU 2372 El Dorado（DP）的最长上升子序列长度求解方法
    本文介绍了解决HDU 2372 El Dorado问题的一种动态规划方法，通过循环k的方式求解最长上升子序列的长度。具体实现过程包括初始化dp数组、读取数列、计算最长上升子序列长度等步骤。 ... [详细]
  • sum

    求解hdu 1003 java题目的动态规划优化方法

    本文讨论了如何优化解决hdu 1003 java题目的动态规划方法，通过分析加法规则和最大和的性质，提出了一种优化的思路。具体方法是，当从1加到n为负时，即sum(1,n)sum(n,s)，可以继续加法计算。同时，还考虑了两种特殊情况：都是负数的情况和有0的情况。最后，通过使用Scanner类来获取输入数据。 ... [详细]
  • io

    C#之数据集：DataSet对象的使用及相关方法详解

    本文介绍了C#中数据集DataSet对象的使用及相关方法详解，包括DataSet对象的概述、与数据关系对象的互联、Rows集合和Columns集合的组成，以及DataSet对象常用的方法之一——Merge方法的使用。通过本文的阅读，读者可以了解到DataSet对象在C#中的重要性和使用方法。 ... [详细]
  • io

    OC学习笔记之@property和@synthesize

    本文介绍了OC学习笔记中的@property和@synthesize，包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]
  • js

    Hibernate基础映射

    在说Hibernate映射前，我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象，以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]
  • io

    Redis底层数据结构之压缩列表的介绍及实现原理

    Redis底层数据结构之压缩列表的介绍及实现原理
    本文介绍了Redis底层数据结构之压缩列表的概念、实现原理以及使用场景。压缩列表是Redis为了节约内存而开发的一种顺序数据结构，由特殊编码的连续内存块组成。文章详细解释了压缩列表的构成和各个属性的含义，以及如何通过指针来计算表尾节点的地址。压缩列表适用于列表键和哈希键中只包含少量小整数值和短字符串的情况。通过使用压缩列表，可以有效减少内存占用，提升Redis的性能。 ... [详细]
  • request

    django视图函数的使用方法

    本文介绍了django中视图函数的使用方法，包括如何接收Web请求并返回Web响应，以及如何处理GET请求和POST请求。同时还介绍了urls.py和views.py文件的配置方式。 ... [详细]
  • request

    利用中间件模式简化代码逻辑

    在编写业务代码时，常常会遇到复杂的业务逻辑导致代码冗长混乱的情况。为了解决这个问题，可以利用中间件模式来简化代码逻辑。中间件模式可以帮助我们更好地设计架构和代码，提高代码质量。本文介绍了中间件模式的基本概念和用法。 ... [详细]
  • io

    C#导入、导出功能

    导出功能protectedvoidbtnExport(objectsender,EventArgse){用来打开下载窗口stringfileName中 ... [详细]
author-avatar
郑小蒜9299_941611_G
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有