对象函数DOM的介绍

Posted 2022-10-28 m0_50484391

对象：一类事物的具体实例
对象的特征对应属性；
对象的行为对应对象方法或者函数.

//声明对象
//语法：var 对象名=
 var person=
     //name属性
     name:"张三"；
     //年龄属性
     age：18
     move:function()
         console.log("我可以移动");
     
 
 person.move();
 person.name="李四"
 console.log(person.name);
 console.log(person.age);

函数：可以用来封装一些代码，实现具体功能
好处：可复用性高

 //test为函数名
 function test(形参1，形参2，....)
     函数执行的代码
    return 值(值可以是具体的某个值)
 

 //构造函数声明
 var test=new function("函数内容")；

 var test=function(形参)

 


```javascript
<!-- 从页面输入两个数，求这两个数的和 -->
 第一种：
 function sum()
    var a=prompt("请输入第一个数")；
    var b=prompt("请输入第二个数")；
    //parseInt()将字符串转换为数字
    var sum=parseInt(a)+parseInt(b);
    console.log(sum);
 
 //函数的调用
 sum();

 第二种：
 function sum(a,b)//形参
    //parseInt()将字符串转换为数字
    var sum=parseInt(a)+parseInt(b);
    console.log(sum);
    //return：设定函数的返回值
    return sum;
 
 //函数的调用
 var sum(2,5);//实参
 windows.alert();

函数的调用
var result=函数名(实参列表)://result根据函数返回值而定

DOM(Document Object Model):文档对象模型

<button id="btn" type="button">这是一个button</button>
<button class="btn1" type="button">这是一个button</button>
<button class="btn1" type="button">这是二个button</button>

<script>
	//js为我们专门提供了一个文档对象(document)来操作文档元素
	//document.getElementById()获取页面中设置了id元素的属性
	document.getElementById("btn");//[Object htmlELEMENT]
	console.log(btn);
	console.log(btn.innerHTML);
	btn.innerHTML="注册";
	//通过元素的style属性可以为元素设置属性
	btn.style.width="200px";

	//document.getElementsByClassName()通过class类名属性来获取
	var btn1=document.getElementsByClassName("btn1");
	console.log(btn1);

	//数组：用于存储同一类型的事物，连续存储
	//数组的下标：表示元素在数组当中的位置，从0开始
	//数组的长度(length)：通过数组的length属性可以获取到数组的长度
	for(let i=0;i<btn1.length;i++)
		//通过下标可以获取数组元素：数组名[下标]
		console.log(btn1[i].innerHTML);
	

	//document.getElementsByTagName()通过标签名来获取元素
	var btn3=document.getElementsByTagName("button");
	console.log(btn3);
</script>