javaScript学习笔记 No.1 -- DOM

<DOM title="Document Object Model">
    <DOM中的D>
        既是HTML中的内容，包括文本、图片、表格、表单及其属性（包括CSS）
    </DOM中的D> 
    <DOM中的O>
        对象，东西。将Document实物化
    </DOM中的O>
    <DOM中的M>
        模型，或地图（Map），Document实物化得到的Object的结构图。理解为family tree最佳，应用此树来锁定HTML中的节点从而进行操作
        <节点 title="Node">
            <元素节点 title="element node">
                就是组成HTML的基本元素，如<p><br><img>等标签元素，一般认为元素节点是构成HTML的基本元素
                其实在DOM中，元素节点可分为 文本节点 和 属性节点
            </元素节点>
            <文本节点>
                <p>这里是文本节点</p>
            </文本节点>
            <属性节点>
                <p title="a dog">Pat</p>   <!--类似于（title="a dog"）的是元素节点-->
            </属性节点>
            并非所有的元素节点都包含属性节点，但是属性节点一定是包含在元素节点里
            注意：虽然这三者有包含关系，但是在DOM中都叫节点，是同一类东西
        </节点>
        <getElementById>
            getElementById()方法：这是与document对象相关联的函数。顾名思义，根据元素节点的Id属性得到该元素节点，返回一个对象引用
            <example>
                document.getElementById('purchases');//得到Id为‘purchases’的元素节点，如：<p id="purchases">...</p>
            </example>
        </getElementById>
        <getElementsByTagName>
            getElementsByTagName()方法：与getElementById()相似，只不过TagName（标签名）通常会出现很多次，会查找到多个Elements
            返回一个包含对象引用的数组
            <example>
                var items = document.getELementsByTagName('p'); //将包含引用的数组传给items
                alert(items.length); //array.length ，得到数组长度
                for (key in items){   //类似于PHP的foreach，遍历数组很方便
                    alert( typeof items[key]);  //typeof： 节点的类型，会看到满眼的Object，即每个元素都是一个对象
                }
            </example>
        </getELementsByTagName>
    </DOM中的M>
    <小节>
        1.一份文档就是一个节点家族树
        2.节点分为不同的三种类型
        3.getElementById() 返回一个对象引用，对应文档里的一个特定的元素节点（element node）
        4.getElementsByTagName() 返回一个对象引用的数组，对应文档里的一些特定的元素节点
        5.这些节点都是对象 
    </小节>
    <还有两个方法>
        getAttribute() 与 setAttribute() ：得到一个节点的属性值 与 设置/修改一个节点的属性值
        不同于上面的两个方法，这两个方法不是document的方法，而是与对象关联的方法
        不能通过docuemnt.来调用，要通过某一对象来调用
        <example>
            var paras = document.getElementsByTagName('p');
            for (key in paras){
                var title_text = paras[key].getAttribute('title'); //输出<p>标签的title的值，如果有的<p>不含title属性，则返回NULL
                if (!title_text) { //如果为空的话
                    paras[key].setAttribute('title', 'New title comes up'); //设置title属性
                    title_text = paras[key].getAttribute('title');
                }
                alert(title_text);
            }
        </example>
    </还有两个方法>
</DOM>