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="":即可清空父元素内所有子元素,但保留父元素