JavaScript 进阶：CSS 与 XML 基础应用指南

CSS 基础与优先级

CSS 全称为 Cascading Style Sheets，中文译作级联样式表或层叠样式表。其核心优势在于能够使代码结构更加清晰整洁，并支持对页面样式进行批量统一处理。

CSS 的基本语法规范如下：

注释符号采用 /* */ 形式。

选择符语法结构为 selector {attribute:value}。同一属性内的多个值以空格分隔，不同属性之间则以分号分隔。需注意 CSS 语法严格区分大小写。

例如，若需为页面中的 table 元素定制特定样式，代码应写为 table {.....;.....;}。

选择符的使用方式多样，此处列举部分常见用法，具体细节将在后续章节详细解释。

实际应用中再对选择符进行详细解析。

在同一个页面或 CSS 文件中，若对同一元素存在多重样式定义，浏览器需依据优先级规则进行渲染。优先级主要划分为外部定义样式优先级与其他样式优先级两类。

关于外部定义样式的优先级算法此处省略，直接给出结果：ID 选择符 > 类选择符 > 属性选择符 > 伪类选择符 > 元素选择符 > 伪元素选择符 > 全局选择符 > 其他。

其他样式的优先级排序中，文内样式（即元素内部的 style=...）具有最高优先级，高于所有外部定义样式。关于 !important 在不同浏览器版本中的用法存在差异，此处不作深入展开，建议查阅相关文档。通过继承获得的样式优先级最低。

CSS 属性参考链接：https://www.jb51.net/w3school/css/css_reference.htm

CSS 单位参考链接：https://www.jb51.net/w3school/css/css_units.htm

忽略上述链接。

接下来进入 CSS 实际应用环节。

CSS 样式嵌入与动态修改

1. 在当前页面内嵌入 CSS 样式：

 
<html>
<head>
<title>css test</title>
<style>
.tableStyle{
background:yellow;
font-size:14px;
font-weight:bold;
} 
</style>
</head>
<body>
<table width="400" align="center" class="tableStyle">
<tr>
<td>title:</td>
<td><input type="text" name="title" size="50"></td>
</tr>
<tr>
<td>content:</td>
<td><textarea name="content" class="userData" cols="45" rows="10"></textarea></td>
</tr>
</table>
</body>

2. 嵌入外部 CSS 样式文件：

在工程目录下新建 css 文件夹，并创建名为 style.css 的文件。此举旨在保持代码整洁，示例中仅包含前述案例的样式内容。

 
.tableStyle{
background:yellow;
font-size:14px;
font-weight:bold;
border:1px solid #000000

引用外部样式文件十分简便，只需在 HTML 中添加一行代码：

<link rel="stylesheet" type="text/css" href="css/style.css" />

其中 rel 属性指定引入的是 CSS 样式表文件，type 属性指定文件类型，href 属性指定文件的物理路径。

3. 动态修改 CSS 样式。

此时开始涉及 JavaScript 与 CSS 的结合。

修改样式的方法主要是获取元素并修改其属性。值得注意的是，link 标签的属性同样可以被修改。

例如，为 link 标签设置 id 为 myStyle，然后修改其导入的文件路径，具体方法如下：

 
<link rel="stylesheet" id="myStyle" type="text/css" href="css/style.css">
<script type="text/javascript">
//在javascript中修改时：
var styleObj=document.getElementById("myStyle");
styleObj.styleSheet.cssText="";//清除原有样式
styleObj.styleSheet.addImport("css/style2");
</script>

XML 规范与 XPath 应用

接下来开始介绍 XML 部分。

忽略无关内容。

若需深入学习 XML 可单独开设系列课程，此处仅作简要概述。

XML 全称为 Extensible Markup Language，其存在旨在更灵活、广泛地描述数据。XML 的标签几乎全部由用户自定义。

例如存储书籍信息时，可采用不同的存储方式：

 
<book>
<name>.....</name>
<author>....</author>
<publisher>...</publisher>
</book>
<!-- or -->
<book>
<property name="name" value="....."/>
<property name="author" value="..."/>
<property name="publisher" value="...."/>.
</book>

XML 还有几项严格规定：

必须包含声明语句 <?xml cersion="1.0"?>，其中可包含 encoding 等其他属性。

所有非根元素必须封闭，即必须包含 />。

属性值必须包含在引号内。

XML 区分大小写。

标记名称必须以字母、“_”或“:”开头，后续可跟随字母、数字、句点、冒号或下划线。

XML 文档只能有一个根节点。

XPath。

XPath 是一种用于在 XML 文件中查找并定位信息的语言，它可以遍历文档树中的元素和属性。

关于 XPath 的语法，此处仅做简要介绍。

XPath 语法详情见：https://www.jb51.net/w3school/xpath/xpath_syntax.htm

请大致浏览上述网页的“XPath 语法”、“XPath 轴”、“XPath 运算符”以及参考手册下的“XPath 函数”。

浏览完毕后，即可开始相关练习：

首先提供一个 XML 文件示例：

 
<!-- Copyright w3school.com.cn -->
<!-- W3School.com.cn bookstore example -->
<bookstore>
<book category="children">
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
<book category="cooking">
<title lang="en">Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
<book category="web" cover="paperback">
<title lang="en">Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price>
</book>
<book category="web">
<title lang="en">XQuery Kick Start</title>
<author>James McGovern</author>
<author>Per Bothner</author>
<author>Kurt Cagle</author>
<author>James Linn</author>
<author>Vaidyanathan Nagarajan</author>
<year>2003</year>
<price>49.99</price>
</book>
</bookstore>

（内容源自网站，复制时请保留版权信息。）

跨浏览器 XML 数据读取实战

在 IE 和 Firefox 浏览器中的使用方法存在差异，这点较为繁琐。先介绍 IE 浏览器的实现方式：这段代码再次强调，script 标签应写在 table 之后，否则在编译 JavaScript 时，由于 table 尚未渲染，浏览器无法确定 innerText 的加载位置。完整代码如下供参考：

XML in IE

 
<html>
<head>
<title>xml test</title>
</head>
<body>
<table width="400" border="1px" align="center">
<tr>
<td width="30%">book name:</td>
<td><span id="bname"></span></td>
</tr>
<tr>
<td>book author:</td>
<td ><span id="bauthor"><span></td>
</tr>
</table>
<script type="text/javascript">
<!-- 
var xmldoc=new ActiveXObject("MSXML2.DOMDocument.3.0");
xmldoc.load("xml/books.xml");
var name=xmldoc.selectNodes("/bookstore/book/title");
var author=xmldoc.selectNodes("/bookstore/book/author");
var bname=document.getElementById("bname");
var bauthor=document.getElementById("bauthor");
bname.innerText=name[0].text;
bauthor.innerHTML="<p>"+author[0].text+"</p>";
//--> 
</script>
</body>
</html>

接下来介绍 Firefox 浏览器的实现方式：

 
<html>
<head>
<title>xml test</title>
</head>
<body>
<table width="400" border="1px" align="center">
<tr>
<td width="30%">book name:</td>
<td><span id="bname"></span></td>
</tr>
<tr>
<td>book author:</td>
<td ><span id="bauthor"><span></td>
</tr>
</table>
<script type="text/javascript">
<!-- 
var xmldoc=document.implementation.createDocument("","",null);
xmldoc.load("xml/books.xml")
//xmlDoc.evaluate(xpath, xmlDoc, namespace, XPathResult.ANY_TYPE,XPahrResult);
var evaluatorObj=new XPathEvaluator();
function getBookChild(path){
return evaluatorObj.evaluate(path,xmldoc.documentElement,null,
XPathResult.ORDERED_NODE_ITERATOR_TYPE,null);
} 
var namelist=getBookChild("/bookstore/book/title");
var name=namelist.iterateNext();
var authorlist=getBookChild("/bookstore/book/author");
var author=authorlist.iterateNext();
var bname=document.getElementById("bname");
var bauthor=document.getElementById("bauthor");
bname.innerHTML=name.childNodes[0].nodeValue;
bauthor.innerHTML=author.childNodes[0].nodeValue
//--> 
</script>
</body>
</html>

Firefox 浏览器下读取 XML 资源的网络资料较少，经多次尝试未果后，通过调试发现 author.childNodes[0].nodeValue 这一句可获取节点值。

在 Firefox 浏览器中读取 XML 文件主要涉及两个类：XPathEvaluator 和 XPathResult。即使用 XPathEvaluator 进行查找，并在 XPathResult 中存储结果。代码中使用了 XPathEvaluator 查找部分，该 evaluate 函数参数众多，必须了解其用法，此处摘录他人内容（原内容见链接）：

函数：evaluate(xpathText,contextNode,namespaceURLMapper,resultType,result)

注意，resultType 有多种参数值，继续摘录：

（虽然是摘录，但复制过程也不轻松=w=）

除此之外，XML 文件节点还可以增加条件，例如仅获取第一个符合条件的节点：

/bookstore/book[1]/title

或者价格高于 35 的节点：

/bookstore/book[price>35]/price

之前的例子未使用条件选取，旨在演示返回所有子节点的效果，这通常是常用做法。

此处提及一个概念 XSLT，全称是 Extensible Stylesheet Language Transformations，这是一种用于转换 XML 文件的语言。XSLT 借用 XPath 在 XML 文档中查找信息，可将 XML 文件中的内容按指定样式显示为 HTML 页面。

具体有兴趣的同学可自行查阅，此处不再深入。

XML 数据岛概念

终于，介绍 XML 的最后一个概念：数据岛。

数据岛指页面包含 XML 数据信息，与 CSS 类似，可以内部嵌入，方法为 <xml>......</xml>，也可以外部引入：<xml src="xml/books.xml"></xml>。

XML 数据岛的数据与 HTML 标签的绑定通过 datasrc 和 datafld 完成，但尝试多次后未能找到可运行的代码，故暂时搁置，待代码完善后再行补充。