JavaScript之DOM

最新推荐文章于 2022-09-03 11:10:53 发布

dtf1026536690

最新推荐文章于 2022-09-03 11:10:53 发布

阅读量151

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/dtf1026536690/article/details/89285462

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1 DOM

2 获取对象

3 事件

4 系列

5 定时器

1 DOM（Docuemnt Object Model 文档对象模型）

一切皆节点。

找对象（元素节点）
设置元素的属性值
设置元素的样式
动态创建和删除元素
事件的触发响应：事件源、事件、事件的驱动程序

2 获取对象

   <div id="box" class="cc"></div>
   <div id="box1" class="cc"></div>

   <script type="text/javascript">
       //获取文件对象
       console.log(document);
       //获取html
       console.log(document.documentElement);
       console.dir(document.documentElement); //显示html的属性方法
       //获取body
       console.log(document.body);

       //通过id获取
       var oDIV = document.getElementById('box');
       console.log(oDIV);
       //通过类名获取
       var oDIV1 = document.getElementsByClassName('cc'); //获得的是一个伪数组，类似argument
       var oDIV2 = document.getElementsByClassName('cc')[0];
       console.log(oDIV1);
       console.log(oDIV2);
       //通过标签获取
       var oDIV3 = document.getElementsByTagName('div')[1];
       console.log(oDIV3);

   </script>

3 事件

绑定事件

       var oDiv = document.getElementById("box");
   //绑定事件的第一种方式
        oDiv.onclick = function () {
   alert("我是弹出的内容");
   };

入口函数window.onload()

当页面加载完毕(文档和图片)的时候，触发onload()函数，文档先加载，图片资源后加载。

图片加载完成才调用onload方法，如果用户网速卡了，然后图片资源加载失败了，此时用户是做不了任何操作的。
window.onload()方法如果脚本中书写两个这样的方法，那么会有事件覆盖现象。

样式属性操作（点击box切换颜色样式）

<head>
   <title>dom</title>
   <meta charset="utf-8">
   <style type="text/css">
       .box{
           width: 200px;
           height: 200px;
           background-color: red;
       }
   </style>

</head>
<body>

   <div id="box" class="box"></div>
   <div id="box1" class="cc"></div>

   <script type="text/javascript">
       window.onload = function () {
           //1 获取事件源
           var o = document.getElementsByClassName("box")[0];

           var isred = true;
           //2 事件
           o.onclick = function(){
               //3 事件驱动
                   //获取值get
               console.log(o.style.backgroundColor); //获取不到，因为是内接式，获取的是div行内
  //的style（内接式、外接式继承行内style）
                   //设置值set
               if(isred){ //点一次变一次颜色
                   o.style.backgroundColor = "yellow";
                   isred = false;
               }

               else{
                   o.style.backgroundColor = "red";
                   isred =true;
               }
           };
       };

值的操作（点击button修改div和input的值）

<body>
   <button id="btn">设置值</button>
   <div id="box">
       wusir
       <h3>哈哈哈</h3>
   </div>
   <input type="text" value="alex" id="user">

   <script type="text/javascript">
       window.onload = function() {
           //1 获取事件源（比较多时可用函数解决冗余）
           var oBtn = document.getElementById("btn");
           var oDiv = document.getElementById("box");
           var oIpt = document.getElementById("user");
           //2 事件
           oBtn.onclick = function(){
               //3 事件驱动
               console.log(oDiv.innerText);
               oDiv.innerText = "alex"; //只修改文本内容

               console.log(oDiv.innerHTML.trim()); //trim()去空格
               oDiv.innerHTML = "<h1>alex</h1>"; //标签和文本内容一起修改

               console.log(oIpt.value);
               oIpt.value = "wusir";
           };
       };
   </script>

标签属性操作（悬浮图标之鼠标悬浮与离开）

<body>
   <a href="javascript:void(0);">
       <img src="./../image/p1.png" alt="上一张" id="prev">
   </a>

   <script type="text/javascript">
       window.onload = function () {
           var oImg = document.getElementById('prev');

           //鼠标悬浮时调用
           oImg.onmouseover = function(){
               console.log(oImg);
               console.log(this); //同上
               //三种方法修改src
               //this.setAttribute("src", "./../image/p2.png");
               this.src = "./../image/p2.png";
               //img.src = "./../image/p2.png";
           };
           //鼠标离开时调用
           oImg.onmouseout = function(){
               this.src = "./../image/p1.png";
           }；
       };
   </script>
</body>

显示与隐藏

法一（通过id修改display）

<button id="btn">隐藏</button>
   <div id="box"></div>

   <script type="text/javascript">
       window.onload = function () {
           var oBtn = document.getElementById("btn");
           var oBox = document.getElementById('box');

           var isShow = true;
           oBtn.onclick = function(){
               if(isShow){
                   oBox.style.display = "none"; //不显示，隐藏
                   isShow = false;
                   this.innerText = "显示"; //同时修改button中的文字
               }
               else{
                   oBox.style.display = "block"; //显示
                   isShow = true;
                   this.innerText = "隐藏";
               }
           };
       };
   </script>

法二（通过添加删除dsp类）

.dsp{
           display: none;
       }

       window.onload = function () {
           var oBtn = document.getElementById("btn");
           var oBox = document.getElementById('box');

           var isShow = true;
           oBtn.onclick = function(){
               if(isShow){
                   //js中设置类用className
                   oBox.className += " dsp"; //利用字符串拼接，注意加空格
                   isShow = false;
                   this.innerText = "显示";
               }
               else{
                   oBox.className -= " dsp"; //删除
                   isShow = true;
                   this.innerText = "隐藏";
               }
           };
       };

节点的操作（对于频繁的操作，不要用此方法，会消耗大量页面资源，应用类里的方法实现）

   <button id="btnInt">插入</button>
   <button id="btnrmv">删除</button>
   <div id="box" class="box"></div>

   <script type="text/javascript">

       function $(id){
           return document.getElementById(id);
       }

       var op = null; //先在此处声明，避免受作用域影响寻不到
       window.onload = function (){
           $("btnInt").onclick = function(){
               //创建标签
               op = document.createElement("h2");
               op.innerText = "hhhhhhh";
               //将子节点添加到父节点中
               $("box").appendChild(op); //添加到最后
               //$("box").insertChild(op, 参考子节点) //添加到参考子节点后
           };
           $("btnrmv").onclick = function(){
               //从父节点中删除此子节点
               $("box").removeChild(op);
           };
       };

       op.parentNode(); //父节点（唯一亲父亲）
       op.childern(); //子节点（复数亲儿子）
   </script>

4 系列

client系列

clientTop //内容区域到边框顶部的距离，说白了，就是边框的高度
clientLeft //内容区域到边框左部的距离，说白了就是边框的宽度
clientWidth //内容区域+左右padding，不含边框可视宽度
clientHeight //内容区域+ 上下padding 可视高度

// 屏幕的可视区域
window.onload = function(){

// document.documentElement 获取的是html标签
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
// 窗口大小发生变化时，会调用此方法
window.onresize = function(){ //监听窗口大小
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
}
}

offset系列

offsetWidth //盒子占位宽 内容+padding+border
offsetHeight //盒子占位高
offsetTop: //如果盒子没有设置定位 到body的顶部的距离,如果盒子设置定位，那么是以父辈为基准的top值
offsetLeft： // 如果盒子没有设置定位到body的左部的距离，如果盒子设置定位，那么是以父辈为基准的left值

scroll系列

window.onscroll = function(){ //监听滚动事件

console.log('上'+document.documentElement.scrollTop); //滚动到当前位置的顶部到初始顶部的距离
console.log('左'+document.documentElement.scrollLeft);
console.log('宽'+document.documentElement.scrollWidth);
console.log('高'+document.documentElement.scrollHeight); //内容的高度+padding 不包含边框
};

5 定时器

       //一次性定时器 异步运行 时间单位为毫秒
       function hello(){
           alert("hello");
       }

       var t1 = window.setTimeout(hello,1000); //执行总时长为1秒
       //var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
       window.clearTimeout(t1);//去掉定时器

       //周期定时器实时刷新时间单位为毫秒
       function refreshQuery(){
           console.log('每1秒调一次')
       }

       var t3 = setInterval('refreshQuery()',1000); //执行步长为1秒
       clearInterval(t3); //清除

<body> //点击动画box以一定步长向右移动，点击清除停止移动
   <button id="btnA">动画</button>
   <button id="clr">清除定时器</button>
   <div id="box"></div>

   <script type="text/javascript">
       oBtnA = document.getElementById('btnA');
       oClr = document.getElementById('clr');
       oId = document.getElementById('box');
       var num = 0;
       function reRefresh(){
           num += 3;
           console.log(num);
           oId.style.marginLeft = num + "px"; //移动box
       }

       var timer = null;
       window.onload = function(){
           oBtnA.onclick = function(){
               clearInterval(timer); //先清理一下timer，以免多次点击叠加在一起
               timer = setInterval("reRefresh()", 800);
           };

           oClr.onclick = function(){
               clearInterval(timer);
           };
       };

   </script>
</body>

dtf1026536690

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript之DOM

1 DOM2 获取对象3 事件4 系列5 定时器1 DOM（Docuemnt Object Model 文档对象模型）一切皆节点。找对象（元素节点）设置元素的属性值设置元素的样式动态创建和删除元素事件的触发响应：事件源、事件、事件的驱动程序2 获取对象 <div id="box" class="cc"...
复制链接

扫一扫