（六）文档对象模型（DOM）（上）

来源：互联网发布：舰队collection 知乎编辑：程序博客网时间：2024/04/30 12:07

1.DOM是一个表示和操作文档的标准，全称为“文档对象模型”（Document Object Model）。
2.DOM操作HTML文档

<script type="text/javascript">        var div1 = document.createElement("div");        //创建一个div标记        div1.innerHTML = "<h1>Hello World!</h1>";        //对innerHTML属性直接赋值可以修改这个div中的内容        document.getElementsByTagName("body")[0].appendChild(div1);        //appendChild可以将这个div添加到body中去</script>

3.Element是常见的DOM对象。
通常一个Element对应一个HTML标签，通过这个Element对象的childNodes属性可以访问嵌套在这个Element对象内的子对象，实际上对应于嵌套在标签里的标记、文本和注释。通过getAttribute()来访问这些，通过setAttribute来修改这些子对象，相当于改变HTML中的标记内容。
Document为文档提供了创建和删除节点的方法
4.构造新的节点
createElement()方法创建新的DOM Element节点；createTextNode()创建新Text节点； createAttribute()创建新的属性节点。
5.搜索特定的节点
getElementById()标记唯一的id值，返回对应的DOM节点，如果指定id不存在则返回null；
getElementsByTagName()返回所有相同名称标记的对象的集合，如果为空则返回length为0的空集；
getElementsByName()返回具有相同name属性值的HTML元素。

<!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <title>三个有用的方法</title>    </head>    <body>        <p id = "d1">edazh(id=d1)</p>        <input name = "d2" value = "Hello(name=d2)">        <input name = "d2" value = "World(name=d2)">        <p>JavaScript(tagName=p)</p>        <textarea id = "output" style = "with:420px;height:120px"></textarea><br/><br/>        <button onclick="getById('d1')">getElementById("d1")</button><br/>        <button onclick="getByName('d2')">getElementsByName</button><br/>        <button onclick="getByTagName('p')">getElementsByTagName</button><br/>        <script type="text/JavaScript">            function getById(id){                output.value='';                output.value=document.getElementById(id).outerHTML;                    //getElementById()获得指定id的DOM元素                    //如果指定id的元素不存在，返回的是null            }            function getByName(name){                output.value='';                for(var i=0;i<document.getElementsByName(name).length;i++){                    //getElemetsByName()返回指定名称的DOM集合                    //如果为空则返回一个空集合                    output.innerText+=document.getElementsByName(name)[i].outerHTML;                }            }            function getByTagName(tagName){                output.value='';                for(var i=0;i<document.getElementsByTagName(tagName).length;i++){                    //获取指定类型的标记集合                    //为空返回空集合                    output.innerText+=document.getElementsByTagName(tagName)[i].outerHTML;                }            }        </script>    </body></html>

运行结果：

6.Element接口的getElementsByTagName方法
Element接口的方法使用规则和HTMLDocument接口的同名方法相同，区别是它仅仅在当前节点包含的子节点及其后代中搜索而不是整个页面文档,比如：
e = div1.getElementsByTagName(“div”);
7.Node接口的移动节点
appendChild(node)：可以将一个DOM节点添加为当前元素最后一个child，如果已存在，则移动到新位置。
removeChild(node)：删除当前节点的指定子节点，成功返回被删除的节点，否则抛异常。
replaceChild(newChild,oldChild)：替换指定子节点，成功返回被替换的节点，否则抛异常。

<!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">        <title>移动节点</title>    </head>    <body>        <div id="list">            <li>a-1</li>            <li>b-1</li>        </div><br/>        <input type="text" id="liVal">        <button onclick="_insertNode()">插入</button>        <button onclick="_removeNode()">移除</button>        <button onclick="_replaceNode()">替换第一行</button>        <script type="text/JavaScript">            function _insertNode(){                if(liVal.value!=''){                    //创建一个li元素                    var newNode=document.createElement("li");                    //设置这个元素的innerText                    newNode.innerText=liVal.value;                    //将这个新的节点作为list元素的子节点插入                    list.appendChild(newNode);                }            }            function _removeNode(){                if(liVal.value!=''){                    for(var i=0;i<list.childNodes.length;i++){                        if(list.childNodes[i].innerText==liVal.value){                            list.removeChild(list.childNodes[i]);                        }                    }                }else{                    alert('没有了~！怎么还删除？');                }            }            function _replaceNode(){                if(liVal.value!=''&&list.childNodes.length>0){                    var newNode=document.createElement("li");                    newNode.innerText=liVal.value;                    //将指定节点在list中替换成新的节点                    list.replaceChild(newNode,list.childNodes[0]);                }            }        </script>    </body></html>

8.insertBefore(newNode,oldNode)的用法
讲一个新节点插入到一个子节点之前，如果成功，返回被插入的子节点，失败则抛出异常；第二个参数可以缺省，节点将被插入为最后一个子节点；如果被插入的子节点已存在，会移动此节点到新位置。
var tbody=thetable.lastChild;
tbody.insertBefore(tbody.lastChild,tbody.firstChild);
9.在为表格添加新行的时候，*cloneNode方法比createElement方法快*
10.表格排序

<!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">        <title>表格排序</title>    </head>    <body>        <table id="mytable">            <tr><td>1</td><td>Hello</td></tr>            <tr><td>3</td><td>eda_zh</td></tr>            <tr><td>2</td><td>JavaScript</td></tr>            <tr><td>0</td><td>test</td></tr>        </table>        <button onclick="sortTable(mytable)">Sort</button>        <script type="text/JavaScript">            function $each(collection,closure){                //存放返回结果的数组                var ret=[];                //遍历集合中的每一个元素                for(var i=0;i<collection.length;i++){                    ret.push(closure(collection[i]));                }                return ret;            }            function sortTable(table){                var rows=$each(table.rows,function(x){                    return x;                });                //突然感觉好突兀，这题先抄这吧                rows.sort(function(x,y){                    if(x.childNodes[0].innerText-0>y.childNodes[0].innerText-0){                        return 1;                    }else{                        return -1;                    }                });                //排序过的数组重新添加到table中                $each(rows,function(x){                    x.parentElement.appendChild(x);                    return x;                });            }        </script>    </body></html>

0 0