JavaScript 学习笔记（二）JavaScript基础，JavaScript的基本DOM操作（二）

小张小张啊

已于 2022-03-05 11:26:19 修改

阅读量833

点赞数

文章标签： javascript 学习前端

于 2022-03-02 15:53:17 首次发布

本文链接：https://blog.csdn.net/weixin_43969648/article/details/123225415

版权

本文是JavaScript学习笔记的第二部分，主要聚焦于DOM操作，包括根据ID、类名、标签名和选择器获取元素，以及元素内容、属性、类名、行内样式的操作。此外，还介绍了如何获取元素的非行内样式。

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

文章目录

JavaScript 学习笔记（一）JavaScript基础，JavaScript的基本DOM操作（二）
一、DOM介绍
二、获取元素的方式
三、操作元素内容
- 1.操作元素文本内容
- 2. 操作元素超文本内容
四、操作元素属性
- 1. 原生属性
- 2. 自定义属性
五、操作元素类名
六、操作元素行内样式
七、获取元素非行内样式
总结

JavaScript 学习笔记（一）JavaScript基础，JavaScript的基本DOM操作（二）

一、DOM介绍

DOM 全称—— Document Object Model是一整套操作文档相关内容的属性和方法。
可以用它来操作元素修改样式；
操作元素修改属性；
操作元素改变位置；
操作元素添加事件等。

二、获取元素的方式

1. 根据id名称获取

语法：document.getElementById(‘id名称’)
作用：获取文档流中ID 名对应的一个元素
返回值：
如果有 id 对应的元素，就是这个元素
如果没有 id 对应的元素，就是 null

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM操作（二）</title>
</head>
<body>
    <div class="box" id="container">你好</div>
<script>
    //根据id获取页面元素
    var ele = document.getElementById('container')
    //输出返回值
    console.log(ele)
</script>
</body>
</html>

2. 根据元素类名获取

语法：document.getElementsByClassName(‘元素类名’)
作用：获取文档流中所有类名对应的元素
返回值：必然是一个伪数组
如果有类名对应的元素，有多少获取多少
如果没有类名对应的元素，就是空的伪数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM操作（二）</title>
</head>
<body>
    <div>一号</div>
    <div class="box">二号</div>
    <div class="box content">三号</div>
    <div class="box" id="container">四号</div>
<script>
    //根据id获取页面元素
    var ele = document.getElementsByClassName('box')
    //输出返回值
    console.log(ele)
</script>
</body>
</html>

3. 根据元素标签名获取

语法：document.getElementsByTagName(‘标签名’)
作用：获取文档流中所有标签名对应的元素
返回值：必然是一个伪数组
如果有标签名对应的元素，有多少获取多少
如果没有标签名对应的元素，就是空的伪数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM操作（二）</title>
</head>
<body>
    <div>一号</div>
    <div class="box">二号</div>
    <div class="box content">三号</div>
    <div class="box" id="container">四号</div>
<s