DOM元素操作

下雪不过冬天

已于 2022-01-25 12:14:39 修改

阅读量1.1k

点赞数

文章标签：前端 html javascript

于 2021-06-10 10:37:48 首次发布

本文链接：https://blog.csdn.net/m0_56232007/article/details/117294456

版权

01 什么是DOM？

1、 DOM：document object model 文档对象模型。
DOM是由节点组成的。

2、节点的类型：
元素节点：HTML标签
文本节点：标签中的文字（包含空格和换行。）
属性节点：标签的属性

3、DOM可以做什么？

（1）可以操作HTML元素（增删改查）

增：添加，在一个DOM节点下添加一个子节点，相当于动态新增了一个HTML标签。

删：删除。将一个节点从HTML中删除，相当于删除了该节点的所有内容以及它包含的子节点。

改：改变。改变DOM节点中的内容，包含HTML标签中的内容以及标签的属性。

查：查找。对DOM进行操作之前，必须先查找到该DOM节点。

（2）设置元素的属性值，设置元素的样式。

（3）事件的触发响应：事件源、事件、处理函数。

在这里插入图片描述

02 获取DOM元素节点

获取元素节点：
（1） getElementById
语法：document.getElementById(“id值”)；
功能：通过ID获取元素节点。
返回值：找到的元素节点，没有找到就返回null。

（2） getElementsByTagName()
语法：查找范围(节点).getElementsByTagName(“标签名”);
功能：通过标签名获取元素节点。
返回值：伪数组，类数组。

（3） getElementsByName
语法：document.getElementsByName(“name属性值”);
功能：通过name属性获取元素节点。主要用在表单中。
返回值：伪数组，类数组。

（4） getElementsByClassName()
语法：查找范围(节点).getElementsByClassName(“class值”);
功能：通过class属性获取元素节点。
返回值：伪数组，类数组。
【注意】该方法IE8以下不兼容。

（5） querySelector()
语法：document.querySelector(“css选择器”);
功能：通过css选择器获取元素节点
返回值：找到符合条件的第一个元素节点。
【注意】该方法IE8以下不兼容。

（6） querySelectorAll()
语法：document.querySelector(“css选择器”);
功能：通过css选择器获取元素节点
返回值：伪数组
【注意】该方法IE8以下不兼容。

03 自定义ByClassName函数

eg:
<div id="box">
   <p class="p1">看看能不能用</p>
    <h1 class="p1">肯定不能用</h1>
</div>

<script>
// 需要两个参数：节点，class值
function elementsByClassName(node,str){
  //1.先获取node这个节点下面所有的子节点。
  var childs = node.getElementsByTagName("*");
  // 2.定义一个数组，放置返回的数据
  var arr = [];
  // 3.遍历所有的子节点,判断它们的类名是否与str相等,如果相等,放入arr数组中.
  for (var i = 0; i < childs.length; i++) {
    //  4.判断类名是否相等。
    if (childs[i].className == str) {
      arr.push(childs[i]);
    }
  }
  return arr;
}
var box = document.getElementById("box");
var ps = elementsByClassName(box,"p1");
console.log(ps);

04 操作属性节点

（1）标签上的属性

原生属性：标签天生就有的属性。
语法：元素节点.属性名
读取：元素节点.属性名
修改：元素节点.属性名 = “值”
【注意】 class是一个特殊情况，不能直接用class，而是用className

（2）自定义属性：
开发人员自己定义的属性。不是标签自带的。
自定义属性不能使用点语法调用。
而是要使用三个方法去操作。（查改删）

 元素节点.getAtrribute("属性名")
 获取元素上的属性名对应的属性值

元素节点.setAtrribute("属性名","属性值")
修改/新增元素上的属性名对应的属性值。      //有就是修改，没有就是新增。

元素节点.removeAtrribute("属性名")
删除元素节点上属性名对应的属性。

【痛点】自定义属性与原生属性不好区分。

（3）H5自定义属性。
元素节点上有一个dataset。里面包含了所有的H5自定义属性。

获取H5自定义属性值
语法：元素节点.dataset.属性名

设值
语法：元素节点.dataset.属性名 = “值”

删除
语法：delete 元素节点.dataset.属性名

05 操作类名

class
1.原生属性的方法
获取类名：元素.className

（1）修改类名：元素.className = “值”；
追加：元素.className = 元素.className + “值” 值前面要加一个空格。

（2）删除类名：
全部删除：元素.className = " "；
删除一个：

JS如下：

<script>
    var box = document.getElementById("box");
    // box.className = box.className+" butterfly";
    // box.className = "";

    // 1.获取类名，
    // 2。截取字符串，按照空格分隔、
    // 3.遍历数组，判断是否是要删除的类名
    // 4.如果是删除，否则跳过。

    function deleteClassName(str,classStr){
      if (str==null||str.length==0) {
        return "";
      }
      var arr = str.split(" ");
      for (var i = 0; i < arr.length; i++) {
         if (arr[i]==classStr) {
           arr.splice(i,1);
         }
      }
      return arr.join(" ").trim();
    }
    box.className = deleteClassName(box.className,"butterfly");
    console.log(box.className);
  </script>

HTML如下：

 <div class="box  butterfly  box2" id="box">
    昨夜西风凋碧树，独上高楼，望尽天涯路。
  </div>

06 H5操作类名

H5提供了一套便于我们操作类名的方法。
元素节点对象上有一个classList的属性。

（1）新增类名：
元素.classList.add(“类名”)

（2）删除类名：
元素.classList.remove(“类名”)

（3）切换类名： toggle()

语法：元素.classList.toggle(“类名”)

【注意】当元素有这个类名时，使用这个方法，是将这个类名删除。
如果元素没有这个类名时，使用这个方法，就是新增这个类名。

07 操作文本节点

文本节点：标签中的内容。

操作文本节点的方法有三个：
（1）通过 innerHTML
（2）通过 innerText
（3） value

（1） innerHTML：
可读写的属性。

    读：元素节点.innerHTMl 
      返回：元素节点中所有的内容。不包含标签本身的。
    写：
      元素节点.innerHTML = "新的值"
      
    【注意】
    1.值是一个字符串，里面如果出现了HTML标签，则会被解析。
    2.新的值会完全覆盖旧的值

（2） innerText: 可读写的属性。

1.与innerHTML的区别就在于 innerHTML会返回里面的标签，innerText只会返回标签中的文本内容。
2.书写的时候，innerText不会解析内容中的标签。（标签会被忽略）

    读：元素节点.innerText
    写：元素节点.innerText = "新的值"

（3） value: 用于操作表单元素的内容。

    读：表单元素节点.value
    写：表单元素节点.value = "新的值"

JS购物车全选、单选案例，代码如下：

  <script>
    //1.1 获取全选按钮
    var allCheck = document.getElementById("allCheck");
    // 2.1 获取详情按钮
    var items = document.querySelectorAll(".items>input");
    //1.2 为全选添加点击事件
    allCheck.onclick = function () {
      //1.3 让所有的详情按钮的选中状态都与全选保持一致。
      for (var i = 0; i < items.length; i++) {
         items[i].checked = allCheck.checked;
      }
    }
    // 2.2 为每一个详情按钮添加点击事件
    for (var i = 0; i < items.length; i++) {
       items[i].onclick = function(){
        // 2.3 判断所有的详情按钮的状态，如果都选中，则全选按钮应该选中。
        //2.4定义一个变量，假设所有的详情按钮都选中了。如果有一个未选中，则把flag的值变为false。
        var flag = true;
        for (var j = 0; j < items.length; j++) {
          // 如果有一个未选中
           if (!items[j].checked) {
            //  在这里，一个详情按钮的选中状态不能决定全选按钮的选中状态，必须所有的按钮都选中，全选才可以选中。
            flag = false;
            break;
           }
        }
        allCheck.checked = flag;
       }
    }
  </script>

下雪不过冬天

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
DOM元素操作

01 什么是DOM？1、 DOM：document object model 文档对象模型。DOM是由节点组成的。2、节点的类型：元素节点：HTML标签文本节点：标签中的文字（包含空格和换行。）属性节点：标签的属性3、DOM可以做什么？（1）可以操作HTML元素（增删改查）增：添加，在一个DOM节点下添加一个子节点，相当于动态新增了一个HTML标签。删：删除。将一个节点从HTML中删除，相当于删除了该节点的所有内容以及它包含的子节点。改：改变。改变DOM节点中的内容，包含HTML
复制链接

扫一扫