js学习—DOM元素

来源：互联网发布：c语言教材谭浩强 pdf 编辑：程序博客网时间：2024/04/30 13:07

认识DOM：

文档对象模型DOM定义访问和处理HTML文档的标准方法。DOM将HTML文档呈现为带有元素，属性和文本的树结构（节点树）

HTML文档可以说由节点构成的集合，DOM节点有：

元素节点：<html>,<body>,<p>等都是元素节点，即标签

文本节点：向用户展示的内容<li>....</li>中的javascript,DOM，CSS等文本

属性节点：元素属性，如<a>标签的链接属性href="http://www.baidu.com"

节点属性：

nodeName 返回一个字符串，其内容是给定节点的名字

nodeType 返回一个整数，这个数值代表给定节点的类型

nodeValue 返回给定节点的当前值

遍历节点树

childNodes 返回一个数组由给定元素节点的子节点构成

firstChild返回第一个节点

lastChild返回最后一个子节点

parenNode 返回一个给定节点的父节点

nextSibling 返回给定节点的下一个子节点

previousSibling返回给定节点的上一个子节点

DOM操作：

createElement(element) 创建一个新的元素节点

createTextNode() 创建一个包含着给定文本的新文本节点

appendChild()指定节点的最后一个子节点列表之后添加一个新的子节点

insertBefore()将一个给定节点插入到一个给定元素节点的给定子节点的前面

removeChild()从一个给定元素中删除一个子节点

replaceChild()把一个给定父元素里的一个子节点替换为另一个节点

例子：操作表格

<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<script type="text/javascript">
   window.onload = function(){
       Highlight();
   }
   function addOne(obj){
        var tbody = document.getElementById('table').lastChild;
       var tr = document.createElement('tr');

       var td = document.createElement("td");
       td.innerHTML = "<input type='text'/>";
       tr.appendChild(td);

       td = document.createElement("td");
       td.innerHTML = "<input type='text'/>";
       tr.appendChild(td);

       td = document.createElement("td");
       td.innerHTML = "<a href='javascript:;' onclick='deleteRow(this)'>删除</a>";
       tr.appendChild(td);

       tbody.appendChild(tr);
       Highlight();
    }

   function deleteRow(obj){
        var tbody = document.getElementById('table').lastChild;
       var tr = obj.parentNode.parentNode;
       tbody.removeChild(tr);
   }
   function Highlight(){
       var tbody = document.getElementById('table').lastChild;
       trs = tbody.getElementsByTagName('tr');
       for(var i =1;i<trs.length;i++){
           trs[i].onmouseover = function(){
               this.style.backgroundColor ="#f2f2f2";
           }
           trs[i].onmouseout = function(){
               this.style.backgroundColor ="#fff";
           }
       }
   }

</script>
</head>
<body>
       <table border="1" width="50%" id="table">
       <tr>
       <th>学号</th>
       <th>姓名</th>
       <th>操作</th>
       </tr>

       <tr>
       <td>xh001</td>
       <td>王小明</td>
       <td><a href="javascript:;" onclick="deleteRow(this)">删除</a></td>
       </tr>

       <tr>
       <td>xh002</td>
       <td>刘小芳</td>
       <td><a href="javascript:;" onclick="deleteRow(this)">删除</a></td>
       </tr>

       </table>
       <input type="button" value="添加一行" onclick="addOne()" />
</body>
</html>

0 0