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>
<script type="text/javascript">
    document.getElementById("div1").style.color="red";
</script>

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

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

<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<script type="text/javascript">
    document.getElementsByTagName("div")[0].style.color="red";
    document.getElementsByTagName("div")[1].style.color="red";
    document.getElementsByTagName("div")[2].style.color="red";
</script>

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

<div id="div1">div1</div>
<script type="text/javascript">
    var elemUi = document.createElement("ul");
    var elemLi = document.createElement("li");
    var elemLiText = document.createTextNode("li文本");
    elemUi.appendChild(elemLi);
    elemLi.appendChild(elemLiText);
    
    document.getElementById("div1").appendChild(elemUi); 
</script>

创建elemUi:<ul></ul>
创建elemLi:<li></li>
创建文本elemLiText:li文本
将elemLiText添加elemLi中
将elemLi添加到elemUi中
将elemUi添加到id="div1"的元素中

恩不错,成功了.可惜啊.我们怎么才能知道我们最终的html是什么样的啊?天啊.给我一个工具吧:iedom插件

从图中你已经看到了iedom的伟大作用了吧.
接下来我不再截图运行结果了.我直接用html表示.

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

<div id="div1">
    <ul>ul1</ul>
    <ul>ul2</ul>
</div>
<script type="text/javascript">
    var elemUl = document.body.getElementsByTagName("ul")[0];
    elemUl.parentNode.removeChild(elemUl);
</script>

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

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

<div id="div1">
    <ul>ul1</ul>
    <ul>ul2</ul>
</div>
<script type="text/javascript">
    var elemUl = document.body.getElementsByTagName("ul")[0];
    
    var elemUl3 = document.createElement("ul");
    var elemUl3Text = document.createTextNode("ul3");
    elemUl3.appendChild(elemUl3Text);
    
    elemUl.parentNode.replaceChild(elemUl3, elemUl);
</script>

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

<div id="div1">
    <ul>ul1</ul>
    <ul>ul2</ul>
</div>
<script type="text/javascript">
    var elemUl = document.body.getElementsByTagName("ul")[0];
    
    var elemUl3 = document.createElement("ul");
    var elemUl3Text = document.createTextNode("ul3");
    elemUl3.appendChild(elemUl3Text);
    
    elemUl.parentNode.insertBefore(elemUl3, elemUl);
</script>

运行结果:<div id="div1">
                    <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 id="div2" align="center"></div>其中的id和align都属于属性节点
        以align为例
            nodeName为align
            nodeValue为value
            nodeType为2
    文本节点
        如:<div id="div3">文本</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>
<script type="text/javascript">
    var elemDiv1 = document.getElementById("div1");
    document.writeln(elemDiv1.nodeName+","+elemDiv1.nodeValue+","+elemDiv1.nodeType);
    //DIV,null,1 
    
    var elemDiv2 = document.getElementById("div2");
    var elemDiv2Attr = elemDiv2.attributes.getNamedItem("align");
    document.writeln(elemDiv2Attr.nodeName+","+elemDiv2Attr.nodeValue+","+elemDiv2Attr.nodeType);
    //align,center,2 
     
    var elemDiv3 = document.getElementById("div3");
    var text=elemDiv3.childNodes[0]; 
    document.writeln(text.nodeName+","+text.nodeValue+","+text.nodeType);
    //#text,文本,3 
    
    document.writeln(document.nodeName+","+document.nodeValue+","+document.nodeType);
    //#document,null,9   
</script>

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

顺便说下.访问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)。