DOM操作

已于 2022-02-08 18:34:55 修改
阅读量255 收藏
点赞数 2
文章标签： javascript 前端 css3
于 2022-01-13 17:05:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58448088/article/details/122420322
版权

目录

一、什么是 DOM

二、DOM操作的方式方法

1.获取操作的 对象

2.设定CSS样式

3.CSS样式获取

三、获取和设定标签内容

1. 标签对象.innerHTML

2. 标签对象.innerText

四、标签数据

1.获取数据

2.设定数据

五、标签属性

1.操作语法：

 2.标签属性的通用操作方法

3.标签支持的布尔属性

六、class属性

1.新增

2.删除 

​

 3.替换

4. 切换

一、什么是 DOM

文档对象模型，是JavaScript操作html文档的方法

二、DOM操作的方式方法

现有以下HTML文件，

<div>我是第一个div</div>
<div id="div2">我是第二个div</div>
<div class="div3">我是第三个div</div>
<div name="div4">我是第四个div</div>
<div abc='def'>我是第五个div</div>

<ul>
    <li>我是第一个li</li>
    <li>我是第二个li</li>
    <li>我是第三个li</li>
    <li>我是第四个li</li>   
</ul>

1.获取操作的 对象

          也就是 需要操作的 标签

      var 变量  = document.querySelector('标签名');

      只会获取 相同标签的第一个标签对象

//获取div标签对象
var oDiv = document.querySelector('div');
//获取li标签对象
var oLis = document.querySelector('li');

console.log(oDiv);
console.log(oLis);

从执行结果来看，它的确只会获取 整个html文件中 第一个符合条件的标签对象

 既然可以获取第一个标签对象，那么我们就可以获取符合条件所有的标签对象：

        var 变量  = document.querySelectorAll('标签名');

//获取div
var oDiv1 = document.querySelectorAll('div');
//获取li
var oLis1 = document.querySelectorAll('li');

console.log(oDiv1);
console.log(oLis1);

执行结果：

注意：此时我们获取到的是 一个 伪数组，伪数组中每个单元存储的数据数值，就是 符合条件的 标签对象，但是DOM操作不能直接操作标签对象伪数组，必须 伪数组[索引下标] 获取一个独立的标签对象 进行DOM操作，那就需要 循环遍历伪数组 获取每一个独立的标签对象，进行 DOM操作

伪数组

            数据结构 和 数组类似

            有 索引下标 有 length  支持[]语法

            伪数组支持的函数方法 和 真正的数组不同

看完了以上两种方法，那么我们又怎样获取指定的标签对象，就比如说，我想获取每一个div,

或者第三个li，我们可以采用以下操作：

//获取第2个div
//id属性值
var oDiv2 = document.querySelector('#div2');

//获取第3个div
//class属性值
var oDiv3 = document.querySelector('.div3');

//获取第4个div
//标签属性和属性值
var oDiv4 = document.querySelector('[name = "div4"]');

//获取第5个div
//标签属性和属性值
var oDiv5 = document.querySelector('[abc = "def"]');

console.log(oDiv2);
console.log(oDiv3);
console.log(oDiv4);
console.log(oDiv5);

//获取第5个div
var oDiv6 = document.querySelector('div:nth-child(5)');
console.log(oDiv6);

//获取第3个li
//先获取ol
var oUl =  document.querySelector('ul');
var oLis3 = oUl.querySelector('li:nth-child(3)');

console.log(oLis3);

执行结果：

2.设定CSS样式

既然我们获取到了对象，那么我们就可以对其进行一系列的操作：设定CSS样式

设定：

标签属性.style.属性 = 属性值；

特别注意：

    属性 font-size 要写成 fontSize（小驼峰命名法），JavaScript中 - 符号 作为 减法运算符号

    属性值如果需要单位 不能只写数字，要加单位

在这里我给大家写一个完整的HTML代码，DOM操作设定CSS样式：

注意：js一定要写在html代码下面

<!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">
    <title>Document</title>
</head>
<body>

    <div>我是div标签</div>

    <script>

        // 获取标签对象
        var oDiv = document.querySelector('div');

        // 设定css样式
        oDiv.style.width = '300px';
        oDiv.style.height = '100px';
        oDiv.style.backgroundColor = 'pink';

        // 带有 - 减号的属性 要写成小驼峰命名法
        oDiv.style.fontSize = '30px';
        
        oDiv.style.border = '2px solid #000';

    </script>

</body>
</html>

   执行结果：

3.CSS样式获取

css样式属性值的获取

语法1  只能获取行内式的属性值

     var 变量 = 标签对象.style.属性

语法2 可以获取任意语法形式设定的css样式

     var 变量 = window.getComputedStyle(标签对象).属性；

     获取结果如果带有px等单位

     可以通过 parseInt() 获取整数部分

<!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">
  <title>Document</title>
  <style>
    div{
    width: 300px;
    height: 100px;
    background: pink;
    font-size: 50px;
    border: 3px solid #000;
}
  </style>
</head>
<body>
     <div style="color:red">我是div标签</div>
     <script>
       // 获取标签对象
       var oDiv = document.querySelector('div');
       //语法1
       //行内式 能使用 标签对象.style.属性
       var color = oDiv.style.color;
       console.log(color);

       //非行内样式 不能使用 标签对象.style.属性
       var width = oDiv.style.width;
       console.log(width);

       //语法2
       //获取结果带有px单位 通过 parseInt() 获取整数部分
       var height = parseInt (window.getComputedStyle(oDiv).height);
       console.log(height);

     </script>
</body>

</html>

执行结果

三、获取和设定标签内容

<!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">
  <title>Document</title>
</head>
<body>
  <div>
    我是div标签
    <p>我是p标签</p>
    <span>我是span标签</span>
    <h1>我是h1标签</h1>
    <a href="JavaScript:;">百度</a>
<script>
    //获取标签对象
    var oDiv = document.querySelector('div');
<script>
  </div>
</body>
</html>

有以上代码，以下代码都是在<script></script>内完成操作：

1. 标签对象.innerHTML

        获取和设定都支持解析标签

获取：  

    var 变量 = 标签对象.innerHTML;

//获取div标签对象的内容
var res = oDiv.innerHTML;
console.log(res);

设定：

    标签对象.innerHTML = 字符串;

设定 标签对象 的 内容 只能是 字符串

//设定标签对象的内容
//+= 加等执行的是字符串拼接效果 是在原始内容后拼接新内容
oDiv.innerHTML += '<h3>我是设定的h3</h3>';

//如果使用的是 = 赋值操作 效果是 覆盖赋值效果 
// 也就是 后赋值的内容 会覆盖之前内容的

 

2. 标签对象.innerText

         获取和设定时 不支持 解析标签

         只能 获取和设定 文本内容

获取

        var 变量 = 标签对象.innerText ;

// 获取 div标签对象 的 内容
 var res2 = oDiv.innerText;
 console.log( res2 );

执行结果：

设定

         标签对象.innerText = 字符串 ;

设定标签对象的内容
oDiv.innerText += '<h3>我是设定的h3</h3>' ;

执行结果：

四、标签数据

一般标签使用：标签对象.innerHTML 或者 标签对象.innerText 来操作内容

    例如：div标签 p标签 等

特殊标签使用：标签对象.value来操作数据

    例如：input标签 textarea标签

<!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">
  <title>Document</title>
</head>
<body>
  <input type="text"><br>
  <textarea cols="30" rows="10"></textarea><br>
  <select>
      <option value="0">北京</option>
      <option value="1" >上海</option>
      <option value="2" >广州</option>
      <option value="3" >重庆</option>
      <option value="4" >天津</option>
  </select><br>
  <button>点击</button>
  <script>
    //获取标签对象
    var oInp = document.querySelector('input');
    var oTex = document.querySelector('textarea');
    var oSel = document.querySelector('select');
    var oBut = document.querySelector('button');
  </script>
</body>
</html>

以下所有代码，我们都要写在script标签里

1.获取数据

    var 变量 = 标签对象.value;

一般状态下 input等标签 默认状态是没有数据的

一般是配合 事件 获取数据数值

//直接获取数据，标签还没有输入数据，获取结果是空字符串
var res = oInp.value;
console.log(res);
var res2 = oTex.value;
console.log(res2);
var res3 = oSel.value;
console.log(res3);

 这样操作只会是获取到空字符串，实际上我们也不会采用这样的方式来获取标签数据，至于怎么操作，先放一放，我们先来看看是怎样设定标签数据的，最后再来获取标签数据，因为我们只有给标签设定好了数据，我们才可以获取到它的数据

2.设定数据

   标签对象.value = 数据数值 ;

//设定标签数据
//设定input
oInp.value = '王昭没有君啊';
//设定textarea
oTex.value = '在努力写博客';

//select标签不能设定value

 现在我们就来获取一下标签的数据：

我们 一般是 配合事件 获取数据

逻辑：

给 button标签 绑定了 鼠标左键单击事件

当鼠标左键单击button标签时 button标签触发事件 

触发执行 function(){} 匿名函数设定的程序

//给button绑定鼠标点击事件
oBut.addEventListener('click',function(){
   var res = oInp.value;
   console.log(res);

   var res2 = oTex.value;
   console.log(res2);

   var res3 = oSel.value;
   console.log(res3);
});

五、标签属性

每一类标签 直接支持的属性不同

但是每种标签都支持的可以直接操作的属性有三个

id   id属性

className class属性

title title属性

1.操作语法：

设定

    标签对象.id = 属性值;

    标签对象.className = 属性值;

    标签对象.title = 属性值;

获取

   var 变量 = 标签对象.id;

   var 变量 = 标签对象.className;

   var 变量 = 标签对象；

<!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">
  <title>Document</title>
</head>

<body>
  <div id="div1" class="div2" name="我是的div标签">我是标签对象</div>
  <a href="JavaScript:;" name="我是a标签">百度</a>
  <script>
    var oDiv = document.querySelector('div');
    var oA = document.querySelector('a');
    var oIpt = document.querySelector('input');

    //设定
    oDiv.id ='我是设定的id';
    oDiv.className = '我是设定的class';
    oDiv.title = '我是设定的title';

    //获取
    var res = oDiv.id;
    var res2 = oDiv.className;
    var res3 = oDiv.title;
    console.log(res);
    console.log(res2);
    console.log(res3);
  </script>
</body>

</html>

 2.标签属性的通用操作方法

   所有标签的所有属性 都可以使用的通用的操作方法，但布尔属性除外

设定

    标签对象.setAttribute('属性',属性值);

获取

   var 变量 = 标签对象.getAttribute('属性');

删除

   标签对象.removeAttribute('属性');

<!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">
  <title>Document</title>
</head>

<body>
  <div id="div1" class="div2" name="我是的div标签">我是标签对象</div>
  <a href="JavaScript:;" name="我是a标签">百度</a>
  <input type="checkbox" checked >
  <script>
    var oDiv = document.querySelector('div');
    var oA = document.querySelector('a');

    //获取
    //div 不支持直接 操作 name属性
    // 获取结果是 undefined
    var res = oDiv.name;
    console.log(res);

    // a标签 支持 name属性 可以 直接 操作 name属性
    var res2 = oA.name;
    console.log(res2); 

    //通过 通用操作方法 获取标签 name属性的属性值
    var res3 = oDiv.getAttribute('name');
    var res4 = oA.getAttribute('name');
    console.log(res3);
    console.log(res4);

    //设定
    oDiv.setAttribute('name','我是js设定的');
    var res5 = oDiv.getAttribute('name');
    console.log(res5);

    //删除
    oA.removeAttribute('name');
    var res6 = oA.getAttribute('name');
    console.log(res6); 
  </script>
</body>

</html>

3.标签支持的布尔属性

   默认选中 多选 只读  禁用 ....

设定

        标签对象.布尔属性 = 属性值

获取

        var 变量 = 标签对象.属性属性

布尔属性操作的结果 不管是设定还是获取 一定是 布尔数值( true / false )

         执行 是 true

         不支持 是 false

var oIpn = document.querySelector('input');

//获取
var res = oIpn.checked;
console.log(res);

//设定
oIpn.checked = false;
var res = oIpn.checked;
console.log(res);

六、class属性

<!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">
  <title>Document</title>
</head>
<body>
  <div class="s1 s2">我是div</div>
<script>
   // 获取标签对象
   var oDiv = document.querySelector('div');

   // 获取 class属性值
   var res = oDiv.className ;
   console.log( res );
</script>
</body>
</html>

 

操作方法

1.新增

     标签对象.classList.add(新增属性值)

//一次可以添加一个或者多个 多个属性值之间使用逗号间隔
oDiv.classList.add('s3','s4','s5');
var res = oDiv.className;
console.log(res);

2.删除 

标签对象.classList.remove(删除属性值);

// 删除 class属性值
oDiv.classList.remove('s1');
var res = oDiv.className;
console.log(res);

 3.替换

标签对象.classList.replace(原始,新的)

//替换class属性值
oDiv.classList.replace('s1','s10');
var res = oDiv.className;
console.log(res);

4. 切换

标签对象.classList.toggle(切换属性值)

       有 执行 删除

       没有 执行 新增

//切换class属性值
//没有这个属性 就 执行 新增操作
oDiv.classList.toggle('s3');
var res = oDiv.className;
console.log(res);


//有这个属性 就 执行 删除操作
oDiv.classList.toggle('s2');
var res = oDiv.className;
console.log(res);

 

王昭没有君啊
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
DOM、事件、变量类型和作用域
weixin_46766870的博客
12-19 282
dom基础 （一）设置元素的样式 ele.style.stylName = styleValue 元素样式 ele要设置样式的dom对象 styleName 样式名称，驼峰命名 sytlevalue 样式值 （二）innerHTML 1.ele.innerHTML 返回ele元素开始和结束标签之间的HTML ele.innerTEXT与innerHTML区别： innerHTML:在HTML中包括HTML标签都解析成重文本 innerText:只获得到...
javascript DOM 操作.doc
01-15
javascript DOM 操作 javascript DOM 操作是指在客户端使用javascript语言来操作文档对象模型（Document Object Model，DOM），以便于动态地更改网页的内容和结构。下面是javascript DOM 操作的相关知识点： IE 中...
js编写一段html,通过JS动态创建一个html DOM元素并显示
weixin_35642637的博客
06-08 361
函数支持www.jcodecraeer.com*//**//*获取以某个元素的DOM对象@obj 该元素的ID字符串*/function getElement(obj){return typeof obj=='string'?document.getElementById(obj):obj;}/**//*获取某个元素的位置@obj 该元素的DOM对象，或该元素的ID*/function getOb...
js 获取父标签的第二个td子标签的第一个div子标签
yournevermore的博客
03-22 9631
$(this).parent().children("td").eq(1).children('div').first().html();
DOM: 如何获取元素下的第一个子元素
weixin_30781775的博客
05-26 1866
Element.firstChild?，是的，这是第一种方法，当然，通常来说支持 W3C 规范的浏览器，如 Firefox 等取到的应该是TEXT_NODE。很早之前，或者说现在最流行的方法可能是： // 让我们假设要将它抽象出来，变成一个 util 对象的方法 var util = {}; util.first = function(element) { if(!elem...
JavaScript DOM操作
好好学习天天向上
03-27 5138
文章目录JavaScript DOM操作事件的冒泡和事件的委托事件冒泡事件委派 JavaScript DOM操作 事件的冒泡和事件的委托 事件冒泡 同一片区域，给其中的元素都绑定了点击事件，点击公共区域时，触发顺序？ 假设如图，从span->box1->body依次触发 事件的冒泡(Bulle)：事件的向上传导，事件在目标元素处理后，会由内向外的一层层传递 在开发中大部分情况冒泡都是有用了，如果不需要可以通过事件对象event.cancelBubbl取消冒泡。 let span = docum
TypeScript Dom操作
Errol's Blog
05-06 7382
Typescript Dom操作
常见的DOM操作有哪些
热门推荐
IT修真院：初学者转行到互联网的聚集地
05-16 2万+
这里是修真院前端小课堂，本篇分析的主题是 【常见的DOM操作有哪些】 这里是修真院前端小课堂，每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能，本篇分享的是： 【常见的DOM操作有哪些】 1.背景介绍 什么是DOM？简单地说，DOM是一套对文档的内容进行抽象和概念化...
js中Dom操作
weixin_52346897的博客
04-07 5047
简单的Dom获取 什么是Dom操作？ 1.DOM使一个"使程序"和"脚本"有能力的"动态地访问"和"更新文档内容结构"，以及"样式"的平台和语言中立的接口. 2.在HTML和JavaScript的学习中，DOM操作可谓时重中之重. Dom树 //html dom树 如图： DOM节点的分类： DOM节点分为三大类： 1.元素（标签）节点， 2.属性节点， 3.文本节点； 查找dom节点: 1.通过id获取 <div id="box"></div> <script&
易语言DOM操作
08-20
易语言DOM操作源码系统结构:易语言DOM操作源码,DOM操作 ======窗口程序集1 || ||------_按钮1_被单击 || ||------_超文本浏览框1_状态文本被改变 || ||------_按钮2_被单击 || ||------_按钮3_被单击 |
jQuery常见面试题之DOM操作详析
12-10
关于JQ的DOM操作面试问题很多，可以从各个点问，所以列举几个常见问题，毕竟面试只是过程，重要的是知识自己掌握了。 面试题一：JQ中html()、text()和val()区别？ 面试题二：JQ中find()、has()和filter()区别？ 面试...
js 原生dom 操作
SK_study的博客
03-26 3332
js 原生操作dom的方法
vue2前端阿里云oss服务端签名直传
weixin_74285634的博客
08-13 267
generatePresignedUrlApi是由后端提供的接口 来获取密钥。
【vue教程】五. Vue 的路由管理
前端探索者
08-13 1100
Vue Router 是 Vue 官方的路由管理器，用于构建单页面应用。它允许你通过 URL 来映射不同的组件，实现页面的动态加载和导航。路由守卫用于在路由跳转前后执行代码，可以用来检查用户认证状态、获取数据等。通过本篇文章，我们学习了 Vue Router 的基本概念、配置和使用，以及如何实现动态路由和嵌套路由。我们还探讨了路由守卫的概念，并提供了如何在 Vue 组件中使用它们的示例。这些知识点将帮助你构建一个功能完备的单页面应用。
【无标题】
最新发布
weixin_42348009的博客
08-14 165
静态方法返回一个由给定对象自身的可枚举的字符串键属性名组成的数组。
【Markdown】Markdown 中的语言简称
EleganceJiaBao的博客
08-12 990
以下是常见编程语言、脚本语言、标记语言等在 Markdown 中的语言简称以及相应的示例：
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王昭没有君啊

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值