526互联

JavaScript基础(二) - 函数与Document对象

发布时间 2024-01-02 10:42:38作者: Python孔德逸

一、函数

定义

函数是一段可以被重复调用的代码块。通过使用函数，可以把一些常用的代码放在一起，以便在其他地方重用。这样既简化了代码，提高了可读性，也减少了代码的重复编写。

作用

函数的主要作用是简化代码，提高代码的可重用性。它使得我们可以把一些复杂的操作封装起来，然后在需要时调用。这有助于提高代码的易维护性和可扩展性。

二、创建函数

函数声明

在JavaScript中，我们可以使用函数声明来创建函数。函数声明的语法如下：

function functionName(param1, param2, ...) {
    // 函数体
}

其中，functionName是函数的名称，param1、param2等是函数的参数。函数体是包含在花括号{}中的代码，用于实现函数的功能。

函数的参数与返回值

函数的参数是在函数调用时传递给函数的值。函数可以有一个或多个参数。在函数体内，我们可以使用arguments对象来访问所有的参数。

函数的返回值是在函数执行完成后返回给调用者的值。如果函数没有显式的返回值，则默认返回undefined。

案例

下面是一些使用函数的例子：

  1. 计算圆的面积
function calculateCircleArea(radius) {
    return Math.PI * radius * radius;
}
  1. 字符串反转
function reverseString(str) {
    return str.split('').reverse().join('');
}
  1. 生成一定范围内的随机数
function generateRandomNumber(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

三、Document对象

概述

Document对象是HTML文档的根元素。它提供了很多的方法和属性，用于动态访问、更新网页的内容、结构和样式。通过使用Document对象，我们可以操作网页上的元素，包括文本、图片、表格等。

获取网页中的元素

我们可以通过Document对象的getElementById()、getElementsByClassName()、querySelector()等方法来获取网页中的元素。例如：

var element = document.getElementById('id');
var elements = document.getElementsByClassName('class');
var element = document.querySelector('selector');

更改网页的内容

我们可以使用Element对象的innerHTML属性来更改网页的内容。例如：

var element = document.getElementById('id');
element.innerHTML = '新的内容';

更改元素的样式

我们可以使用Element对象的style属性来更改元素的样式。例如：

var element = document.getElementById('id');
element.style.color = 'red';
element.style.fontSize = '20px';

创建元素

我们可以使用Document对象的createElement()、createTextNode()等方法来创建元素。例如：

var element = document.createElement('div');
var text = document.createTextNode('文本内容');
element.appendChild(text);
document.body.appendChild(element);

以上就是JavaScript基础中的函数与Document对象的内容。希望能够对您有所帮助。