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 Codelocation地址栏对象
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对象的应用
推荐阅读
-
装饰者模式（Decorator）是一种灵活的对象结构设计模式，旨在为单个对象动态地添加功能，而无需修改原有类的结构。通过封装对象并提供额外的行为，装饰者模式比传统的继承方式更加灵活和可扩展。例如，可以在运行时为特定对象添加边框或滚动条等特性，而不会影响其他对象。这种模式特别适用于需要在不同情况下动态组合功能的场景。 ...
[详细]
蜡笔小新 2024-11-11 16:36:53
-
微软近期发布了Windows Terminal Preview v0.10，用户可以在微软商店或GitHub上获取这一更新。该版本在2月份发布的v0.9基础上，新增了鼠标输入和复制Pane等功能。 ...
[详细]
蜡笔小新 2024-11-12 16:15:56
-
-
Framework7 是一个开源免费的框架，适用于开发混合移动应用（原生与HTML混合）或iOS&Android风格的Web应用。此外，它还可以作为原型开发工具，帮助开发者快速创建应用原型。 ...
[详细]
蜡笔小新 2024-11-12 14:47:56
-
在最近的一个项目中，我们使用了JQuery DataTable进行数据展示，虽然使用起来非常方便，但在测试过程中发现了一个问题：当查询条件改变时，有时查询结果的数据不正确。通过FireBug调试发现，点击搜索按钮时，会发送两次Ajax请求，一次是原条件的请求，一次是新条件的请求。 ...
[详细]
蜡笔小新 2024-11-12 13:59:27
-
两个条件，组合控制#if($query_string~*modviewthread&t(&extra(.*)))?$)#{#set$itid$1;#rewrite^ ...
[详细]
蜡笔小新 2024-11-12 13:55:01
-
1.java是面向对象的语言。设计模式：接口接口类是从java里衍生出来的，不是python原生支持的主要用于继承里多继承抽象类是python原生支持的主要用于继承里的单继承但是接 ...
[详细]
蜡笔小新 2024-11-12 06:43:20
-
本文将详细介绍ZooKeeper的工作机制、特点、数据结构以及常见的应用场景，包括统一命名服务、统一配置管理、统一集群管理、服务器动态上下线和软负载均衡。 ...
[详细]
蜡笔小新 2024-11-13 13:11:46
-
本文详细介绍了如何解决DNS服务器配置转发无法解析的问题，包括编辑主配置文件和重启域名服务的具体步骤。 ...
[详细]
蜡笔小新 2024-11-13 02:41:19
-
本文详细介绍了如何解决 Windows Server 2016 在使用无线网络 (WLAN) 和有线网络 (以太网) 时遇到的连接问题。包括添加必要的功能和安装正确的驱动程序。 ...
[详细]
蜡笔小新 2024-11-12 00:01:44
-
使用Jsoup解析并遍历HTML文档时，该库能够高效地生成一个清晰、规范的解析树，即使源HTML文档存在格式问题。Jsoup具备强大的容错能力，能够处理多种异常情况，如未闭合的标签等，确保解析结果的准确性和完整性。 ...
[详细]
蜡笔小新 2024-11-11 21:30:03
-
在 CentOS 7 系统中，iptables 的过滤表和 NAT 表具有重要的应用价值。本文通过具体实例详细介绍了如何配置 iptables 的过滤表，包括编写脚本文件 `/usr/local/sbin/iptables.sh`，并使用 `iptables -F` 清空现有规则。此外，还深入探讨了 NAT 表的配置方法，帮助读者更好地理解和应用这些网络防火墙技术。 ...
[详细]
蜡笔小新 2024-11-11 18:33:22
-
在使用Eclipse进行调试时，如果遇到未解析的断点（unresolved breakpoint）并显示“未加载符号表，请使用‘file’命令加载目标文件以进行调试”的错误提示，这通常是因为调试器未能正确加载符号表。解决此问题的方法是通过GDB的`file`命令手动加载目标文件，以便调试器能够识别和解析断点。具体操作为在GDB命令行中输入 `(gdb) file `。这一步骤确保了调试环境能够正确访问和解析程序中的符号信息，从而实现有效的调试。 ...
[详细]
蜡笔小新 2024-11-11 18:21:47
-
在 LeetCode 的“有效回文串 II”问题中，给定一个非空字符串 `s`，允许删除最多一个字符。本篇深入解析了如何判断删除一个字符后，字符串是否能成为回文串，并提出了高效的优化算法。通过详细的分析和代码实现，本文提供了多种解决方案，帮助读者更好地理解和应用这一算法。 ...
[详细]
蜡笔小新 2024-11-11 17:40:42
-
在使用MVC和EF框架进行数据保存时，遇到了 `System.Data.Entity.Validation.DbEntityValidationException` 错误，表明存在一个或多个实体验证失败的情况。本文详细分析了该错误的成因，并提出了有效的处理方法，包括检查实体属性的约束条件、调试日志的使用以及优化数据验证逻辑，以确保数据的一致性和完整性。 ...
[详细]
蜡笔小新 2024-11-11 16:54:45
-
MySQL的查询执行流程涉及多个关键组件，包括连接器、查询缓存、分析器和优化器。在服务层，连接器负责建立与客户端的连接，查询缓存用于存储和检索常用查询结果，以提高性能。分析器则解析SQL语句，生成语法树，而优化器负责选择最优的查询执行计划。这一流程确保了MySQL能够高效地处理各种复杂的查询请求。 ...
[详细]
蜡笔小新 2024-11-11 16:48:32
-
郑小蒜9299_941611_G
这个家伙很懒，什么也没留下！
京公网安备 11010802041100号