GVKun编程网logo

JavaScript对Json的增删改属性详解（js对json增删改查）

2

在本文中，我们将给您介绍关于JavaScript对Json的增删改属性详解的详细内容，并且为您解答js对json增删改查的相关问题，此外，我们还将为您提供关于JavaScriptDOM元素增删改步骤详

在本文中，我们将给您介绍关于JavaScript对Json的增删改属性详解的详细内容，并且为您解答js对json增删改查的相关问题，此外，我们还将为您提供关于JavaScript DOM元素增删改步骤详解、javascript json对象操作（基本增删改查）、javascript Xml增删改查(IE下)操作实现代码_javascript技巧、JavaScript 小实例 - 表单输入内容检测，对页面的增删改的知识。

本文目录一览：

JavaScript对Json的增删改属性详解（js对json增删改查）

JavaScript对Json的增删改属性详解（js对json增删改查）

代码：
rush:js;">

以上这篇JavaScript对Json的增删改属性详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持小编。

JavaScript DOM元素增删改步骤详解

JavaScript DOM元素增删改步骤详解

这次给大家带来JavaScript DOM元素增删改步骤详解，JavaScript DOM元素增删改的注意事项有哪些，下面就是实战案例，一起来看一下。

DOM概念

DOM（Document Object Model）：文档对象模型。

通过开发者工具的Elements标签页可以查看

通过开发者工具的Sources标签页也可以观察到整个文档是有一系列节点

整个文档是由一系列节点对象组成的一棵树。

节点（Node）包括元素节点（1）、属性节点（2）、文本节点（3）(1..2..3..代表节点类型)_

var th1= document.getElementById("th1");
alert(th1.nodeType);
alert(th1.nodeName);
alert(th1.nodeValue);
登录后复制

th1代表一个元素节点（nodeType=1），nodeName就是标签名（th），元素节点的nodeValue=null。

var attr1=th1.getAttributeNode("name");
alert(attr1.nodeType);
alert(attr1.nodeName);
alert(attr1.nodeValue);
登录后复制

getAttributeNode方法是获取元素的属性节点，此时输出的节点类型为属性节点（2），节点名称就是属性名（name），节点值就是属性值（sex）

var txtl = th1.firstChild；
alert(txtl.nodeType);
alert(txtl.nodeName);
alert(txtl.nodeValue)
登录后复制

txt1是一个文本节点（3），节点名称固定就是#text，节点值就是文本内容。

获取元素

（1）getElementByid

根据元素的id属性来获取元素，获取到的是一个元素。

（2）getElementsByTagName

根据标签名来获取元素，结果是一个元素集合。

（3）getElementsByClassName

根据class属性来获取元素，结果是一个元素集合。

（4）getElementsByName

根据name属性来获取元素，结果是一个元素集合。

总结：获取元素可以根据标签名获取、也可以根据id、name、class属性来获取。根据id属性获取的结果是一个元素，而其它的获取的是一个集合。

document对象支持以上四种，而element对象仅支持getElementsByTagName和getElementsByClassName。

修改元素

（1）修改内容

function fun(){
  //获取到指定元素
  var p1 = document.getElementById("p1");
  p1.innerText = "我被单击了！";
}
登录后复制

通过.innerText属性可读取或设置标签的内容文本

function fun(){
  //获取到指定元素
  var p1 = document.getElementById("p1");
  p1.innerHTML = "我被单击了！<br>换行了";
}
登录后复制

也可以通过innerHTML属性获取或设置内容文本

俩者的区别：innerHTML会按照HTML规则解析文本，而innerText只是当做普通文本内容。

（1）  修改样式

A．xxx．style.属性名=“值”

B．xxx．classname=“…”(相当于修改了class的属性)

<style>
    .style1{
      color:red;
      font-size:20px;
      text-decoration:underline;
    }
    .style2{
      color:blue;
      font-size:32px;
      text-decoration:line-through;
    }
  </style><p>修改样式测试</p>
<input><input><script>
  var p1 = document.getElementById("p1");
  function style1(){
    p1.className = "style1"
  }
  function style2(){
    p1.className = "style2"
  }
</script>
登录后复制

以上就是JavaScript DOM元素增删改步骤详解的详细内容，更多请关注php中文网其它相关文章！

javascript json对象操作（基本增删改查）

javascript json对象操作（基本增删改查）

/**
 * Json对象操作，增删改查
 *
 * @author 	lellansin
 * @blog 	www.lellansin.com
 * @version 0.1
 * 
 * 解决一些常见的问题
 * get/set 解决获取和设置时，无节点中断的问题
 * create  可以创建多级节点，若存在则覆盖新值
 * delete  删除节点及其子节点
 * print_r 格式化输出对象（调试用）
 * 实例见底部
 */
 
function Json() {
 
}
 
/**
 * 获取Json对象中的某个节点
 * 例如：json.get(Data, ''country'', ''province'', ''city'');
 * 结果则返回 Data[''country''][''province''][''city'']
 * 无则返回false
 */
Json.prototype.get = function(obj, key) {
	var args = this.get.arguments;
	var result = obj;
 
	for (var i = 1; i < args.length; i++) {
		result = result[args[i]];
		if (result === undefined) {
			return false;
		};
	};
	return result;
};
 
/**
 * 设置Json对象中的某个节点
 * 例如：obj.set(data, "ENTRY", "FA_TOKEN_INVALID", 1234);
 * 将 data[''ENTRY''][''FA_TOKEN_INVALID''] 设置为1234
 * 成功true, 失败false
 */
Json.prototype.set = function(obj, key) {
	var args = this.set.arguments;
	if (ergodic_set(obj, args, 1)) {
		return true;
	} else {
		return false;
	}
}
/**
 * 在Json对象中创建节点(若存在则覆盖值)
 * 例如：obj.create(data, ''add'', ''hello'', ''test'', 120);
 * 添加 data[''create''][''hello''][''test''] 节点并设置值为 120
 * 成功true, 失败false
 */
Json.prototype.create = function(obj, key) {
	var args = this.create.arguments;
	if (ergodic_create(obj, args, 1)) {
		return true;
	} else {
		return false;
	}
}
 
/**
 * 在Json对象中删除节点
 * 例如：obj.delete(prods, ''grade'', ''math'');
 * 成功true, 失败false
 */
Json.prototype.delete = function(obj, key) {
	var args = this.delete.arguments;
	if (ergodic_delete(obj, args, 1)) {
		return true;
	} else {
		return false;
	}
}
 
/**
 * 返回Json对象的字符串形式（封装 ECMAScript 库函数）
 */
Json.prototype.getStr = function(obj) {
	return JSON.stringify(obj);
}
 
/**
 * 解析字符串返回Json对象（封装 ECMAScript 库函数）
 */
Json.prototype.getJson = function(str) {
	return JSON.parse(str);
}
 
/**
 * 格式化输出Json对象
 */
Json.prototype.print_r = function(obj) {
	console.log("{")
	ergodic_print(obj, "");
	console.log("}")
}
 
function ergodic_print(obj, indentation) {
	var indent = "	" + indentation;
	if (obj.constructor == Object) {
		for (var p in obj) {
			if (obj[p].constructor == Array || obj[p].constructor == Object) {
				console.log(indent + "[" + p + "] => " + typeof(obj) + "");
				console.log(indent + "{");
				ergodic_print(obj[p], indent);
				console.log(indent + "}");
			} else if (obj[p].constructor == String) {
				console.log(indent + "[" + p + "] => ''" + obj[p] + "''");
			} else {
				console.log(indent + "[" + p + "] => " + obj[p] + "");
			}
		}
	}
}
 
function ergodic_set(obj, args, floor) {
	if (obj.constructor == Object) {
		for (var tmpKey in obj) {
			if (tmpKey == args[floor]) {
				if (floor < args.length - 2) {
					return ergodic_set(obj[tmpKey], args, floor + 1);
				} else {
					// 此时参数floor为倒数第二个，加1值为最后一个
					obj[tmpKey] = args[floor + 1];
					console.log("成功设置，返回true");
					return true;
				}
			}
		}
	}
}
 
function ergodic_create(obj, args, floor) {
	if (obj.constructor == Object) {
		for (var tmpKey in obj) {
			if (tmpKey == args[floor]) {
				if (floor < args.length - 2) {
					return ergodic_create(obj[tmpKey], args, floor + 1);
				} else {
					obj[tmpKey] = args[floor + 1];
					return true;
				}
			}
		}
	}
	// 节点不存在，创建新节点
	if (floor < args.length - 1) {
		var jsonstr = getJsonFormat(args[args.length - 1]);
 
		for (var i = args.length - 2; i > floor; i--) {
			jsonstr = ''{"'' + args[i] + ''":'' + jsonstr + ''}'';
		};
 
		// 使用eval解析第三方Json数据时，可能会执行恶意代码
		// var node = eval(''('' + jsonstr + '')'');
		var node = JSON.parse(jsonstr);
		obj[args[floor]] = node;
		return true;
	}
}
 
function ergodic_delete(obj, args, floor) {
	if (obj.constructor == Object) {
		for (var tmpKey in obj) {
			if (tmpKey == args[floor]) {
				if (floor < args.length - 1) {
					return ergodic_delete(obj[tmpKey], args, floor + 1);
				} else {
					delete obj[tmpKey];
					return true;
				}
			}
		}
	}
}
 
 
function getJsonFormat(param) {
	if (param.constructor == String) {
		return ''"'' + param + ''"'';
	} else {
		return param;
	}
}
 
 
 
/**
 * 使用实例
 */
 
var data = {
	OK: 200,
	FAIL: 500,
	ENTRY: {
		FA_TOKEN_INVALID: 1001,
		FA_TOKEN_EXPIRE: 1002,
		FA_USER_NOT_EXIST: 1003
	},
	GATE: {
		FA_NO_SERVER_AVAILABLE: 2001
	},
	CHAT: {
		FA_CHANNEL_CREATE: 3001,
		FA_CHANNEL_NOT_EXIST: 3002,
		FA_UNKNOWN_CONNECTOR: 3003,
		FA_USER_NOT_ONLINE: 3004
	}
};
 
var json = new Json();
 
console.log("获取Json中节点");
console.log(json.get(data, "OK")); // 200
console.log(json.get(data, "ENTRY", "FA_TOKEN_INVALID")); 	// 1001
console.log(json.get(data, "TEST", "获取没有的节点")); 		// false 没有的节点返回 false
 
console.log("设置Json中节点");
console.log(json.set(data, "ENTRY", "FA_TOKEN_INVALID", 1234));   // true 	设置成功
console.log(json.get(data, "ENTRY", "FA_TOKEN_INVALID")); 		  // 1234  	获取刚设置的节点
console.log(json.set(data, "ENTRY", "测试设置没有的节点", 1234)); // false 	设置失败
 
console.log("创建新的Json节点");
var prods = {
	''name'': ''Alan'',
	''grade'': {
		''Chinese'': 120,
		''math'': 130,
		''competition'': {
			''NOI'': ''First prize''
		}
	}
};
console.log(json.create(prods, ''create'', ''hello'', ''test'', 120)); 	 // true
console.log(json.create(prods, ''create'', ''hello'', ''test2'', ''通过'')); // true
 
console.log("格式化输出节点");
json.print_r(prods);
 
console.log("删除节点");
console.log(json.delete(prods, ''grade'', ''math'')); 			// true
console.log(json.delete(prods, ''grade'', ''competition'')); 	// true
console.log(json.delete(prods, ''grade'', ''删除没有的节点'')); // false
json.print_r(prods);

　　

javascript Xml增删改查(IE下)操作实现代码_javascript技巧

javascript Xml增删改查(IE下)操作实现代码_javascript技巧

html文件：

复制代码 代码如下:




js操作Xml增删改查(IE下)













Xml文件：
复制代码 代码如下:




tree
male


JavaScript 小实例 - 表单输入内容检测，对页面的增删改

JavaScript 小实例 - 表单输入内容检测，对页面的增删改

JavaScript 小实例 - 表单输入内容检测，对页面的增删改

效果体验地址：https://xpwi.github.io/js/JavaScript01/jsForm.html

功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js 简单应用</title>
    <script>
        //欢迎弹出框 默认直接执行
        document.write("<h2 id = ''biaoti''>\n" +
            "    Welcome！\n" +
            "</h2>")

        //添加你好
        function tianji(){
            alert("欢迎来到我的个人网站！")
            document.getElementById("biaoti").append("你好！")
        }

        // 再见提示
        function zaijian() {
            alert("您要走了？下次别来了")
        }
    </script>


    <script>
        //表单验证
        function tishi() {
            // 获取输入的值（通过name)
            var num = document.myform.num.value;
            alert(num);

            // 获取输入的值（通过 id)
            var buben = document.getElementById("buben").value;
            alert(buben);

            // 获取【已选中的】多选框的值
            var xingqu = "";
            for (var i=0;i<document.myform.aihao.length;i++){
                if (document.myform.aihao[i].checked){
                    // 判断是不是最后一个，是的话，不加逗号，不是的话加上逗号
                    if (i == document.myform.aihao.length-1) {
                        xingqu += document.myform.aihao[i].value;
                    }else{
                        xingqu += document.myform.aihao[i].value + ",";
                    }

                }

            }
            alert(xingqu);

        }
    </script>


    <script>
        //确认删除？
        function queren() {
            if (window.confirm("确认删除？")){
                document.getElementById("wenben").innerText = ""
            }
        }

    </script>

    <script>
        //打开新窗口
        function dakai(url){
            window.open(url,"页面标题","width=500, height=300,scrollbars=yes,resizable=no")
        }
    </script>
</head>

<!--onunload 关闭窗口是执行-->
<body onunload="zaijian()">

<!--点击触发添加：你好！-->
<button onclick=tianji()>添加【你好！】</button>
<hr>
<!--表单验证-->
<form action="" method="post" name="myform" onsubmit="tishi()">
    编号：<input type="text" name="num" value="01212"><br>
    姓名：<input type="text" name="username" value="请输入姓名"><br>
    密码：<input type="password" name="pwd" value="请输入密码"><br>
    性别：<input type="radio" name="sex" value="男" checked>男 <input type="radio" name="sex" value="女">女<br>
    部门：
    <select id="buben">
        <option value="技术部">技术部</option>
        <option value="销售部" SELECTED>销售部</option>
        <option value="财务部">财务部</option>
    </select><br>
    兴趣：
    <input type="checkbox" name="aihao" value="游泳">游泳
    <input type="checkbox" name="aihao" value="唱歌">唱歌
    <input type="checkbox" name="aihao" value="编程">编程
    <input type="checkbox" name="aihao" value="博客" checked>博客
    <br>

    说明：<textarea name="shuoming" cols="30" rows="3">
个人博客：cnblogs.com/xpwi
</textarea><br>
    <input type="submit" value="点击【注册】"> <input type="reset" value="重置">


</form>
<hr>
<p id="wenben">
    嘻嘻哈哈猴
</p>
<buttononclick="queren()">点击【删除】</button>

<br>
<hr>

<!--打开小页面-->
<form>
    <p>请选择【小页面】：</p>
    <select name="" onchange="dakai(this.value)">
        <option value="“">请选择：</option>
        <option value="h01Biaodan.html">h01Biaodan.html：注册表单页面</option>
        <option value="h02Js.html">h02Js.html：js 提示框，简单触发事件，写入 DOM</option>
        <option value="h03JsShuchu.html">h03JsShuchu.html：js 提示输入信息，获取输入的信息，判断输入信息</option>
    </select>

</form>
</body>
</html>

今天关于JavaScript对Json的增删改属性详解和js对json增删改查的介绍到此结束，谢谢您的阅读，有关JavaScript DOM元素增删改步骤详解、javascript json对象操作（基本增删改查）、javascript Xml增删改查(IE下)操作实现代码_javascript技巧、JavaScript 小实例 - 表单输入内容检测，对页面的增删改等更多相关知识的信息可以在本站进行查询。

本文标签：

上一篇JS Array创建及concat()split()slice()的使用方法（js array操作）

下一篇在Javascript操作JSON对象，增加 删除 修改的简单实现（js操作json对象的增加和删除命令）

相关文章