首页 > 网络编程 > JavaScript > javascript技巧 > JS操作元素

JavaScript操作元素完整代码实例

2026-06-26 09:46:39 作者：霍理迪

在javascript开发中,查找dom元素是操作页面的基础能力,这篇文章主要介绍了JavaScript操作元素的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下

前言

JS的DOM操作可以改变网页的内容、结构、样式

一、改变元素的内容

element.innerText ，element.innerHTML区别（读的区别/写的区别）

读：innerText，innerHTML可以获取元素内面的内容，innerText去除空格、换行和标签，只读文本，innerHTML可以获取到元素里面的标签，同时保留空格和换行

写：innerText 不识别html标签，innerHTML识别html标签

补充：element.nodeValue 是所有节点（Node）对象都具有的属性，用于获取或设置节点的值，但它的返回值取决于节点的类型：

对于元素节点（Element），nodeValue 的值始终是 null

对于文本节点（Text），nodeValue 返回的是文本内容

对于属性节点（Attribute），nodeValue 返回的是属性的值

element.textContent - 返回元素及其所有后代的文本内容

<body>
  <!-- 需求：点击button，切换内容  天气炎热==》天气凉爽-->
  <button id="btn">点我切换内容</button>
  <div class="box">
    <!-- <a href="#" rel="external nofollow" >天气炎热</a> -->
    天气炎热
  </div>
  <script>
    let flag = true;
    // 获取元素  绑定事件  事件处理函数
    document.getElementById("btn").addEventListener("click", function () {
      let box1 = document.querySelector(".box");
      if (flag) {
        box1.innerText = "天气寒冷"
        // console.log(box1.innerText);

        flag = false;
      }
      else {
        box1.innerHTML = "<h2>天气炎热<h2>"
        flag = true;
      }
      // console.log(box1.innerText);

    })
  </script>
</body>

二、改变元素的其它属性

例如：src、href、id、alt、title等属性

依旧是先getElementById获取元素，然后绑定监听事件click，以及对应的事件处理函数

<body>
  <!-- 需求：点击对应的按钮，可以切换图片已经更改title值 -->
  <button id="dog">小狗</button>
  <button id="cat">小猫</button><br /><br />
  <img src="./img/pic_01.jpg" title="小狗" />

  <script>
    let imgEle = document.querySelector("img");
    document.getElementById("dog").addEventListener("click", function () {
      imgEle.src = "./img/pic_01.jpg";
      imgEle.title = "小狗";
    });
    document.getElementById("cat").addEventListener("click", function () {
      imgEle.src = "./img/pic_02.jpg";
      imgEle.title = "小猫";
    });
  </script>
</body>

三、操作表单元素属性

例如：type、value、checked、selected、disabled等

<body>
  <!-- 需求：1、点击按钮，更换input里的显示内容为：‘内容被修改了' 
    需求2:点击按钮，按钮就被禁用了
    -->
  <button id="edit">修改按钮</button>
  <button id="dis">禁用按钮</button>
  <input type="text" value="请输入内容" />
  <script>
    let intEle = document.querySelector("input");
    document.getElementById("edit").addEventListener("click", function () {
      intEle.value = "内容被修改了";
    });
    document.getElementById("dis").addEventListener("click", function () {
      intEle.disabled = true;
    });
  </script>

</body>

四、操作样式属性

可以通过JS修改元素的大小、颜色、位置等样式

1、element.style 行内样式操作

（1）、JS里面的样式采取驼峰命名法，比如fontSize、backgroundClolor

（2）、JS修改style样式操作，产生的是行内样式，css权重比较高

2、element.className 类名样式操作

（1）、如果样式修改较多，可以采取操作类名的方式更改元素样式

（2）、class因为是个保留字，因此使用className来操作元素类名属性

（3）、className 会直接更改元素的类名，会覆盖原先的类名，如果想保留原先的类名，再添加更改的时，需要把原先类名加上

3、element.classList.xxx() 类名操作方法

classList是 DOM 元素的只读属性，返回一个 DOMTokenList 对象，提供了一系列操作类名的方法（替代传统的className字符串拼接），所有方法均兼容现代浏览器（IE10+）。

方法	语法	核心作用	示例
add()	`element.classList.add(class1, class2...)`	添加一个 / 多个类名（重复添加无效果）	`div.classList.add('active', 'show')`
remove()	`element.classList.remove(class1, class2...)`	删除一个 / 多个类名（删除不存在的类名无报错）	`div.classList.remove('hide', 'disabled')`
toggle()	`element.classList.toggle(class, [force])`	切换类名：有则删，无则加；`force` 为布尔值时强制添加 / 删除	`div.classList.toggle('active')` `div.classList.toggle('show', true)` （强制添加）
contains()	`element.classList.contains(class)`	判断是否包含指定类名，返回布尔值	`if (div.classList.contains('active')) { ... }`
replace()	`element.classList.replace(oldClass, newClass)`	替换类名（旧类名不存在则无效果）	`div.classList.replace('old', 'new')`

  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: #bfa;
    }

    .box1 {
      width: 200px;
      height: 200px;
      background-color: #f00;
      font-size: 24px;
      color: #fff;
    }

    .box2 {
      border: 10px solid black;
    }
  </style>
</head>

<body>
  <div class="box box2">box</div>
  <script>
    let boxEle = document.querySelector(".box")
    // 需求1：点击div，div颜色变色，用行内样式实现
    boxEle.addEventListener("click", function () {
      //写法一
      // boxEle.style = "background-color:#f00;font-size:24px"
      // 写法二
      boxEle.style.backgroundColor = "#f00"; //注意将-写成小驼峰的形式
      boxEle.style.fontSize = "24px";
    })
    //需求2：鼠标移入，div的宽高发生变化，字体大小变化，字体加粗
    boxEle.addEventListener("mouseover", function () {
      boxEle.className = "box box2";
      boxEle.classList.add("box1");
      // boxEle.classList.remove("box1");
    })

  </script>

五、排他思想

如果有同一组元素，想要其中某一个元素实现某种样式，需要用到循环的排他思想算法

步骤：

清除所有元素的样式
给当前元素设置样式
注意顺序不能颠倒

<body>
  <!-- 需求：给当前点击的按钮，添加背景色 -->
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
  <button>按钮4</button>

  <script>
    //获取所有的按钮
    let btnsEle = document.querySelectorAll("button");
    //先循环给每个按钮都加上点击事件
    for (let i = 0; i < btnsEle.length; i++) {
      btnsEle[i].addEventListener("click", function () {
        //再循环清空所有样式
        for (let j = 0; j < btnsEle.length; j++) {
          btnsEle[j].style.backgroundColor = "";
        }
        //再给当前点击事件，添加样式，使用this更好
        // btnsEle[i].style.backgroundColor = "#f00"
        this.style.backgroundColor = "#f00";
      });
    }
  </script>

</body>

六、操作自定义属性

除了元素自带的属性，我们还可以自定义属性

    <a
      href="www.baidu.com" rel="external nofollow" 
      hello="1"
      b="2"
      data-index="abc"
      data-index-hello="hello"
      >司自成到破吞不老骂。</a
    >

1、通用方式

//获取自定义属性  标签对象.getAttribute(属性名)
console.log(aEle.getAttribute('hello'));
//设置自定义属性  标签对象.setAttribute(属性名,属性值)
aEle.setAttribute("hello", "2");
// 删除自定义属性 标签对象.removeAttribute(属性名)
aEle.removeAttribute("hello");

2、h5新增

H5给我们新增了自定义属性规范：H5规定自定义属性以data-开头，如多个单词，用-连接，读取时，用小驼峰读取

// 操作自定义属性第二种方式（自定义属性名必须以data-）
console.log(aEle.dataset.index); //读
aEle.dataset.index = "mnl";//改
aEle.dataset.index = "";
console.log(aEle.dataset.indexHello);//驼峰命名法读取

总结

到此这篇关于JavaScript操作元素的文章就介绍到这了,更多相关JS操作元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！