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.改
改就很简单了，直接获得该节点，再改他的属性，值等！