DOM

DOM document object model 文本对象模型

节点： 节点数。
节点之间的关系：
父子关系：父节点 子节点
兄弟关系：兄弟节点
节点种类：
常见节点：元素节点，文本节点 属性节点
注：在DOM3中，属性节点不在是节点
nodeNome 节点名字
nodeType 节点类型(1元素 2属性 3文本)

集合： 索引

Nodelist length 元素个数 从0开始
元素节点属性：
ChildNodes 元素的 直接孩子节点(包含元素点和文本点)
Firstchild 第一个
Lastchild 最后一个
ParentNode 父节点
PreviousSbling 上一个兄弟节点
NextSbling 下一个兄弟节点
Children 直接后代的元素节点

document对象

        属性：
            body
            title       标题
            URL         地址、链接
            forms       表单元素
            links       超链接
            imgs        图片        

        方法：
            write()
            根据ID 找元素 
            getElementById(id)  
                若找到了        返回指定节点对象
                找不到          返回null

案例

document.title=‘新的标题’;

var len=document.links.length;//获取所有的超链接个数

    document.links[1].innerHTML='搜狐';

    document.links[len-1].innerHTML='京东方';

     document.images[1].src='images/4.jpg';

     document.write("<div>你好</div>");
    for(var i=0;i<3;i++){
        document.write('hello<br>');
        // document.writeln('hello');
     }

DOM中属性的操作：

            1）属性值的修改
                obj.属性名=值;
            2)属性值的获取
                obj.属性名

        属性映射表
            HTML            DOM

            src                src
            alt                alt
            type               type
            title              title
            class              className
            for                htmlFor
            ...                 ...

案例

<div class="one" id="box">hello world</div>
<img src="images/1.jpg" alt="" id="pic"><br>
<label for="pwd" id="lab">姓名：</label><input type="text" id="username"><br>
<label for="pwd">密码：</label><input type="text" id="pwd">


<script>
    var pic=document.getElementById('pic');
    pic.src='images/2.jpg';//修改img的src属性
    pic.alt='我是新来的';
    pic.title='我是标题';


    var o=document.getElementById('box');
    o.className='two';


    var lab=document.getElementById('lab');
    lab.htmlFor='username';
</script>