JavaScript 浅谈DOM的基本用法

最新推荐文章于 2023-04-25 10:43:29 发布

reta丶

最新推荐文章于 2023-04-25 10:43:29 发布

阅读量246

点赞数 1

分类专栏：前端 JavaScript

本文链接：https://blog.csdn.net/qq_40477864/article/details/81297509

版权

前端同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

JavaScript

2 篇文章 0 订阅

订阅专栏

DOM（Document Object Model，文档对象模型）是W3C制定的一套技术规范，用来描述JavaScript脚本怎样与HTML或XML文档进行交互的Web标准。DOM规定一系列标准接口，允许开发人员通过标准方式访问文档结构、操作网页内容、控制样式和行为等。本章将介绍DOM规范，以及规范化文档操作的基本方法和技巧。

一、元素选择

dom有诸多方法可以进行元素选择

getElementById()：返回指定id属性值的元素。注意：id值要区分大小写，如果找到多个id相同的元素，则返回第一个元素，如果没有找到指定id值的元素，则返回null。
getElementsByTagName()：返回所有指定标签名称的元素节点。
getElementsByName()：返回所有指定名称的元素节点。该方法多用于表单结构中，用于获取单选按钮组或复选框组。
getElementByClassName()：返回所有指定class属性值的元素节点。

//通过id获取文本框内容
document.getElementById("id");
//值得注意的是：以下方法返回所有的元素节点，因此使用时可在后加[n]选择第n+1个
//通过标签名文本框内容
document.getElementsByTagName("div")[0];
//通过name获取文本框内容
document.getElementsByName("name")[0];
//通过class获取文本框内容
document.getElementsByClassName("class")[0];

二、修改选中元素

修改或添加属性值

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="id" class="class">
      这是第一个div
    </div>
    <div class="class">
      这是第二个div
    </div>
  </body>
</html>

    <script type="text/javascript">
      var id = document.getElementById('id');
      id.style.opacity=0.5;//设置透明度
      var class2 = document.getElementsByClassName('class')[1];
      class2.style.color="red";//设置字体颜色为红色
    </script>

效果如下：

三、创建新元素

creatElement()方法能够根据参数指定的标签名称创建一个新的元素，并返回新建元素的引用。用法如下

    <script type="text/javascript">
      var p = document.createElement("p");
      document.body.appendChild(p);//将p添加到body下
      p.innerText ="这是一个p标签";//给p标签添加内容
    </script>

效果如下：

四、删除元素

pre.removeChild(p)方法能够删除pre元素的子类p元素，用法如下：

  <script type="text/javascript">
    var body = document.getElementsByTagName('body')[0];
    var div1 = document.getElementsByTagName('div')[0];
    body.removeChild(div1);
  </script>

效果如下：

reta丶

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 浅谈DOM的基本用法

DOM（Document Object Model，文档对象模型）是W3C制定的一套技术规范，用来描述JavaScript脚本怎样与HTML或XML文档进行交互的Web标准。DOM规定一系列标准接口，允许开发人员通过标准方式访问文档结构、操作网页内容、控制样式和行为等。本章将介绍DOM规范，以及规范化文档操作的基本方法和技巧。一、元素选择dom有诸多方法可以进行元素选择getEleme...
复制链接

扫一扫