JavaScript（1）

来源：互联网发布：c语言长整型定义编辑：程序博客网时间：2024/05/24 02:45

1.getElementById

DOM是一棵树，节点树。元素节点、文本节点、属性节点。
例子：

<p id="text">This is text<p>

其中p是元素节点，id是属性节点，”This is text”是文本节点。文本节点总是被包含在元素节点的内部，但并非所有的元素节点都包含有文本节点。属性节点总是被包含在元素节点当中，因为常常被放在起始标签中。

js区别字母的大小写，所以需要注意getElementById不能够携程GetElementById或者是其他错误的形式。
测试实例：

<!DOCTYPE html><html lang="en">    <head>        <meta charset="utf-8">        <link href="recipe.css" type="text/css" rel="stylesheet" media="screen"/>        <script type="text/javascript" src="test.js"></script>        <link href="pictures/favicon.ico" type="image/gif" rel="shortcut icon" />    </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>Cheeese</li>            <li>Milk</li>        </ul>    </body></html>

alert(typeof document.getElementById("purchases"));

2.getElementsByTagName

getElementById返回的是一个对象。getElementByTagName返回的是一个对象数组

注：当直接在js文件中打代码如下：

alert(document.getElementsByTagName("li").length);

输出的结果是0！而不是3
但是当代码为：

 window.onload=function() {    alert(document.getElementsByTagName("li").length);}

输出的结果为3！

window.onload=function() {    alert(document.getElementsByTagName("li").length);    var items = document.getElementsByTagName("li");    for (var i = 0; i < items.length; ++i) {        alert(typeof items[i]);    }}

alert(document.getElementsByTagName("*").length);//通配符得到所有的元素节点的数目

3.getAttribute()

window.onload=function() {    var items = document.getElementsByTagName("p");    for (var i = 0; i < items.length; ++i) {        alert(items[i].getAttribute("title"));    }}

注：getAttribute()方法不能够通过document对象进行调用，只能够通过一个元素节点对象进行调用。可以与前面学习的getElementByTagName结合使用，注意如果属性值为空值的话，返回的结果是null。

window.onload=function() {    var items = document.getElementsByTagName("p");    for (var i = 0; i < items.length; ++i) {        var title_text = items[i].getAttribute("title");        if (title_text) alert(title_text);    }}

4.setAttribute()方法

object.setAttribute(name, value);

window.onload=function() {    var shopping = document.getElementById("purchases");    alert(shopping.getAttribute("title"));    shopping.setAttribute("title", "a list of goods");    alert(shopping.getAttribute("title"));}

注意如果是使用getElementsByTagName的话，即使只有一个元素节点，但是因为返回的是一个对象数组，所以也需要使用items[0].getAttribute(name);而不能直接使用items.getAttribute(name).

另外需要注意的是虽然我们看到的alert的title的结果已经改变，但是实际文档中的title并没有改变
“`

总结：

（1）DOM是一棵节点树
（2）getElementById返回的是一个对象。该对象对应着文档里一个特定的元素节点
（3）getElementsByTagName返回的是一个对象数组。
（4）每个节点都是一个对象。
（5）getAttribute()方法和setAttribute()方法使用元素节点进行调用。

0 0