JavaScript-DOM

最新推荐文章于 2024-09-16 08:47:17 发布

XxSsWei

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量109

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/XxSsWei/article/details/116046284

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

DOM对象简介

什么是DOM

在这里插入图片描述

DOM HTML 节点树

在这里插入图片描述

DOM对象的继承关系

在这里插入图片描述

HTML元素操作

在利用DOM操作HTML元素时既可以利用document对象提供的方法和属性获取操作的元素又可以利用Element对象提供的方法获取

在这里插入图片描述

多学一招：
在这里插入图片描述

利用document对象的属性

document.body     //返回文档的body元素
document.documentElement    //返回文档的html元素
document.forms    //返回对文档中所有form对象引用
document.images    //返回文档中所有images对象引用

利用Element对象的方法

在DOM操作中元素对象也提供了获取某个元素内指定元素的方法常用的两个方法分别为getElementsByClassName()和getElementsByTagName() 它们的使用方式与 document对象中同名方法相同

元素内容

在这里插入图片描述

案例点击改变盒子的大小：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 50px;
            height: 50px;
            background: #eee;
            margin: 0 auto;
        }
    </style>
</head>
<body>
 <div class="box" id="box">
 </div>
</body>
<script>
    var box = document.getElementById('box');
    var i = 0;
    box.onclick = function (){
        ++i;
        if (i%2){
            this.style.width='200px';
            this.style.height='200px';
            this.innerHTML='大'
        }else {
            this.style.width='50px'
            this.style.height='50px'
            this.innerHTML='小'
        }
    }
</script>
</html>

元素的属性

在这里插入图片描述

元素样式

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box"></div>
</body>
<script>
    let box=window.document.getElementById('box')
    box.style.width='100px';
    box.style.height='100px';
    box.style.background='red';
    box.style.transform='rotate(7deg)'    //transform  向元素应用2D或3D转换
</script>
</html>

classList的属性和方法

在这里插入图片描述

案例：标签栏切换效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签栏切换效果</title>
    <style>
        body,ul{margin:0;padding:0;}
        ul{list-style:none;}
        .tab-box{width:384px;margin:10px;border:1px solid #ccc;border-top:2px solid #206F96;padding: 0}
        .tab-head{height:31px;}
        .tab-head-div{width:95px;height:30px;float:left;border-bottom:1px solid #ccc;border-right:1px solid #ccc;background:#206F96;line-height:30px;text-align:center;cursor:pointer;color:#fff;}
        .tab-head .current{background:#fff;border-bottom:1px solid #fff;color:#000;}
        .tab-head-r{border-right:0;}
        .tab-body-div{display:none;margin:20px 10px;}
        .tab-body .current{display:block;}
    </style>
</head>
<body>
  <div class="tab-box">
      <div class="tab-head">
          <div class="tab-head-div current">标签一</div>
          <div class="tab-head-div">标签二</div>
          <div class="tab-head-div">标签三</div>
          <div class="tab-head-div">标签四</div>
      </div>
      <div class="tab-body">
          <div class="tab-body-div current">1</div>
          <div class="tab-body-div">2</div>
          <div class="tab-body-div">3</div>
          <div class="tab-body-div">4</div>
      </div>
  </div>
</body>
<script>
    //获取标签栏的所有标签部分的元素对象
   var tabs=document.getElementsByClassName('tab-head-div');
   //获取标签栏的所有内容对象
   var divs=document.getElementsByClassName('tab-body-div');
   for (var i =0;i<tabs.length;++i){  //遍历标签部分的元素对象
       tabs[i].onmouseover=function (){//为标签元素对象添加鼠标滑过事件
           for (var i=0;i<divs.length;i++){//遍历标签栏的内容元素对象
               if (tabs[i]==this){ //显示当前鼠标滑过的li元素
                   divs[i].classList.add('current');
                   tabs[i].classList.add('current');

               }else {   //隐藏其他li元素
                   divs[i].classList.remove('current');
                   tabs[i].classList.remove('current')
               }
                          }
       }
   }
</script>
</html>

节点追加

再获取元素的节点后还可以利用DOM提供的方法实现节点的添加

在这里插入图片描述

    var h2=document.createElement('h2')
    var text=document.createTextNode('Hello Javascript')
    var attr = document.createAttribute('align')
    attr.value='center'
    h2.setAttributeNode(attr)
    h2.appendChild(text)
    document.body.appendChild(h2)