#3DOM

来源：互联网发布：三菱刺刀淘宝专卖店编辑：程序博客网时间：2024/06/07 15:03

1.节点的概念
2.5个常用DOM方法：getElementById , getElementsByTagName ,
getElementsClassName , getAttribute , setAttribute

文档：DOM中的D
如果没有document（文档），DOM也就无从谈起，当创建了一个网页并把它加载到Web浏览器中时，DOM就在幕后悄然而生.它把你编写的网页文档转换为一个文档对象

对象：DOM中的O
JavaScript语言里的对象可以分为三种类型
@用户定义对象：由程序员自行创建的对象
@内建对象：内建在JavaScript语言里的对象，如Array，Math，Date等
@宿主对象，由浏览器提供的对象
宿主对象最基础的对象就是window对象
window对象对应着浏览器窗口本身，这个对象的属性和方法通常称为BOM（浏览器对象模型）,BOM提供了window.open和window.blur等方法，这些方法某些程度上要为到处滥用的各种弹出窗口和下拉菜单负责。
我们不需要与BOM打太多交道，而是把注意力集中在浏览器窗口内的网页内容上。document对象的主要功能就是处理网页内容，我们只讨论document对象的属性和方法。

模型：DOM中的M
DOM把一份文档表示为一棵树,这是我们理解和运用这一模型的关键。更具体地说，DOM把文档表示为一颗家谱树。
家谱树本身又是一种模型。用parent,child,sibling(兄弟)等标号来表明家族成员之间的关系。家谱树可以把一些相当复杂的关系简明地表示出来：一个特定的家族成员既是某些成员的父辈，有是另一位成员的子辈，同时还是另一位成员的兄弟。
家谱树模型非常适合来表示一份用HTML语言编写出来的文档。
与使用家谱树这个术语相比，把文档称为“节点树”更准确。

<title> shopping list </title>
<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>
</body>

节点
节点这个词是个网络术语，它表示网络中的一个连接点。一个网络就是由一些节点构成的集合。
在DOM里有许多不同类型的节点。也有许多类型的DOM节点包含其他类型的节点。我们先看看其中的三种：元素节点，文本节点，和属性节点。

元素节点
DOM的原子是元素节点,在描述上面那个“购物清单” 文档是，我们使用了诸如<body>,<p>,<ul>之类的元素。这些元素在文档中的布局形成了文档的结构。
标签的名字就是元素的名字
元素可以包含其他的元素。在我们的“购物清单”文档里，所有的列表项元素都包含在一个无序清单元素内部。事实上，没有被包含在其他元素的唯一元素是<html>元素，他是我们的节点树的根元素。

文本节点
元素节点只是节点类型的一种，如果一份文档完全由一些空白元素构成，它将有一个结构，但这份文档本身将不会包含什么内容。
在“购物清单”例子里，<p>元素包含着文本“Don't forget to buy this stuff.”。它是一个文本节点.
在XHTML文档里，文本节点总是被包含在元素节点的内部，但并非所有的元素节点都包含有文本节点。在“购物清单”文档里，<ul>元素没有直接包含任何文本节点,它包含着其他的元素节点(一些<li>元素),后者包含着文本节点。

属性节点
属性节点用来对元素做出更具体的描述。例如，几乎所有的元素都有一个title属性，而我们可以利用这个属性对包含在元素里的东西做出准确的描述：
<p title="a gentle reminder">Don't forget to buy this stuff.</p>
在DOM中，title="a gentle reminder"是一个属性节点，因为属性节点总是被放在起始标签里，所以属性节点总是被包含再元素节点中.并非所有的元素都包含着属性，但所有的属性都被元素包含。

<此处应该插入图片DOM>

获取元素
有3种DOM方法可获取元素节点，分别是通过元素ID, 通过标签名字和通过类名字还获取。
1. getElementById
这个方法将返回一个与那个有着给定id属性值得元素节点对应的对象
document.getElementById(id) id要放在双引号或单引号内
eg:
document.getElementById("purchases")
这个调用将返回一个对象，这个对象对应着document对象里的一个独一无二的元素，那个元素的HTML属性值是purchases。你可以用typeof操作来验证这一点。typeof操作符可以告诉我们它的操作数是一个字符串，数值，函数，布尔值还是对象。
把<script>
alert(typeof document.getElementById("purchases"))；
</script>
放在</body>结束标签之前
在浏览器上回报告document.getElementById("purchases")是一个Object
事实上，文档中的每一个元素都是一个对象。利用DOM提供的方法能得到任何一个对象。一般来说，用不着为文档里的每一个元素都定义一个独一无二的id值，DOM提供了另一个方法来获取那些没有id属性的对象。

2.getElementsByTagName
getElementsByTagName方法返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素。类似于getElementById，这个方法也是只有一个参数的函数，它的参数是标签的名字：
element.getElementsByTagName(tag)
它与getElementById方法有着许多相似之处，但它返回的是一个数组，在编写脚本的时候千万别弄混了
eg：
document.getElementsByTagName("li")
这个调用将返回一个对象数组，每个对象分别对应着document对象中的一个列表项元素。我们可以用length属性查出这个数组中的元素个数。
把alert()语句替换成
alert(document.getElementsByTagName("li").length)
你会看到这份示例文档里的列表项元素的个数：3。
getElementsByTagName允许把一个通配符作为它的参数，这就意味着文档里的每个元素都将在这个函数所返回的数组里占有一席之地。通配符("*")必须放在引号内，这是为了让通配符和乘号有区分，如果你想知道某份文档里总共有多少个元素节点：alert(document.getElementsByTagName("*").length)

还可以把getElementById和getElementsByTagName结合起来使用
如果想知道id是purchases的元素包含着多少个列表项，必须通过一个更具体的对象去调用这个方法
var shopping = document.getElementById("purchases");
var items = shopping.getElementsByTagName("*");
items数组将值包含id属性是purchases的无序清单里的元素。具体到这个例子items数组的长度刚好与这份文档里的列表项元素的总和相等。
alert(items.length)

3.getElementsByClassName
这个方法让我们通过class属性中的类名来访问元素。也只接受一个参数
getElementsByTagName (class)
与getElementsByTagName类似，都是一个具有相同类名的元素的数组。
document.getElementsByTagName ("sale"）返回的就是一个数组，其中包含类名为“sale”的所有元素
使用这个方法还可以找到那些带有多个类名的元素。要指定多个类名，只要在字符串参数中用空格分割类名即可。例如
alert(document.getElementsByTagName (" important sale"）.length)
不仅类名的实际顺序不重要，就算元素还带有更多类名也没有关系
都可以组合使用

var shopping = document.getElementById("purchases");
var sales = shopping.getElementsByClassName("sale");

只是盘点：
@一份文档就是一颗节点树
@节点分为不同的类型：元素节点，属性节点和文本节点。
@getElementById将返回一个对象，改对象对应着文档里的一个特定的元素节点。
@getElementsByTagName和getElementsByClassName将返回一个对象数组，它们分别对应着文档里的一组特定的元素节点。
@每个节点都是一个对象

DOM的角度：

获取和设置属性
得到需要的元素以后，我们就可以设法获取和更改它的各个属性getAttribute()和setAttribute ()

getAttribute
getAttribute是一个函数。它只有一个参数---你打算查询的属性的名字:
object.getAttribute(attribute)
与前面我们介绍的方法不同，它不属于document对象，所以不能通过document 对象调用。它只能通过元素节点对象调用。例如可以与getElementsByTagName方法合用：
获取每个<p>元素的title属性，如下：
var paras = document.getElementsByTagName("p");
for(var i=0;i<paras.length;i++){
alert(paras[i].getAttribute("title"))；
}
放入后会在web浏览器上显示“a gentle reminder” 的alert对话框如果没有title属性会弹出null

setAttribute
它允许我们对属性节点的值做出修改，也只用于元素节点
object.setAttribute(attribute,value)

var shopping = document.getElemrntById("purchases");
shopping.setAttribute("title","a list of goods");
修改后，源代码没有发生变化：DOM对页面内容进行刷新却不需要在浏览器里刷新页面。

小结：
介绍了5个方法。
DOM还提供许多其他的属性和方法，如nodeName , nodeValue , childNodes , nextSibling 和 parentNode等

阅读全文

0 0