JavaScirpt第三章：节点
1.介绍
节点：表示网络中的一个连接点。一个网络就是由一些节点组成的集合
DOM也是如此，是由节点构成的集合。DOM有许多不同类型的节点，我们先关注：元素节点、文本节点和属性节点
2.元素节点
元素节点：DOM的原子。（例如上次购物清单的文档中，使用了<body>、<p>，<ul>等元素，这些元素构成了文档的结构）
标签的名字就是元素的名字
元素可以包含其他元素。（如在我们的购物清单里，所有列表项元素都包含在一个无序清单元素的内部）
3.文本节点
文本节点：在XHTML文档里，文本节点总是被包含在元素节点的内部。（如<p>元素包含着文本：Don't forget to buy this stuff.）
但并非所有的元素节点都包含有文本节点。(如<ul>元素没有直接包含任何文本节点，它包含着其他元素节点）
4.属性节点
属性节点：用于给元素做出更具体的描述。（几乎所有的元素都包含了title属性）
属性节点总是被包含在元素节点中。
并非所有的元素都包含属性，但所有的属性都被元素包含。
<P title="a gentle reminder">Don't forget to buy this stuff.</p>5.CSS
CSS：告诉浏览器如何去显示一份文档的内容。
可以放在文档的<head>部分，也可以放在另外一个样式表文件。
CSS声明元素样式：
selector{
property: value;
} <!--定义浏览器在显示元素的使用的颜色、字体和字号-->
p{
color: yellow;
font-family: "arial",sans-serif;
font-size: 1.2em;
}继承：CSS技术中的重大功能是继承。
CSS把文档的内容视为一棵节点书，节点树上的每个元素将继承其父元素的样式属性。
（如我们为body元素定义颜色和字体，则包含在body元素的所有元素也将获得那些样式）
body{
color: white;
background-color: black;
}
为了把某一个元素与其他几个元素区别开来，需要使用class属性或id属性：
- class属性：乐意在任何元素上应用class属性。
<p class="special">This paragraph has the special class.</p>
<h2 class="special">So does this headline</h2>
<!--可以像下面为class属性值相同的所有元素定义同一种样式-->
.special{
font-style:italic;
}
<!--利用class属性为一种特定类型的元素定义特定的样式-->
h2.special{
text-transform:uppercase;
}
- id属性：给网页里的某个元素定义一种特定的样式。id属性一头连着文档的某个元素，另一头连着CSS样式里的某个样式
<ul id="purchases"> <!--在样式表里，可以为特定的元素定义一种独享的样式--> #purchases{ border: 1px solid white; background-color： #333； color: #ccc; padding:1em; } <!--尽管id本身只能使用一次，还是可以利用id属性为包含在特定元素里的其他元素定义样式--> #purchases li{ font-weigh:bold; }
5.获取元素
有三种DOM方法可以获取元素节点：分别通过元素ID、标签名字和类名字来获取。
getElementById（id）：
这个方法将返回一个与那个有着给定id属性值的元素节点的对象。
它是document对象的特有函数。
getElementById方法只有一个参数：你想获得的那个元素的id属性的值，这个id值必须放在单引号或双引号里。
这个调用返回一个对象。 （typeof操作符可以告诉我们它的操作数是字符串、数值、函数、布尔值还是对象）
document.getElementById("purchases")<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Shopping list</title>
</head>
<body>
<h1>What to buy.</h1>
<p title="a gentle reminder">Don't forget to buy this stuff.</p>
<ul id="purchases">
<li>A tin of beans.</li>
<li class="sale">Cheese.</li>
<li class="sale important">Milk.</li>
</ul>
<script>
alert(typeof document.getElementById("purchases"));
</script>
</body>
</html>
getElementsByTagName(tag)：
返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素。
这个方法只有一个参数，它的参数是 标签的名字。
alert(document.getElementsByTagName("li").length);//可以利用循环语句和typeof操作符去遍历这个数组
var items=document.getElementsByTagName("li");
for(var i=0;i<items.length;i++){
alert(typeof items[i]);
}允许将一个通配符作为参数，意味着文档中的每个元素都占据一席之地。通配符必须要放在引号里。
//想要知道某份文档里有多少个元素节点
alert(document.getElementsByTagName("*"));//还可以将getElementById和getElementByTagName结合起来
//如果想知道id属性值为purchases的元素有几个列表项
var shopping=document.getElementsById("purchases");
var items=shopping.getElementsByTagName("*");
alert(items.length):getElementByClassName（class）：
可以通过Class属性中的类名来访问元素。
只可以接受一个参数，这个参数就是类名。
还可以查找带有多个类名的元素，要制定多个类名，只要在字符串参数中用空格分隔开。类名的顺序并不重要。
alert(document.getElementsByClassName("important sale"));//想知道id为purchases的元素有多少类名含“sale”列表项
var shopping=document.getElementById("purchases");
var sales=shopping.getElementsByClassName("sale");
alert(sales.length);//新老浏览器都适用，与getElementsByClassName（classname）有相同功能的函数
functiion getElementsByClassName(node,classname){
if(node.getElementsByClassName){
return node.getElementsByClassName(classname);
}else{
var results=new Array();
var elems=node.getElementsByTagName("*");
for(var i=0;i<elems.length;i++){
if(elems[i].className.indexOf(classname)!=-1){
results[results.length]=elems[i];
}
}
return results;
}
}
上一篇： VBA基础，工作簿workbook相关的方法和属性
下一篇： 第六章 函数