JS的增删改查

1.查

 1 <script type="text/javascript">
 2   /**
 3    * 查找  已经在html代码中存在的元素
 4    */
 5   /**
 6    * document.getElementById(elementId)
 7    * 作用 查找元素节点
 8    * 参数   标签上的id属性
 9    * 返回  唯一的元素节点对象
10    */
11   var divNode = document.getElementById("contentId");
12   //给元素标签添加文本信息  如果元素标签有子标签将会被覆盖掉
13   divNode.innerText = "这个是添加文本信息";
14   /**
15    * document.getElementsByName("")
16    * 作用  通过name属性获取元素节点
17    * 参数  name属性的值
18    * 返回  素有name属性值相同的元素节点的数组
19    *  注意:只有表单才有name属性
20    */
21   var inputArr = document.getElementsByName("userName");
22   /**
23    * document.getElementsByTagName(tagname);
24    * 作用 通过标签名获取元素节点
25    * 参数 标签名(就是Html标签的名字)
26    * 返回 页面上所有标签名称相同的元素节点的数组
27    */
28   var nodeList = document.getElementsByTagName("input");
29 
30 </script>

2.增

 1 <script type="text/javascript">
 2   /**
 3    *1.创建元素节点
 4    *2.创建属性节点
 5    *3.创建文本节点
 6    */
 7   /**
 8    * 函数:createElement(tagName)
 9    * 作用 创建标签
10    * 参数tagName 标签名
11    * 返回值  返回这个元素节点的对象
12    */
13   var divNode = document.createElement("div");
14   /**
15    * 创建属性
16    *  createAttribute(attrName);
17    *  作用 创建属性标签
18    *  参数 (属性)参考html标签属性
19    *  return  属性对象
20    */
21   var idAttr = document.createAttribute("id");
22   /**
23    * idAttr.nodeValue
24    * 设置属性的值
25    * 相当于标签属性的  id="div"
26    */
27   var idValue = idAttr.nodeValue;
28   idValue = "div";
29   /**
30    *  对象.setAttributeNode(newAttr)
31    *  作用:给元素节点设置属性节点
32    *  参数  属性节点对象
33    *  返回  元素节点的属性节点对象
34    */
35   divNode.setAttributeNode(idAttr);
36   /**
37    * document.createTextNode(data)
38    * 作用创建文本节点
39    * 参数 文本信息
40    * 返回 文本节点的对象
41    *
42    */
43   var textNode = document.createTextNode("标题");
44   /**
45    * 把文本节点对象添加到元素节点中
46    */
47   divNode.appendChild(textNode);
48   /**
49    * 把元素节点添加到body节点中
50    */
51   document.body.appendChild(divNode);
52   /**
53    * 第一步要添加的元素节点对象
54    * 第二步给元素节点添加属性
55    *    2.1> 创建属性节点对象
56    *    2.2> 设置属性节点值
57    *    2.3> 给元素节点添加属性节点
58    * 第三步 给元素添加文本信息
59    *     3.1>创建文本节点对象
60    *     3.2>把文本信息节点对象添加到元素节点中
61    * 第四步 把元素节点添加到 body
62    */
63 </script>

3.删

 1 <script type="text/javascript">
 2 
 3   /**
 4    * 通过父类元素节点删除子节点
 5    * 通过要删除的元素节点直接删除
 6    */
 7   var parentNode = document.getElementById("divId");
 8   //  var h2Node = document.getElementById("h2Id");
 9   /**
10    * 删除元素节点的子元素
11    * 参数 要删除的子元素节点的对象
12    * 返回  被删除元素节点的对象
13    */
14 //  var node = parentNode.removeChild(h2Node);
15 
16   // 方法2
17   parentNode.remove();
18 
19 </script>

4.改

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

posted @ 2017-05-02 20:07 火星黑洞阅读(1768) 评论(0) 收藏举报

刷新页面返回顶部