JS（一）变量与操作元素

最新推荐文章于 2022-12-21 15:14:18 发布

码界索隆

最新推荐文章于 2022-12-21 15:14:18 发布

阅读量202

点赞数

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

本文链接：https://blog.csdn.net/COOL66BOY/article/details/122985123

版权

本文详细介绍了如何在JavaScript中嵌入页面、管理变量及其类型，遵循命名规范，以及通过Hungarian命名法操作DOM元素、获取内容和解决常见错误。涵盖getElementById、innerHTML等关键知识点。

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

文章目录

介绍
- 嵌入页面的方式
变量
获取元素方法
- 获取元素出错问题
- - 解决方法
操作元素属性
操作元素包裹的内容
- innerHTML

介绍

javascript: 页面行为：用于部分动画效果，页面与用户的交互，页面功能。

嵌入页面的方式

在这里插入图片描述
1、行间事件
2、页面script标签嵌入
3、外部导入js文件

变量

javascript是一种弱类型语言，他的变量类型由他的值来决定，定义变量需要用关键字“var”。

var iNum = 123;
var sTr = 'sdjsds'

//同时定义多个变量

var iNum = 15, sTr = 'ssdkskdj';

变量类型

5种基本的数据类型：
1、number：数字类型
2、string：字符串类型
3、boolean：布尔类型，true或false
4、undefined：undefined类型，变量声明未初始化，他的值就是undefined
5、null：null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量的初始化设为null，在页面上获取不到对象时，返回的值就是null

1种复合类型：object

变量、函数、属性、函数参数命名规范

1、区分大小写
2、第一个字符必须是字母、下划线或美元符号$
3、其他字符可以是字母、数字、下划线、美元符

匈牙利命名风格

对象o Object比如：oDiv
数组a Array ：aLtems
字符串s String：sTr
整数i integer：iNum
布尔值b Boolean：bComplete
浮点数f Float：fPrice
函数fn Function：fnDef
正则表达式re RegExp：reEmailCheck

获取元素方法

可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素，获取到的是一个html对象，然后将它赋值给一个变量。

在这里插入图片描述

获取元素出错问题

如果把javascript写在元素上面，就会出错，因为页面是从上往下加载执行的，javascript去页面上获取元素div1的时候，元素div1还没有加载。

解决方法

在这里插入图片描述

操作元素属性

获取的页面元素，就可以对其属性进行操作，包括读与写。

在这里插入图片描述
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        #div-1{
            color: pink;
            font-size: 12px;
        }
    </style>
    <script>
        window.onload = function()
        {
            var iId = document.getElementById('div-1');
            iId.style.color = 'red';
            iId.style.fontSize = '20px';
        }
    </script>
    <title>Document</title>
</head>
<body>
    <div id="div-1">被操作属性的div</div>
</body>
</html>

效果如下：

js操作前：
在这里插入图片描述

js操作后：
在这里插入图片描述

将属性名赋予一个变量，在用该变量来代替这个属性时，
要用“[ ]”

例如：

var sName = 'color';
var iId = document.getElementById('div-1');
iId.style[sName]= 'red';

操作元素包裹的内容

innerHTML

innerHTML可以读取或者写入元素包裹的内容。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        #div-1{
            color: pink;
            font-size: 20px;
        }
    </style>
    <script>
        window.onload = function()
        {
            var oId = document.getElementById('div-1');
            oId.innerHTML = '这是被修改了的内容';
        }
    </script>
    <title>Document</title>
</head>
<body>
    <div id="div-1">被操作属性的div</div>
</body>
</html>