JS的增删改查

1.查

 <script type="text/javascript">
   /**
    * 查找  已经在html代码中存在的元素
    */
   /**
    * document.getElementById(elementId)
    * 作用 查找元素节点
    * 参数   标签上的id属性
    * 返回  唯一的元素节点对象
    */
   var divNode = document.getElementById("contentId");
   //给元素标签添加文本信息  如果元素标签有子标签将会被覆盖掉
   divNode.innerText = "这个是添加文本信息";
   /**
    * document.getElementsByName("")
    * 作用  通过name属性获取元素节点
    * 参数  name属性的值
    * 返回  素有name属性值相同的元素节点的数组
    *  注意:只有表单才有name属性
    */
   var inputArr = document.getElementsByName("userName");
   /**
    * document.getElementsByTagName(tagname);
    * 作用 通过标签名获取元素节点
    * 参数 标签名(就是Html标签的名字)
    * 返回 页面上所有标签名称相同的元素节点的数组
    */
   var nodeList = document.getElementsByTagName("input");

 </script>

2.增

 <script type="text/javascript">
   /**
    *1.创建元素节点
    *2.创建属性节点
    *3.创建文本节点
    */
   /**
    * 函数:createElement(tagName)
    * 作用 创建标签
    * 参数tagName 标签名
    * 返回值  返回这个元素节点的对象
    */
   var divNode = document.createElement("div");
   /**
    * 创建属性
    *  createAttribute(attrName);
    *  作用 创建属性标签
    *  参数 (属性)参考html标签属性
    *  return  属性对象
    */
   var idAttr = document.createAttribute("id");
   /**
    * idAttr.nodeValue
    * 设置属性的值
    * 相当于标签属性的  id="div"
    */
   var idValue = idAttr.nodeValue;
   idValue = "div";
   /**
    *  对象.setAttributeNode(newAttr)
    *  作用:给元素节点设置属性节点
    *  参数  属性节点对象
    *  返回  元素节点的属性节点对象
    */
   divNode.setAttributeNode(idAttr);
   /**
    * document.createTextNode(data)
    * 作用创建文本节点
    * 参数 文本信息
    * 返回 文本节点的对象
    *
    */
   var textNode = document.createTextNode("标题");
   /**
    * 把文本节点对象添加到元素节点中
    */
   divNode.appendChild(textNode);
   /**
    * 把元素节点添加到body节点中
    */
   document.body.appendChild(divNode);
   /**
    * 第一步要添加的元素节点对象
    * 第二步给元素节点添加属性
    *    2.1> 创建属性节点对象
    *    2.2> 设置属性节点值
    *    2.3> 给元素节点添加属性节点
    * 第三步 给元素添加文本信息
    *     3.1>创建文本节点对象
    *     3.2>把文本信息节点对象添加到元素节点中
    * 第四步 把元素节点添加到 body
    */
 </script>

3.删

 <script type="text/javascript">

   /**
    * 通过父类元素节点删除子节点
    * 通过要删除的元素节点直接删除
    */
   var parentNode = document.getElementById("divId");
   //  var h2Node = document.getElementById("h2Id");
   /**
    * 删除元素节点的子元素
    * 参数 要删除的子元素节点的对象
    * 返回  被删除元素节点的对象
    */
 //  var node = parentNode.removeChild(h2Node);

   // 方法2
   parentNode.remove();

 </script>

4.改

改就很简单了，直接获得该节点，再改他的属性，值等！