JS——DOM操作(className属性)

博客介绍了className属性,可设置或返回元素的class属性,并给出设置样式变化的简单例子。指出对多个class属性操作时,原方法效率低、代码量大。随后介绍封装成函数的方法,通过命名getClass函数传入参数选取元素,提高代码效率,最后调用函数进行样式变化操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

简单介绍className:

className 属性:设置或返回元素的 class 属性

 

看下面一个简单的例子(给className设置样式变化案例),效果如下图:

代码如下:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>     
 8     <script>
 9         window.onload=function(){
10             var oUl=document.getElementById('ul');
11             var aLi=document.getElementsByTagName('li');    //获取所有的li元素  
12 
13             for(var i=0;i<aLi.length;i++){                  //循环
14                 if(aLi[i].className=='change'){             //做判断
15                     aLi[i].style.background='yellow';       //改变元素样式
16                 }
17             }
18         }
19     </script>
20 </head>
21 <body>
22     <ul id="ul">
23         <li></li>
24         <li class='change'></li>
25         <li></li>
26         <li class='change'></li>
27         <li></li>
28         <li class='change'></li>
29         <li></li>
30     </ul>
31 </html>

代码解释:

首先需要获取全部的li元素(第11行代码),接着做个循环(第13行代码),选中所有的li元素,然后进行className的判断(第14行代码),最后符合条件的元素进行样式的变化(第15行代码)

 

以上,看起来很简单,但如果需要对很多class属性进行不同的样式变化等操作时,用此方法就会浪费时间、代码实现效率低,代码量大

所以,用下面(封装成函数)这种方法,来提高代码效率!!

代码如下图:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>     
 8     <script>
 9         function getClass(oParent,sClass){                  //参数1:oParent———从哪个父级下选取元素  参数2:sClass———需要哪个class属性
10             var aEle=oParent.getElementsByTagName('*');     //获取父级下所有的元素
11             var aResult=[];                                 //创建一个数组变量,存放所有被选出来的元素
12 
13             for(var i=0;i<aEle.length;i++){
14                 if(aEle[i].className==sClass){              //判断class属性相同的元素
15                     aResult.push(aEle[i]);                  //把符合条件的元素,存进aResult中
16                 }
17             }
18             return aResult;                                 //即:选取出一组符合条件的元素
19         }
20 
21         window.onload=function(){
22             var oUl=document.getElementById('ul');
23             var aChange=getClass(oUl,'change');             //调用getClass函数,选取参数1:父级ul元素和参数2:名为‘change’的class属性
24 
25             for(var i=0;i<aChange.length;i++){              //对所选的元素,进行样式的变化
26                 aChange[i].style.background='red'
27             }
28         }
29     </script>
30 </head>
31 <body>
32     <ul id="ul">
33         <li></li>
34         <li class='change'></li>
35         <li></li>
36         <li class='change'></li>
37         <li></li>
38         <li class='change'></li>
39         <li></li>
40     </ul>
41 </html>

 

解释代码:

第9行代码:命名一个叫getClass的封装函数,传入两个参数(参数1:oParent———从哪个父级下选取元素 参数2:sClass———需要哪个class属性);

第10行代码:在封装函数中,获取参数一父级元素下的所有元素;

第13行代码:循环父级元素下的所有元素;

第14行代码:判断class属性与传入的第二个参数相同的元素;

第11行代码:创建一个数组变量,存放所有被选出来的元素;

第15行代码:因为循环做出的判断结果不一定只有一个class属性,所以需要把符合条件的元素,存进aResult数组中;

第18行代码:循环结束,返回符合条件的一组元素(aResult数组);

第23行代码:调用getClass函数,选取参数1:父级ul元素 和 参数2:名为‘change’的class属性

第25-26行代码:对所选的元素,进行样式的变化操作

转载于:https://www.cnblogs.com/ytraister/p/10940419.html

### JavaScript 中 HTML DOM 文档元素操作的基础知识 #### 获取 DOM 元素 在 JavaScript 中,可以通过多种方式获取 DOM 元素。常用的方法包括 `document.getElementById`、`document.getElementsByClassName` 和 `document.querySelector` 等。这些方法允许开发者定位到特定的 HTML 元素以便进一步操作[^1]。 #### 修改元素内容 一旦获取了目标元素,就可以对其内容进行修改。例如,使用 `.innerHTML` 属性可以设置或更改指定元素内部的 HTML 结构;而 `.textContent` 则用于仅更新纯文本内容而不涉及任何标签解析[^2]。 ```javascript // 设置 innerHTML 示例 let paragraph = document.querySelector('p'); paragraph.innerHTML = '<strong>这是新的加粗文字</strong>'; // 使用 textContent 替代原有内容为简单字符串 paragraph.textContent = '这里是替换后的普通文本'; ``` #### 操作属性与样式 除了调整内容外,还可以轻松操控元素的各种属性及其CSS样式。对于单个样式的变更可以直接通过 style 对象完成;如果需要批量应用复杂样式,则推荐利用 classList API 或者直接切换整个 className 来实现更高效管理[^3]。 ```javascript // 改变颜色并增加边框宽度 const boxElement = document.getElementById('box'); boxElement.style.color = 'red'; boxElement.style.borderWidth = '5px'; // 添加/移除类名 boxElement.classList.add('highlighted'); boxElement.classList.remove('normal-state'); ``` #### 动态创建与插入新元素 当希望向现有页面添加全新组件时,先调用 `document.createElement()` 构建所需节点实例,随后借助 appendChild() 方法将其挂载至合适位置即可达成目的。 ```javascript function createAndAppendNewDiv(parentId){ const newDiv = document.createElement("DIV"); newDiv.className="my-new-div"; newDiv.innerText='我是新增加的小盒子!'; let parentContainer=document.getElementById(parentId); parentContainer.appendChild(newDiv); } createAndAppendNewDiv('main-container'); ``` #### 处理事件 最后不可忽略的是交互行为的支持 —— 绑定各种类型的监听机制来响应用户的动作反馈。这通常涉及到 addEventListener 函数的应用以及合理设计回调逻辑以满足实际需求场景下的功能扩展可能性。 ```javascript document.addEventListener('click', function(event) { console.log(`点击发生于:${event.target.tagName}`); }); ``` 以上便是围绕 JavaScript 下针对 HTML DOM 文档元素基本操作的一些核心要点概述说明。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值