JS的函数和对象

最新推荐文章于 2024-08-18 23:49:04 发布

Moncy999

最新推荐文章于 2024-08-18 23:49:04 发布

阅读量465

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_45938664/article/details/125499435

版权

本文深入解析JavaScript中函数的创建、调用以及对象的三种创建方法，包括字面量、构造函数和new关键字。同时探讨了如何操作DOM元素，从DOM概念到查询与修改，以及常用方法如createElement和appendChild等。

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

一、JavaScript中的函数

创建函数1：

function 函数名([参数列表]) {
//函数体代码
}
function 是声明函数的关键字,必须小写
由于函数一般是为了实现某个功能才定义的，所以通常我们将函数名命名为动词，比如 getSum

function getSum(){
return 1+2
}

创建函数2：

var 函数名 = function ([参数列表]) {
//函数体代码
}
因为函数没有名字，所以也被称为匿名函数
这个变量名里面存储的是一个函数
函数表达式方式原理跟声明变量方式是一致的

var getSum = function（[a,b]）{
return a+b;
}

函数调用：

函数名（[参数列表]）

getSum()
getSum(a,b)

二、 JavaScript中的对象

创建对象的方法1：

使用字面量创建对象：
var star = {
属性1:属性值1,
属性2:属性值2,
属性3:属性值3
方法1:函数1；
}

var dog = {
uname:’可乐’,
age:2,
color:yellow,
eat:function(){alert(“吃狗粮”)}
}

创建对象的方法2：

利用 new Object 创建对象：
var star = new Object();
star.属性1=“属性1”；
star.属性2=“属性2”；
star.属性3=“属性3”；
star.方法1=函数1

var dog = new Object();
dog.uname = ’可乐’,
dog. a

ge = 2,
dog. color = yellow,
dog.eat=function(){alert(“狗粮”)}
创建对象的方法3：

利用构造函数创建对象：
function 构造函数名([形参1,形参2,形参3]) {
this.属性名1 = 参数1;
this.属性名2 = 参数2;
this.属性名3 = 参数3;
this.方法名 = 函数体;
}
var obj=new 构造函数名（[实参1，实参2，实参3]）

访问对象的属性和方法

访问属性：
对象.属性名
对象[“属性名”]
.访问方法：
对象.方法名()

三、JS操作DOM对象

（一）什么是DOM?

DOM （ Document Object Model ），叫做文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改html文档的内容和结构。

<html>
<head>
<title>HTML DOM</title>
</head>
<body>
<h1>DOI的结构</h1>
<p>
<a href="href">链接</a>
</p>
</body>
</html>

（二）DOM节点分类

DOM （ Document Object Model ），叫做文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改html文档的内容和结构。

文档节点==>document

元素节点==>标签

属性节点==>标签的属性

文本节点==>标签体

（三）DOM的作用

通过可编程的对象模型
JavaScript 能够创建动态的 HTML节点
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

（四）DOM查询元素方法

getElementById(“id值”) 通过 id 查找 HTML 元素返回值一个元素对象
getElementsByTagName（”name值”）通过标签名查找 HTML 元素返回值元素对象集合
getElementsByClassName（”class值” 通过类名找到 HTML 元素返回值元素对象集合
querySelector 通过选择器获取第一个对象返回值一个元素对象
querySelectorAll 根据选择器返回所有对象集合返回值元素对象集合
body 获取body元素返回值一个元素对象
documentElement 获取html元素返回值一个元素对象