JavaScript入门教程

JavaScript简介
JavaScript语法基础
JavaScript流程控制
JavaScript函数
面向对象编程
JavaScript事件
JavaScript DOM
正则表达式
JavaScript BOM
AJAX

专题分析

浏览器兼容性
JS优化
Web前端开发规范
编辑器推荐
总结和笔记

学习助手

对象参考手册
ECMAScript分析
数据中心
QQ交流群

Chrome开发工具Elements面板(编辑DOM和CSS样式)详解

Element 译为“元素”,Element 面板可以让我们动态查看和编辑DOM节点和CSS样式表,并且立即生效,避免了频繁切换浏览器和编辑器的麻烦。

我们可以使用Element面板来查看源代码,它不但可以很好的格式化DOM节点,清晰的展现HTML文档,还可以查看JavaScript创建的DOM节点和iframe中的DOM节点,比在当前网页中右击鼠标选择“查看网页源代码”强大很多。

总之,Element面板可以让我们很透彻的了解DOM和CSS的底层结构。

我们将以下面的HTML代码为例来详细了解Element面板:
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style type="text/css">
h1{
    color: blue;
}
p{
    padding: 10px;
    background-color: #ddd;
    border: 1px solid #ccc;
}
</style>
<title>Chrome开发者工具演示</title>
</head>
<body>
    <div>
        <h1>JavaScript中文网</h1>
        <p>http://www.itxueyuan.org/javascript/</p>
    </div>
</body>
</html>
复制该代码,保存为demo.html并在Chrome浏览器中打开,按 Ctrl+Shift+C(Mac系统为Cmd+Shift+C)打开开发者工具并进入元素审查模式。

查看DOM树

打开Element面板,可以查看所有DOM节点,包括CSS和JavaScript,如下图所示,左侧为DOM树,右侧为CSS样式。

图 2.1  Element面板示例

图标说明:
  • 点击“图标1”,可以在新窗口中打开开发者工具,再次点击回到当前网页;
  • 点击“图标2”,可以调出控制台,可以在控制台里输入并执行JavaScript代码,查看当前网页的错误和日志等;
  • 点击“图标3”,可以选取当前页面的HTML元素。

选取DOM节点

点击“图标3”(由黑色变为蓝色),将鼠标移到网页中的某元素上面,该元素会发生变化如下图所示:

图 2.2  鼠标移动到网页中的元素

点击该元素,即可选中。这时,会发现Element面板中的DOM树发生了变化,如下图所示:

图 2.3  DOM树发生变化

选中的<p>节点在DOM树中被精确定位(蓝色背景),可以看到<p>节点的DOM层次(红色方框),在面板右侧,是<p>节点的CSS样式。

当然,也可以在Element面板的DOM树中选取DOM节点。将鼠标放到相应的DOM节点上,会发现网页中相应的节点也发生了变化(同图2.2),点击该节点,即可选中。

增加、删除和修改DOM节点

在Element面板中,选择DOM节点,在文本处右击鼠标,会弹出一个菜单,如下图所示:

图 2.4  DOM编辑菜单

菜单说明:
  • Edit text(编辑文本):编辑该节点中的文本。也可以在文本处双击进行编辑。
  • Edit as HTML(编辑HTML):编辑该节点及其子节点的所有HTML元素(包括节点中的文本)。
  • Copy as HTML(复制HTML):复制该节点及其子节点的所有HTML元素(HTML文档)。
  • Copy XPath(复制XPath路径):复制该节点的XPath路径,即DOM层次路径。例如,<p>节点的XPath路径为 /html/body/div/p 。
  • Delete node(删除节点):删除该节点及其子节点的所有HTML元素。也可以使用 Backspace 和 Delete 键删除。
  • Inspect DOM properties(审查DOM属性):在控制台中显示该节点的所有标准属性(如果有的话)。
  • Word wrap(自动换行):HTML代码是否自动换行。

对 Inspect DOM properties(审查DOM属性)的说明:
为<p>节点添加id属性,如下:
<p id="demo">http://www.itxueyuan.org/javascript/</p>
会在控制台输出p#demo;再向<p>节点添加class属性和name属性,如下:
<p id="demo" class="demo" data="demo">http://www.itxueyuan.org/javascript/</p>
会在控制台输出p#demo.demo。

可见,控制台只会输出符合W3C标准的属性,不支持自定义属性。不过,实际开发中很少用到该功能。

另外,我们也可以通过拖动节点来改变节点的顺序,双击属性节点来改变它的值。

查看CSS样式

CSS样式审查面板是一个非常有用的面板,实际开发中,有时候CSS样式表会非常复杂,甚至连我们自己都不知道当前节点应用了哪些样式。使用CSS样式审查面板,可以让我们清楚地知道当前节点使用了哪些样式,分别来自哪些文件,哪些样式是被覆盖的,哪些样式是最终样式,哪些样式是无效的,等等。

如图2.3所示,选中节点,Element面板右侧的CSS样式审查面板会展示出该节点的CSS样式。

在CSS样式审查面板中,我们可以添加、删除和修改CSS样式。

另外,CSS审查面板中有几个子面板,如下图所示:

图 2.5  CSS样式审查面板的子面板

子面板说明:
  • Style(样式):当前节点的样式;
  • Computed(计算):查看当前节点经过计算后的样式以及盒模型数据;
  • Event Listeners(事件监听):查看为当前节点绑定的事件和事件监听函数;
  • DOM Breakpoints(DOM断点):查看为当前节点设置的DOM断点;
  • Properties(属性):当前节点(对象)的所有属性。

【小技巧】使用键盘方向键改变数值
查看<p>节点的样式,如【图2.3】所示,选中 padding 的值,按下键盘方向键(<- 和 ->)数值会跟着改变,页面上<p>节点的样式也立刻改变。实际开发中,会经常使用该方法来微调元素的外边距、内补白和大小等,非常方便。

【小技巧】颜色拾取器
查看<p>节点的样式,如【图2.3】所示,选中 background-color 后边的小图标,会弹出颜色拾取器,能够很方便的改变背景颜色,如下图所示:

图 2.6  颜色拾取器

实际开发中,会经常使用该方法来微调节点的颜色。