javascript很好很强大-->(3)javascript 操作dom

本来第三篇就想直接进入jQuery源代码的.
可是在看的过程中觉的javascript 操作dom实在太重要了.
所以就在这里先过一遍dom. 同时也方便以后如果什么忘记了也好找.

使用ie浏览器的同志们,下载一个iedom插件装下吧. 在本文中你也将看到它的伟大用处
iedom下载 我已经上传了这个插件.

document表示文档.是属于window对象.
我们可以用window.document ,但通常window通常省略.

1.document.getElementById(id)    返回id等于指定值的element

<div id="div1">div1</div>
>

运行结果:使div1显示为红色

2.document.getElementsByTagName(tagName) 返回一个包含所有的标签名等于某个指定值的elementList

<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>

3.document.createElement(tagName) 创建一个element如<div></div>
   document.createTextNode(string) 创建包含文本text的textNode (就是一段文本了)
   Node.appendChild(node) 将node添加到childNodes的末尾

<div id="div1">div1</div>
>

创建elemUi:<ul></ul>
创建elemLi:<li></li>
创建文本elemLiText:li文本
将elemLiText添加elemLi中
将elemLi添加到elemUi中
将elemUi添加到>从图中你已经看到了iedom的伟大作用了吧.
接下来我不再截图运行结果了.我直接用html表示.

4.Node.removeChild(node) 从childNodes中删除node

<div id="div1">
    <ul>ul1</ul>
    <ul>ul2</ul>
</div>
>

运行结果:<div >
                    <ul>ul2</ul>
             </div>
说明把<ul>ul1</ul>给成功先移除了.

5.Node.replaceChild(newNode,oldNode) 替换 使用new替换old

<div id="div1">
    <ul>ul1</ul>
    <ul>ul2</ul>
</div>

运行结果:<div >
                     <ul>ul3</ul>
                     <ul>ul2</ul>
             </div>
6:Node.insertBefore(newNode,oldNode) 插到之前 把new插到old之前

<div id="div1">
    <ul>ul1</ul>
    <ul>ul2</ul>
</div>

运行结果:<div >
                    <ul>ul3</ul>
                    <ul>ul1</ul>
                    <ul>ul2</ul>
            </div>
7.nodeName,nodeValue,nodeType
    元素节点 
        如:<div></div>就属于元素节点
        nodeName为DIV(即它的标签)
        nodeValue为null
        nodeType为1(即所有元素节点的nodeType都为1)
    属性节点
        如:<div ></div>其中的id和align都属于属性节点
        以align为例
            nodeName为align
            nodeValue为value
            nodeType为2
    文本节点
        如:<div >文本</div>其中的 (文本) 就是文本节点
            nodeName为#text
            nodeValue为文本
            nodeType为3
     注释节点
        如:<!--注释-->
            nodeType为8
     文档节点
        即:document
            nodeName为#document
            nodeValue为null
            nodeType为9

元素结点
<div id="div1"></div>
属性结点
<div id="div2" align="center"></div>
文本结点
<div id="div3">文本</div>

运行结果:上面绿色的注释部份便对应输出

顺便说下.访问attribute的几种方法
var elemDiv2 = document.getElementById("div2");
第一种:
    var elemDiv2Attr = elemDiv2.attributes.getNamedItem("align");
    然后可以使用 属性的 nodeName,nodeValue,nodeType
第二种
    getAttribute(name) 等于attributes.getNamedItem(name).value;
    setAttribute(name,newvalue) 等于attribute.getNamedItem(name).value=newvalue;
    removeAttribute(name) 等于attribute.removeNamedItem(name)。