2021-06-24

最新推荐文章于 2021-11-09 20:10:55 发布

buty_nice

最新推荐文章于 2021-11-09 20:10:55 发布

阅读量61

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/buty_nice/article/details/118198314

版权

笔记专栏收录该内容

32 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了如何使用JavaScript进行DOM操作，包括在HTML表格中插入、删除和查找行与单元格，以及修改单元格内容。同时，文章讲解了如何通过DOM对象操作类，如添加、删除和切换类，并展示了实际示例。此外，还讨论了如何设置和获取元素的样式，包括内联样式和通过getComputedStyle获取计算样式。

摘要由CSDN通过智能技术生成

操作table

插入行与单元格
table对象.insertRow(索引号)
tr对象.insertCell(索引号)

查找行与单元格
table对象.rows[下标]
table对象.rows[下标].cells[下标]
tr对象.cells[下标]

删除行与单元格
table对象.deleteRow(索引号)
tr对象.deleteCell(索引号)
Exp:

<body>
  <table border="1" cellspacing="0" width="400" id="tab">
    <tr>
      <td>书名</td>
      <td>价格</td>
    </tr>
    <tr>
      <td>看得见风景的房间</td>
      <td>￥30</td>
    </tr>
    <tr>
      <td>幸福从天而降</td>
      <td>￥18.5</td>
    </tr>
    <tr>
      <td>60个瞬间</td>
      <td>￥32.00</td>
    </tr>
  </table>
  <button class="add">添加一行</button>
  <button class="del">删除第二行</button>
  <button class="mod">修改标题样式</button>
  <button class="clone">复制最后一行</button>
</body>
<script>
  var _add = document.querySelector(".add");
  var _del = document.querySelector(".del");
  var _mod = document.querySelector(".mod");
  var _clone = document.querySelector(".clone");
  var _tab = document.getElementById("tab");
  var _tbody = _tab.firstElementChild;
  //增加一行
  _add.onclick = function(){
    var tr = document.createElement("tr");//创建一个tr
    tr.innerHTML = `<td>小王子</td><td>￥50</td>`;
    _tbody.appendChild(tr);
  }

  // 删除第二行
  _del.onclick = function(){
    _tbody.children[1].remove(); 
  }

  // 修改标题样式
  _mod.onclick = function(){
    _tbody.firstElementChild.style.fontWeight = 'bold';
    _tbody.firstElementChild.style.textAlign = 'center';
    _tbody.firstElementChild.style.backgroundColor = '#ccc';

  }

  // 复制最后一行
  _clone.onclick = function(){
    var last = _tbody.lastElementChild;
    var lastClone = last.cloneNode(true);
    _tbody.insertBefore(lastClone,last)
  }
</script>

类操作

dom对象.className
dom对象.className = “类名”

添加类：
dom对象.classList.add(“类名”)

删除类：
dom对象.classList.remove(“类名”)

添加/删除类
dom对象.classList.toggle(“类名”)

是否含有某类
dom对象.classlist.contains(“类名”)
含有某类，返回true，否则返回false
Exp:

<body>
    <ul class="box">
        <li class="list">列表</li>
        <li>列表</li>
        <li>列表</li>
        <li>列表</li>
    </ul>
</body>
<script>
    var lis = document.getElementsByClassName("box")[0].getElementsByTagName("li");
    //lis[0].classList.add("on"); //添加类
    //lis[0].classList.remove("on"); //删除类
    //lis[0].classList.toggle("on"); //当没有这个类是添加上去，有时给删去，不常用
    var z = lis[0].classList.contains("on"); // 如果有这个类返回true，否则返回false
    console.log(z);


    //导航栏移入移出效果
    // for (var i = 0; i < lis.length; i++) {
    //     lis[i].onmouseenter = function() {
    //         this.classList.add("on");
    //     }
    //     lis[i].onmouseleave = function() {
    //         this.classList.remove("on");
    //     }
    // }
 </script>

样式操作

设置样式：

dom对象.style.属性名 = “属性值”;
dom对象.style = “属性名 : 属性值;属性名 : 属性值;”;
Exp:

<style>
        #box {
            width: 200px;
            height: 200px;
            background-color: #ccc;
        }
    </style>
<body>
    <div id="box">hello world</div>
</body>
<script>
    var oDiv = document.getElementById("box");
    //oDiv.style.color = "red"; //dom对象.style.属性名 = "属性值"
    oDiv.style = "color:red;font-size:20px;"; //dom对象.style = "属性名 : 属性值;属性名 : 属性值;";
</script>

获取样式：

获取行内样式
dom对象.style.属性名

获取样式 w3c
getComputedStyle(dom对象,null).属性名

IE
dom对象.currentStyle.属性名
Exp:

 <style>
        #box {
            width: 200px;
            height: 200px;
            color: #00f;
            background-color: #ccc;
        }
    </style>
    <body>
    <div id="box" style="color: #f00;margin-left: 10px;">hello world</div>
</body>
<script>
    var oDiv = document.getElementById("box");
    //(getComputedStyle(oDiv,null).color);//行内
    // getComputedStyle(oDiv,null).width);//内嵌
    console.log(getComputedStyle(oDiv, null).marginLeft);
 </script>