《JavaScript权威指南》----第15章脚本化文档(1) 学习记录

最新推荐文章于 2024-09-11 15:33:18 发布

自由之翼Online

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量604

点赞数

分类专栏： JavaScript 文章标签： javascript

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

15.3.1 作为节点树的文档

Document对象，它的Element对象和文档中表示文本的Text对象都是Node对象。Node对象定义了以下重要的属性:

parentNode:该节点的父节点，无则为null childNodes:只读的类数组对象(NodeList对象),该节点的字节点的实时表示

firstChild,lastChild:该节点的子节点中的第一个和左后一个，无则为null

nextSibling,previousSibling:紧邻该节点的下一个兄弟节点和紧邻该节点的前一个兄弟节点

nodeType:该节点的类型,9表示Document节点，1表示Element节点,3表示Text节点，8表示Comment节点，11表示DocumentFragment节点

nodeValue:Text节点或者Comment节点的文本内容

nodeName:元素标签名，以大写形式表示

<!DOCTYPE html>
<html lang="zh-hans">
<head>
<title>Text</title>
</head><body>Hello World!</body>
</html>
<script>
window.onload = function(){
alert(document.childNodes[1].firstChild.nextSibling);
};
</script>

如果把<body>元素另起一行，alert出现的内容将是一个文本节点，不再是body节点，这是因为该API对文档文本的变化及其敏感，所以当只需要找到文档中的某一元素时，使用Element对象的API会更方便。

15.3.2 作为元素树的文档

当将主要的兴趣点集中在文档中的元素上而非他们之间的文本时，我们可以使用另外一个更有用的API。它将文档看做是Element对象树，忽略掉Text和Comment节点

该API的第一部分是Element对象的children属性。类似ChildNodes,它也是一个NodeList对象，不同的是children列表只包含Element对象。children并非标准属性，但它在所有当前浏览器中都能工作。

注意,Text和Comment节点没有children，它意味着上述Node.parentNode属性不可能返回Text或者Comment节点。任何ELement的parentNode总是另一个Element，或者是追溯到树根的Document或DocumentFragment节点。

<!DOCTYPE html>
<html lang="zh-hans">
<head>
<title>Text</title>
</head>

<body>Hello World!</body>

</html>
<script>
window.onload = function(){
alert(document.children[0].firstElementChild.nextElementSibling);

};
</script>

当使用此API时，就算文档中有换行符或其他文本节点时，也依然能顺利访问到body元素。

childElementCount:表示子元素的数量，返回的值和children.length值相等。

15.4 属性

15.4.1 HTML属性作为Element的属性

表示HTML文档元素的HTMLEelement对象定义了读/写属性，他们映射了元素的HTML属性。HTMLElement定义了通用的http属性(如lang),以及事件处理程序(如onclick)。

HTML属性名不区分大小写，但是JavaScript属性名则大小写敏感。有些HTML属性在JavaScript中是保留字，如<label>元素的for，在JavaScript中则变为htmlFor属性，class在

JavaScript中则变为className.

注意，这个基于属性的API用来获取和设置属性值，但没有定义任何从元素中删除属性的方法。而且delete操作符也无法完成。

15.4.2 获取和设置非标准HTML属性

Element类型还定义了getAttribute()和setAttribute()来查询和设置非标准的HTML属性，也用来查询和设置XML文档中元素上的属性。

Element类型还定义了hasAttribute()和removeAttribute(),它们用来检测命名属性是否存在和完全删除属性，这就能实现从元素中删除属性的目的。

15.4.3 数据集（dataset）属性

有时需要在HTML元素上绑定一些额外的信息，当JavaScript要选取这些元素并以某种方式操纵这些信息时就是很典型的情况。

HTML5为此提供了一个解决方案，在HTML5中，任意以"data-"为前缀的小写的属性名字都是合法的。这些数据集属性将不会对其元素的表现产生影响。它们定义了

一个标准的，附加额外数据的方法。

HTML5在Element对象上定义了一个dataset属性。该属性指代一个对象，它的各个属性对应于去掉前缀的data-属性。

<!DOCTYPE html>
<html lang="zh-hans">
<head>
<title>Text</title>
</head>
<body>Hello World!</body>
<span class="sparkline" data-ymin="0" data-ymax="10">1 1 1 2 2 3 4 5 5 4 3 5 6 7 7 4 2 1</span>
</html>
<script>
var sparkline = document.getElementsByClassName("sparkline")[0];
var dataset = sparkline.dataset;
var ymin = parseFloat(dataset.ymin);
var ymax = parseFloat(dataset.ymax);
var data = sparkline.textContent.split(" ").map(parseFloat);
alert(ymin+"|"+ymax+"|"+data);
</script>