• DOM 基础


    1.DOM 的4个基本接口

      Document  Node  NodeList  NamedNodeMap

    2.DOM 基本对象

      (1)Document 对象

      (2)Node 对象

        nodeType 属性返回节点的类型:Element(1)、Attr(2)、Text(3)、Comment(8)、Document(9)、DocumentFragment(11)

      (3)NodeList 对象

      (4)Elment 对象

      (5)Attr 对象

    3.判断文本是否空格的方法:

        if(node.nodeType == 3 && !/\s/.test(node.nodeValue)){...}

    4.DOM操作综合实例。

      本案例中,要实现添加和删除分类信息,主要用到创建节点、插入节点、删除节点、设置元素节点属性等操作。运行效果及代码如下。

     1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
     2 <html>
     3   <head>
     4     <title>domdemo</title>
     5     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     6     <script language="javascript" type="text/javascript">
     7         var id = 0;
     8         function addSort(){
     9             var txtInput = document.getElementById("txt");
    10             if(txtInput.value == ""){
    11                 alert("请输入分类名称!");
    12                 txtInput.focus();
    13                 return;
    14             }
    15             var row = document.createElement("tr");
    16             var rowId = id;
    17             row.setAttribute("id",rowId);
    18             row.bgColor="#99FF99";
    19             var cell = document.createElement("td");
    20             cell.bgColor="#6699CC";
    21             var txtNode = document.createTextNode(txtInput.value);
    22             cell.appendChild(txtNode);
    23             row.appendChild(cell);
    24             
    25             var deleteButton = document.createElement("input");
    26             deleteButton.setAttribute("type","button");
    27             deleteButton.setAttribute("value","删  除");
    28             deleteButton.onclick = function(){deleteSort(rowId)};
    29             cell = document.createElement("td");
    30             cell.appendChild(deleteButton);
    31             row.appendChild(cell);
    32             
    33             document.getElementById("sortList").appendChild(row);
    34             txtInput.value = "";
    35             
    36             id++;
    37         }
    38         
    39         function deleteSort(id){
    40             if(null != id){
    41                 var rowToDelete = document.getElementById(id);
    42                 var sortList = document.getElementById("sortList");
    43                 sortList.removeChild(rowToDelete);
    44             }
    45         }
    46     </script>
    47   </head>
    48   
    49   <body>
    50       <table border="1" width="80%" align="center" bgColor="#99ccff">
    51           <tbody>
    52           <tr>
    53               <td colspan="3" align="center"><b>分类管理</b></td>
    54           </tr>
    55           <tr>
    56               <td>请输入分类名称:</td>
    57               <td><input id="txt" type="text" size="40"/></td>
    58               <td><input id="addBtn" type="button" value="添加" onclick="addSort()"/></td>
    59           </tr>
    60           <tr>
    61               <td colspan="3" align="center"><b>已添加的分类</b></td>
    62           </tr>
    63           </tbody>
    64       </table>
    65       <table border="1" align="center" width="80%">
    66           <tr height="30">
    67               <td width="80%">分类名称</td>
    68               <td>操作</td>
    69           </tr>
    70           <tbody id="sortList"></tbody>
    71       </table>
    72   </body>
    73 </html>
  • 相关阅读:
    iscroll中使用input框的话是导致无法选中input框
    JS中setInterval()和clearInterval()的使用以及注意事项
    连接oracle出现的问题以及解决办法
    Oracle数据库数据显示乱码问题解决方法。
    Android4.4以上Uri转换成绝对路径的工具类
    安卓,调用相机并适配6.0后
    问题-解决
    ORACLE相关
    PL/SQL表结构/数据的导出
    springMVC笔记
  • 原文地址:https://www.cnblogs.com/lihuiyy/p/2574813.html
Copyright © 2020-2023  润新知