JS-DOM编程

DOM编程

DOM（Document Object Model）编程就是使用document对象的API完成对网页HTMl文档进行动态修改，以实现网页数据和样式动态变化效果的编程

document准确来说是window对象的属性对象之一

document是一个树形结构，以元素（属性和文本）作为树的结点

Document直接获取指定元素

document.getElementById()：根据id获取当前页面唯一元素
document.getElementsByTagName()：根据标签获取当前页面多个元素
document.getElementsByName()：根据name属性值获取当前页面多个元素
document.getElementsByClassName()：根据class属性值获取当前页面多个元素

多个元素的获取会返回一个htmlCollection对象，用for循环遍历即可获得每个元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      function fun1() {
        var els = document.getElementsByClassName("div1");
        for (var i = 0; i < els.length; i++) {
          console.log(els[i]);
        }
      } 
    </script>
  </head>
  <body>
    <div class="div1"></div>
    <div class="div1"></div>
    <div class="div1"></div>
    <div class="div1"></div>
    <div class="div1"></div>
    <div class="div1"></div>
    <button onclick="fun1()">循环</button>
  </body>
</html>

使用foreach循环遍历不仅会获得元素，还会获得对象中的其他方法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      function fun1() {
        var els = document.getElementsByClassName("div1");
        for (var i in els) {
          console.log(els[i]);
        }
      }
    </script>
  </head>
  <body>
    <div class="div1"></div>
    <div class="div1"></div>
    <div class="div1"></div>
    <div class="div1"></div>
    <div class="div1"></div>
    <div class="div1"></div>
    <button onclick="fun1()">循环</button>
  </body>
</html>

通过方法间接访问元素

父元素.children 通过父元素获取子元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      onload = function () {
        var div1 = document.getElementById("div1");
        //根据父元素获取其所有子元素
        var cs = div1.children;
        for (var i = 0; i < cs.length; i++) {
          console.log(cs[i]);
        }
        //根据父元素获取第一个子元素
        console.log(div1.firstElementChild)
        //根据父元素获取最后一个子元素
        console.log(div1.lastElementChild)
      };
    </script>
  </head>
  <body>
    <div id="div1">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>
</html>

子元素.parentElement获取父元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      onload = function () {
        var div1 = document.getElementById("div1");
        //根据子元素获取父元素
        var pr = div1.parentElement;
        console.log(pr);
      };
    </script>
  </head>
  <body>
    <div>
      <div id="div1">1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>
</html>

通过.previousElementSibling和.nextElementSibling获取当前元素的兄弟元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      onload = function () {
        var div1 = document.getElementById("div1");
        //根据当前元素获取兄弟元素
        //获取当前元素的前一个元素
        console.log(div1.previousElementSibling);
        //获取当前元素的后一个元素
        console.log(div1.nextElementSibling);
      };
    </script>
  </head>
  <body>
    <div>
      <div>1</div>
      <div id="div1">2</div>
      <div>3</div>
    </div>
  </body>
</html>

对元素进行操作

操作元素的属性：元素名.属性名=””
操作元素的样式：元素名.style.样式名=””
- 当遇到带有中横线的样式名，要采用驼峰命名，例如”background-color”要写成”backgroundColor”
操作元素的文本：元素名.innerText=”” 元素名.htmlText=””
- innerText不会识别html中的标签结构，而htmlText能识别html标签

增加元素

document.createElement(“元素名”)：创建一个新元素

父元素.appendChild(新元素)：在父元素中追加一个新元素

<!-- 在列表最后添加元素"长沙" -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      function addCs() {
        //新建元素li
        var csli = document.createElement("li");
        //给元素添加属性值和文本
        csli.id = "cs";
        csli.innerText = "长沙";
        //找到父元素city
        var city = document.getElementById("city");
        //在父元素city中增加子元素csli
        city.appendChild(csli);
      }
    </script>
  </head>
  <body>
    <ul id="city">
      <li id="bj">北京</li>
      <li id="sh">上海</li>
      <li id="gz">广州</li>
      <li id="sz">深圳</li>
    </ul>
    <button onclick="addCs()">增加一个</button>
  </body>
</html>

父元素.insertBefore(新元素,参照元素)：在指定元素前添加新元素

<!-- 在指定的元素前添加元素"长沙" -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      function addCs() {
        //新建元素li
        var csli = document.createElement("li");
        //给元素添加属性值和文本
        csli.id = "cs";
        csli.innerText = "长沙";
        //找到父元素city
        var city = document.getElementById("city");
        //找到参照元素"深圳"
        var sz = document.getElementById("sz");
        //在父元素city中，在深圳前增加子元素csli
        city.insertBefore(csli, sz);
      }
    </script>
  </head>
  <body>
    <ul id="city">
      <li id="bj">北京</li>
      <li id="sh">上海</li>
      <li id="gz">广州</li>
      <li id="sz">深圳</li>
    </ul>
    <button onclick="addCs()">增加一个</button>
  </body>
</html>

父元素.replaceChild(新元素,被替换元素)：用新元素替换某个子元素

<!-- 把原有元素"深圳"替换成新元素"长沙" -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      function replaceSz() {
        //新建元素li
        var csli = document.createElement("li");
        //给元素添加属性值和文本
        csli.id = "cs";
        csli.innerText = "长沙";
        //找到父元素city
        var city = document.getElementById("city");
        //找到参照元素"深圳"
        var sz = document.getElementById("sz");
        //在父元素city中，把深圳替换成新元素"长沙"
        city.replaceChild(csli, sz);
      }
    </script>
  </head>
  <body>
    <ul id="city">
      <li id="bj">北京</li>
      <li id="sh">上海</li>
      <li id="gz">广州</li>
      <li id="sz">深圳</li>
    </ul>
    <button onclick="replaceSz()">替换一个</button>
  </body>
</html>

删除元素
- 元素.remove()：哪一个元素调用remove()方法，此元素在Dom树中被删除
- 父元素.innerHTMl=””：即可清空父元素内所有子元素，但保留父元素

JAVA > java-web

JS-DOM编程

http://blog.170827.xyz/2024/03/31/JS-DOM编程/

作者

XIAOBAI

发布于

2024年3月31日

许可协议

JS-正则表达式上一篇

JS-BOM编程下一篇