DOM编程

@节点及其类型：

　　1.元素节点

　　2.属性节点：元素的属性，可以直接通过属性的方式来操作

　　3.文本节点：是元素节点的子节点

@在HTML文档的什么位置编写js代码？

　　1.直接在HTML页面中书写。

　　<button id="button" onclick="alert('hello world');">click me</button>

　　缺点：js于html强耦合，不利于维护，click函数可能会很复杂。

　　2.一般地，不能再body节点之前来直接获取body内的节点，因为此时HTML还没有加载完成，获取不到指定的节点。

　　3.可以在整个HTML文档的最后面编写类似代码，但这不符合习惯

　　4.一般的，在body之前编写js代码，可利用window.onload事件。该事件在HTML加载完触发。

@JavaScript的helloworld

<script type="text/javascript">
//当整个HTML文档加载完后出发window.onload事件
//事件触发时，执行后面function里面的函数
    window.onload=function(){
        //获取所有的button节点，并取得第一个元素
        var btn = document.getElementsByTagName("button")[0];
        //为button节点的onclick事件赋值，当点击button 时执行函数体
        btn.onclick=function(){
            alert("hello world");
        }
    }
</script>
<button>Click ME</button>

helloworld

@获取元素节点

　　1.document.getElementById:根据id属性获取对应的单个节点

　　2.document.getElementByTagName:根据标签名获取指定的节点

　　3.document.getElementsByName:根据节点的name属性获取符合

<script type="text/javascript">
    //获取指定的节点
    window.onload=function(){
        //在编写HTML文档时需确定Id属性是唯一的
        var bjNode = document.getElementById("bj");
        alert(bjNode);
        //获取所有的li,该方法为Node接口方法，即任何一个节点都有这个方法
        var liNode = document.getElementsByTagName("li");
        alert(liNode.length);
    
        var cityNode = document.getElementById("city");
        var cityNodes = cityNode.getElementsByTagName("li")
        alert(cityNodes.length);
        //根据HTML文档元素name属性名来获取指定节点的集合
        //若HTML文档节点没有name属性时，则getElementByName方法对IE无效
        var genderNode = document.getElementsByName("gender");
        alert(genderNode.length);
    }
</script>
<p>城市</p>
    <ul id="city">
        <li id="bj">北京</li>
        <li>上海</li>
        <li>东京</li>
        <li>首尔</li>
    </ul>
    <br/>
    <p>游戏</p>
    <ul id="game">
        <li id="rl">红警</li>
        <li>施主</li>
        <li>极品飞车</li>
        <li>魔兽</li>
    </ul>
    gender:
    <input type="radio" name="gender" value="male"/>male
    <input type="radio" name="gender" value="female"/>female

get Element

@获取属性节点

　　1.可以直接通过cityNode.id这样的方式来获取和设置属性节点的值。

　　2.通过元素节点的getAttributeNode方法来获取属性节点，然后再通过nodeValue方法来读写属性值。

<script type="text/javascript">
    window.onload=function(){
        //属性节点即为某一指定的元素的属性
        //先获取指定的元素节点
        var nameNode = document.getElementById("name");
        //在读取指定属性的值
        alert(nameNode.value);
        //设置指定属性的值
        nameNode.value="button";
    }
</script>
name:<input type="text" id="name" name="username" value="Nyan"/>

attribute node

@获取元素节点的子节点

　　1.childNodes属性获取全部的子节点：火狐和IE的实现方式有区别

　　2.firstChild,lastChild

　　3.节点的属性-文本节点（一定是元素节点的子节点）

<script type="text/javascript">
    window.onload=function(){
        //获取#city节点的所有子节点
        var cityNode = document.getElementById("city");
        //利用元素节点的childNodes,但该方法不实用
        alert(cityNode.childNodes.length);
        //获取city节点的所有li子节点
        var cityNodes = cityNode.getElementsByTagName("li");
        alert(cityNodes.length);
        //通过操作文本节点的nodeValue属性来读写文本节点的值
        var bjNode = document.getElementById("bj");
        var bjTextNode = bjNode.firstChild;
        alert(bjTextNode.nodeValue);
    }
</script>
<p>城市</p>
    <ul id="city">
        <li id="bj">北京</li>
        <li>上海</li>
        <li>东京</li>
        <li>首尔</li><!-- li到下一个</ul>是文本节点 -->
    </ul>
    <br/>

Child_TextNode

@节点的属性（nodeName,nodeValue,nodeType）