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








