对象、函数、DOM的介绍

m0_50484391

于 2021-06-08 11:06:23 发布

阅读量132

点赞数 1

文章标签： js

本文链接：https://blog.csdn.net/m0_50484391/article/details/117694005

版权

本文介绍了JavaScript中的对象和函数概念，包括对象的属性和方法，以及函数的声明与调用。通过示例展示了如何声明和使用对象及函数。此外，还探讨了DOM操作，讲解了如何通过JavaScript获取和修改页面元素，如通过ID、class或标签名选择元素，并进行样式设置和内容更新。

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

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

//声明对象
//语法：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>