JS对象 DOM树 JSON

最新推荐文章于 2022-03-26 00:41:59 发布

利威尔兵短

最新推荐文章于 2022-03-26 00:41:59 发布

阅读量224

点赞数

文章标签： javascript html jquery

本文链接：https://blog.csdn.net/weixin_55740233/article/details/120153542

版权

本文介绍了JavaScript中的内置对象如String、Array、Math和JSON，以及自定义对象的创建和使用方法。详细讲解了DOM（文档对象模型）的概念，包括如何通过window对象访问DOM，以及使用getElementById、getElementsByName等方法操作DOM节点。同时，文章还展示了如何修改元素内容和样式。此外，还探讨了JSON作为数据交换格式的基本语法和用法。

摘要由CSDN通过智能技术生成

JS对象

内置对象

String/Arrays/Math/JSON等

window对象（可以被省略）

window.alert(123);
window.confirm('请选择');
window.prompt('请输入');

自定义对象

方式一：

1.用function声明对象：function Person(){}

2.new关键字创建对象：var p1= new Person();

3.设置属性：p1.name="张飞"; 直接定义变量

4.设置方法

5.访问对象

function Person(){}
var p1= new Person();
p1.name ='张三';
p1.age = 15;
p1.eat =function(){
	console.log(p1.name+p1.age);
}
p1.eat();
console.log(p1);

方式二：***********常用

var p = {
				"name" : '张三',
				"age"    : 10,
				"study"  : function(){
					console.log(p.name+p.age);
				}
			}
			console.log(p);
			p.study();

DOM（document object modle） DOM树

文档对象模型，利用document对象提供的各种属性和方法，方便快速地定位网页中的所有元素

是W3C标准，提供了一套API，可以很方便地对html元素进行访问与增删改查

ECMAScript描述了js的语法和基本对象

Document对象

1.获取：window.document

2.常用方法：

getElementById 通过id获取元素--返回一个元素

getElementsByName 通过name获取元素--用数组

getElementsByClassName 通过class获取元素--用数组

getElementsByTagName 通过标签名获取元素--用数组

write 直接向网页输出

document对象提供的innerHTML和innerText的区别

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试DOM树</title>
	</head>
	<body>
		
		<div class="b" id="a1" onclick="a()">我是div1</div>
		<div class="b" name="n1" >我是div2</div>
		<div class="b" name="n1">我是div3</div>
		<h1 id="c">我是h1</h1>
		<h1 class="d">我是h1</h1>
		<h1 class="e" name="m1">我是h1</h1>
		
		<script>
			//1.定义函数 --点击我是div1触发
			var a =function(){
				window.document;
				var a =document.getElementById("a1");
				console.log(a);
				console.log(a.innerHTML);
				//修改内容
				a.innerHTML='我是键盘';
				var b=document.getElementsByName("n1")[0].innerHTML;
				console.log(b);
				document.getElementsByName("n1")[0].innerHTML='<h1>我变了</h1>';
				var c =document.getElementsByClassName("b")[1].innerHTML;
				console.log(c);
				document.getElementsByClassName("b")[1].innerHTML='<h2>我又又变了</h2>';
				//修改元素样式css变字的颜色
				document.getElementById("a1").style.color='red';
			}
			var Person{
				name : '张胜男',
				age : 18,
				play : function(){					
				},
				sleep : function(){					
				}		
			}	
		</script>
	</body>
</html>

JSON

本身就是字符串，用来完成浏览器与服务器数据的交换，轻量级数据交换的格式简洁清晰

语法：var a= ' " firstName " : " John " ';

对象：var a= '{ " firstName " : " John " , " lastName " : " Pick " } ';

	//1.定义一个简单的JSON字符串
			var a =' "name" : "Jack" ';
			console.log(a.length);
			//2.定义JSON对象
			var a =' {"firstname": "John" , "lsatname": "Doe"}';
			a.concat("hello");
			console.log(a);
			//3.定义JSON数组
			var a ='[{"a": "a1","b": "b1"},{"c": "c1","d": "d1"}]'	;		 
			console.log(a);