【第二阶段 day33 web前端】DOM JSON

最新推荐文章于 2024-07-20 13:32:05 发布

是九九鸭~

最新推荐文章于 2024-07-20 13:32:05 发布

阅读量84

点赞数

分类专栏：第二阶段文章标签： json javascript html5

本文链接：https://blog.csdn.net/oriettahuiru/article/details/120758858

版权

第二阶段专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.DOM

全称是文档对象模型,是js提供的一种用来快速解析HTML网页的技术
利用Document对象提供的API操作元素
常用方法:

getElementById(id属性的值) – 通过id属性的值获取元素(只能获取一个)
getElementByName(name属性的值) – 通过name属性的值获取元素(获取到多个,存入数组)
getElementByClassName(class属性的值) – 通过class属性的值获取元素(获取到多个,存入数组)
getElementByTagName(标签名的值) – 通过标签名获取元素(获取到多个,存入数组) write(数据) –
向网页输出指定的数据
innerHTML – 设置或返回元素的内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 DOM技术</title>
		<script>
			/* 1.练习1:给div1加一个函数 */
			function fun(){
				//1.选中id="d"的元素,获取元素的内容
				var a=document.getElementById("d");
				console.log(a);
			    a.innerHTML="你好,div1";
				console.log(a.innerHTML);
			}
			/* 2.练习2:选中我是p2元素,并获取内容 */
			function fun2(){
				var a=document.getElementsByName("b");
				console.log(a[2]);
				console.log(a[2].innerHTML);
			}
			/* 3.练习3:选中我是p2元素,并修改内容 */
			function fun3(){
			/* 	var a=document.getElementsByName("b");
				a[2].innerHTML="你好,我是p2元素";
				console.log(a[2].innerHTML); */
				// document.getElementsByName("b")[2].innerHTML="<h1>我变了</h1>";
				document.getElementsByName("b")[2].innerText="<h1>我变了</h1>";
				//总结:innerText无法解析标签,innerHTML可以解析标签
				/* 练习4:选中我是div3元素,并修改内容 */
				document.getElementsByClassName("a")[1].innerHTML="<h1>你好,div3</h1>"
				/* 练习5:选中我是div3元素 */
				document.getElementsByClassName("a")[1].style.color="blue";
				document.getElementsByClassName("a")[1].style.fontFamily="微软雅黑";
				document.getElementsByTagNameNS("div")[2].style.color="red";
			}
		</script>
	</head>
	<body>
		<div id="d" onclick="fun();">我是div1</div>
		<div class="a">我是div2</div>
		<div class="a">我是div3</div>
		<div name="b">我是div4</div>
		
		<p name="b">我是p1</p>
		<p name="b" onclick="fun3();">我是p2</p>
		<p name="b">我是p3</p>
		<p class="a">我是p4</p>
	</body>
</html>

2.JSON

规定了浏览器与服务器交互数据的格式,本质上就是一个字符串
好处:轻量级,简洁明了

json数据:
var a=’“name”:“john”’
json对象
var a=’{“name”:“john”,“age”:“12”}’
json数组
var a=’[{“name”:“john”,“age”:“12”},{“name”:“lili”,“age”:“11”}]’

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>json的测试</title>
	</head>
	<script>

		//1.定义json字符串 -- 发送给服务器
		var a ='"name":"xiaobai"';
		
		//2.定义json对象
		var b='{"name":"xiaobai","age":"20"}';
		
		//3.定义json数组
		var c='[{"name":"rose","age":"12"},{"name":"anli","age":"10"}]';
		
		
		console.log(a.length);//求长度
		console.log(b.concat("123"));//拼接字符串
		
		//json串与js对象的区别:语法不同+数据的解析方式不同
		var jsonchuan='{"name":"jack",age":20}';
		var jschuan={name:"tony",age:20}
		
		//问题:互转,利用json
		//json字符串   ->   JS对象,好处是:方便解析对象的属性,使用json的parse方法
		console.log(JSON.parse(b));
		console.log(JSON.parse(b).name);
		console.log(JSON.parse(b).age);
		
		//JS对象     ->     json字符串,好处是:方便对字符串的操作,还可以发送给服务器,使用sreingify
		//Json.stringify()
		var car={name:"小鹿",price:1212};
		console.log(JSON.stringify(car));
		console.log(JSON.stringify(car).length);
		console.log(JSON.stringify(car).concat("1212"));
		
		/* 解析c中name属性的值 */
		var a=JSON.parse(c);
		console.log(a[0].name);
		console.log(a[1].age);
		
	</script>
	<body>
	</body>
</html>

是九九鸭~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【第二阶段 day33 web前端】DOM JSON

DOM1.概念全称是文档对象模型,是js提供的一种用来快速解析HTML网页的技术利用Document对象提供的API操作元素常用方法:getElementById(id属性的值) – 通过id属性的值获取元素(只能获取一个)getElementByName(name属性的值) – 通过name属性的值获取元素(获取到多个,存入数组)getElementByClassName(class属性的值) – 通过class属性的值获取元素(获取到多个,存入数组)getElementBy
复制链接

扫一扫