JavaScript中DOM基础语法_javascript dom语法-CSDN博客

本文链接：https://blog.csdn.net/weixin_43684713/article/details/86774644

一、关于DOM

DOM全称为document object model（文本对象模型），当网页被加载时，浏览器会创建页面的文档对象模型，即dom元素。

document对象指的是所有的html对象，通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

二、DOM获取元素

在获取元素的时候需要注意获取的元素是否初始化

1.getElementsByClassName 通过类名称获取

获取出来的对象是集合类型，也可以说是数组类型，class可以绑定多个元素，由于获取到的是集合类型，就有相关属性，例如 length 代表长度。

eg：

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button class=btn>按钮</button>
<script>
    var btn=document.getElementsByClassName("btn");//获取网页中的按钮并进行初始化
    console.log(btn)
</script>
</body>
</html>

运行结果：

通过控制台输出的结果可以看到获取到的是数组。

2.getElementById 通过id获取

获取到的是唯一元素

eg：

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button id="btn">按钮</button>
<script>
    var btn=document.getElementById("btn");//获取网页中的按钮并进行初始化
    console.log(btn)
</script>
</body>
</html>

运行结果：

通过控制台输出的结果可以看到获取到的是单个元素。

3.getElementsByName 通过元素的name名称获取

eg：

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button name="btn">按钮1</button>
<button name="btn">按钮2</button>
<button name="btn">按钮3</button>
<script>
    var btn=document.getElementsByName("btn");//获取网页中的按钮并进行初始化
    console.log(btn)
</script>
</body>
</html>

运行结果：

通过输出结果我们可以看到，网页中所有name名称相同的元素均会被获取，得到的是数组类型。

4.getElementsByTagName 通过元素的标签名称获取

eg：

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button name="btn">按钮</button>
<span>abc</span>
<script>
    var aa=document.getElementsByTagName("span");
    console.log(aa);
</script>
</body>
</html>

运行结果：

通过输出结果可以看到，getElementsByTagName是通过元素标签名称获取元素的，获取到的是数组类型。

三、DOM获取到元素之后操作元素

1.JavaScript 能够创建动态的 HTML 内容

在JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

eg：

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
   document.write(Date());//Data()指当前时间
</script>
</body>
</html>

运行结果：

可以看到HTML body元素中没有写内容，输出内容是由document.write()直接向HTML输出流写入内容。

2.JavaScript 能够修改 HTML 内容

最简单的方法时使用 innerHTML 属性。

注意：如果需要使用innerHTML 属性，在获取元素不能使用getElementsByClassName。

eg：

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<span id="tex">HELLO WORLD</span>
<script>
    document.getElementById("tex").innerHTML="HOW ARE YOU";
</script>
</body>
</html>

运行结果：

根据代码可以看出，<span>输出的文本为HELLO WORLD，后面代码改变了<span>输出的内容。

3.JavaScript 能够修改 HTML 元素属性

语法：document.getElementById(id).attribute=new value

eg：改变<img>标签中的src属性，即改变图片。

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<img  id="img" src="../img/img1.jpg">
<script>
    document.getElementById("img").src="../img/img2.jpg";
</script>
</body>
</html>

4.JavaScript 能够修改 css样式

语法：document.getElementById(id).style.property=new style

eg：

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #ss{
            width: 100px;
            height: 100px;
            background-color: palevioletred;
        }
    </style>
</head>
<body>
<div id="ss"></div>
<script>
    document.getElementById("ss").style.backgroundColor="red";
</script>
</body>
</html>

运行结果：