JavaScript操作元素的基础语法

最新推荐文章于 2024-11-09 08:39:20 发布

原创最新推荐文章于 2024-11-09 08:39:20 发布 · 257 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #js

前端专栏收录该内容

52 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript操作DOM元素，包括获取和修改文本内容、操作元素属性、修改样式等核心技能。针对不同类型的元素提供了具体的代码示例。

JavaScript操作元素的基础语法

1、介绍

JavaScript中的DOM操作主要可以改变网页的内容、结构（标签）、样式。当然，也可以使用DOM操作元素来改变元素里的内容、属性……等，这些操作针对于DOM而言，也是通过操作对象的属性来实现的。

2、获取/改变元素里的内容

2.1 获取/改变文本框的内容

对于表单文本框而言，里面的内容我们可以使用value属性来进行获取和改变。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取/改变表单文本框的内容</title>
</head>

<body>
    <input type="text" id="text" value="请输入用户名">
    <script>
        window.onload = function() {
            //通过选择器获取元素
            var element = document.querySelector("#text");
            // 获取文本框的内容
            var value = element.value;
            console.log(value);
            //修改文本框的内容
            element.value = "你好，世界！"
            console.log(element.value);
        }
    </script>
</body>

</html>

2.2 获取/改变其他元素的文本内容

由于其他标签元素的文本内容（p、h、div……等）都是写在两个标签之内的，它们没有value属性，所以无法使用相同的操作，但是JavaScript给我们提供了两个属性（innerText、innerHTML）来进行获取和改变其他元素的文本内容。

1、innerText

获取文本内容

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取/改变其他元素的文本内容</title>
</head>

<body>
    <div>我都div标签</div>
    <p>我是p标签</p>
    <script>
        window.onload = function() {
            //通过选择器获取div元素
            var div = document.querySelector("div");
            //通过选择器获取p元素
            var p = document.querySelector("p");
            // 通过innerText属性获取文本内容
            console.log(div.innerText)
            console.log(p.innerText)
        }
    </script>
</body>

</html>

修改文本内容

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取/改变其他元素的文本内容</title>
</head>

<body>
    <div>我都div标签</div>
    <p>我是p标签</p>
    <script>
        window.onload = function() {
            //通过选择器获取div元素
            var div = document.querySelector("div");
            //通过选择器获取p元素
            var p = document.querySelector("p");
            // 通过innerText属性修改文本内容
            div.innerText = "你好div！"
            p.innerText = "你好p！"
                // 通过innerText属性获取文本内容
            console.log(div.innerText)
            console.log(p.innerText)
        }
    </script>
</body>

</html>

2、innerHTML

获取文本内容

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取/改变其他元素的文本内容</title>
</head>

<body>
    <div>我都div标签</div>
    <p>我是p标签</p>
    <script>
        window.onload = function() {
            //通过选择器获取div元素
            var div = document.querySelector("div");
            //通过选择器获取p元素
            var p = document.querySelector("p");
            // 通过innerHTML属性获取文本内容
            console.log(div.innerHTML)
            console.log(p.innerHTML)
        }
    </script>
</body>

</html>

修改文本内容

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取/改变其他元素的文本内容</title>
</head>

<body>
    <div>我都div标签</div>
    <p>我是p标签</p>
    <script>
        window.onload = function() {
            //通过选择器获取div元素
            var div = document.querySelector("div");
            //通过选择器获取p元素
            var p = document.querySelector("p");
            // 通过innerHTML属性修改文本内容
            div.innerHTML = "你好div！"
            p.innerHTML = "你好p！"
            // 通过innerHTML属性获取文本内容
            console.log(div.innerHTML)
            console.log(p.innerHTML)
        }
    </script>
</body>

</html>

3、区别

innerText：在设置内容操作时，它不会识别有效标签，所有全部都会以字符串对待，并应用到HTML模块中。在获取内容操作时，如果是innerHTML设置的含有有效标签的内容，那么获取的时候就会将有效标签的效果也输出；如果是该属性设置的内容，则只是单纯的输出字符串而已。
innerHTML：在获取内容操作时，会将其该属性设置的内部的所有标签都获取到。在设置其内容操作时，会识别有效标签，边根将其效果应用到HTML模块中。

3、常见元素属性操作

3.1 语法格式

//获取元素属性：元素名.属性名;
//设置元素属性：元素名.属性名="属性值";

3.2 属性及其操作

innerText、innerHTML：改变元的文本内容
scr：改变元素的资源路径（将资源直接下载并加载到这个界面）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常见元素属性操作</title>
</head>

<body>
    <div>
        <img src="./images/oppo.png" alt="三星">
    </div>
    <script>
        window.onload = function() {
            // 获取图像标签
            var img = document.querySelector("img");
            // 获取图像元素的路径
            document.write(img.src)

            // 设置图像路径
            img.src = "./images/iphone.png";
            // 获取图像元素的路径
            document.write(img.src)
        }
    </script>
</body>

</html>

href：改变元素的链接资源（直接跟随这个路径找到资源）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常见元素属性操作</title>
</head>

<body>
    <div>
        <a href="http://www.baidu.com">百度</a>
    </div>
    <script>
        window.onload = function() {
            var a = document.querySelector("a");
            console.log(a.href)
            a.innerText = "淘宝";
            a.href = "http://www.taobao.com";
            console.log(a.href)
        }
    </script>
</body>

</html>

id：改变元素的id属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常见元素属性操作</title>
</head>

<body>
    <div>
        <img src="./images/oppo.png" id="img">
    </div>
    <script>
        window.onload = function() {
            var img = document.querySelector("img");
            console.log(img.id)
            img.id = "images";
            console.log(img.id)
        }
    </script>
</body>

</html>

alt：改变图像未能加载时显示的文字

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常见元素属性操作</title>
</head>

<body>
    <div>
        <img src="./images/oppo.png" alt="opoo">
    </div>
    <script>
        window.onload = function() {
            // 获取图像标签
            var img = document.querySelector("img");
            // 获取图像元素的alt值
            document.write(img.alt)

            // 设置图像的alt
            img.alt = "手机你好";
            // 获取图像元素的alt值
            document.write(img.alt)
        }
    </script>
</body>

</html>

title：改变光标悬停在图像上显示的文字

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常见元素属性操作</title>
</head>

<body>
    <div>
        <img src="./images/oppo.png" title="opoo">
    </div>
    <script>
        window.onload = function() {
            var img = document.querySelector("img");
            document.write(img.title)
            img.title = "手机你好";
            document.write(img.title)
        }
    </script>
</body>

</html>

4、表单元素的属性操作

value
type
checked，布尔值
selected：规定在下拉列表中页面加载时，预先选定/显示该选项。布尔值
disabled：规定是否禁用input元素。布尔值

5、操作样式

5.1 通过stye对象修改css样式

//语法格式：
		1、元素名.style.样式名(驼峰命名法，有-的去掉，-后边的首字母大写)="样式值"；
		2、元素名.style["css样式名称"]="样式值"；
//注意：
        1、元素对象的style属性也是一个对象
        2、第一种方式内的样式名称采用驼峰命名法，如：color、backgroundColor、backgroundImage、display……等
        3、JS修改style样式的操作，产生的行内样式，所有权重最高。
        4、如果样式较少，或者功能简单的情况下使用

5.1.1 案例1

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS操作样式</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script>
        window.onload = function() {
            var div = document.querySelector(".box");
            div.style.backgroundColor = "pink";
        }
    </script>
</body>

</html>

5.1.2 案例2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS操作样式</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script>
        window.onload = function() {
            var div = document.querySelector(".box");
            div.style["background-color"] = "pink";
        }
    </script>
</body>

</html>

5.2 通过className修改css样式

//语法格式：元素名.className="值";
//作用:
	1、获取/设置元素的类名属性
	2、为网页内的某个元素指定一个css样式来更改该元素的外观
//注意：
    1、适合于样式较多或者功能复杂的情况
    2、如果想要保留原先的类名以及样式，可以修改为多类名选择器

5.2.1 案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS操作样式</title>
    <style>
        /* 类名1的样式 */
        
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        /*类名2的样式  */
        
        .first {
            background-color: skyblue;
            border-radius: 50%;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script>
        window.onload = function() {
            // 获取元素
            var div = document.querySelector(".box");
            // 修改为多类名选择器
            div.className = "box first";
        }
    </script>
</body>

</html>