WebApis- BOM&DOM

已于 2022-03-12 13:49:42 修改
阅读量292 收藏
点赞数 1
文章标签： javascript 前端 html5
于 2022-03-01 20:34:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sycVegetableDog/article/details/123152136
版权
本文详细介绍了JavaScript中的DOM操作，包括根据ID、标签名和HTML5新方法获取元素，以及事件基础和事件处理程序。同时讲解了如何改变元素内容、属性、样式以及事件监听和移除。此外，还探讨了BOM中的窗口对象、定时器、页面滚动等概念，以及元素的偏移量和可视区属性。最后，通过实例展示了动画原理和移动端触摸事件的应用。
摘要由CSDN通过智能技术生成

是W3C的标准，主要学习页面交互功能实现交互效果；

API是一些预先定义的函数，简单理解就是给程序员提供的一种工具，以便能轻松的实现想要完成的功能；

Web APIs是浏览器的API；

DOM

在这里插入图片描述

文档对象模型，是处理html或者xml的编程接口；可以通过里面的接口修改网页内容，样式，结构；

  1. 文档：一个文档就是一个页面，DOM中使用document表示；
  2. 元素：页面中所有的标签就是元素；
  3. 节点：网页中所有的内容都是节点，比如标签，内容，文本，注释等。

获取元素

  1. 根据id获取：
    使用getElementByld（）获取，因为文档页面从上往下加载，所以要先有标签 所以我们script写在标签下面；
var timer =document.getElementById('time');
  console.log(timer);
  console.log(typeof timer);//这里返回值是对象object
  console.dir(timer)//它是用来打印我们返回的元素对象，更好地查看里面的属性和方法；

  1. 根据标签名获取：
    使用getElementByTagName（）方法可以获取指定标签名的对象的集合；
    返回对象是获取过来的元素对象的集合，以伪数组的形式存储的；
    如果页面中没有元素，返回的是空的伪数组；

  2. 通过HTML5新增方法获取：
    （1） getElementsByClassName（‘这里面填class的名字’）；根据类名返回元素集合；
    （2）querySelector（‘.box’/‘#nav’/‘li’）：只能返回指定选择器的第一个元素对象；这里切记里面的选择器前面需要加符号；
    （3）querySelectorAll（）：返回的是指定选择器的所有元素对象集合，还是伪数组的形式；这里也要注意选择器前面需要加符号；

  3. 特殊元素获取：
    （1）获取body元素： var bodyEle = document.body;
    （2）获取html元素： document.documentElement;

事件基础

  1. 就是js里面的触发机制；
    事件由三部分组成：事件源，事件类型和事件处理程序；
    事件源：事件被触发的对象；
    事件类型：如何触发；
    事件处理程序：通过函数赋值的方式触发；
<body>
<button id="btn">syc</button>
<script>
    var btn = document.getElementById('btn');
    btn.onclick= function (){
        alert('超棒！')；
    }
</script>
  1. 执行事件的步骤：
    获得事件源----注册事件（绑定事件）----添加事件处理程序（采取函数赋值形式）
<body>
<div>123</div>
<script>
  //1 获取事件源
  var div =document.querySelector('div');
  //2-绑定事件
  div.onclick;
  //3-添加事件处理程序
  div.onclick=function (){
    alert('我被选中了')
  }
</script>

</body>

操作元素（核心）

改变元素内容

  1. element.innerText;不识别html标签；非标准
  2. element. innerHtml；识别html标签；W3C标准；保留空格和换行；

常用元素的属性操作

<body>
<button id="ldh">刘德华</button>
<button id="zxy">张学友</button>
<img src="images/ldh.jpeg" alt="">
<script>
  //修改元素属性 src
  //1-获取元素
  var ldh = document.getElementById('ldh');
  var zxy = document.getElementById('zxy');
  var img = document.querySelector('img');
  //2-注册事件
  zxy.onclick=function (){
      img.src='images/zxy.jpeg';
  }
</script>

</body>

表单元素的属性操作

type,value,checked,selected,disable;

下面展示的是value属性和disabled的用法：

<body>
<button>点这里</button>
<input type="text" value="输入内容">
<script>
    var btn = document.querySelector('button');
    var input = document.querySelector('input');
    btn.onclick =function(){
        input.value='被点击啦';
        //想要某个表单被禁用 不能再点击 用disabled
        btn.disabled=true;
        //和下面这种结果是一样的：
        this.disabled=true;
        //this指向的是这个函数的调用者 在这里就是btn；
    }
</script>
</body>

样式属性操作

  1. element.style :行内样式操作；
  2. element.className：类名样式操作；
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{
      width: 300px;
      height: 300px;
      background-color: pink;
    }
  </style>
</head>
<body>
<div></div>
<script>
  var div=document.querySelector('div');
  div.onclick=function (){
    //div里面的属性采取驼峰命名法
    div.style.backgroundColor='purple';
    div.style.width='400px';
  }
</script>
</body>
淘宝二维码关闭案例

display.none;隐藏
display.block；显示

显示隐藏文本内容

首先表单需要两个事件：
获得焦点onfocus
失去焦点 onblur

节点操作

BOM

操作元素

样式操作

之前讲到，如果样式比较少，或者功能比较简单用element.style修改外观样式：

  1. 获取元素：var xxx= document.queryselector（）；
  2. 触发动作：这里有很多触发动作的比如onclick（），注意后面要用function实现；

类名样式操作

this.className = ’ 类名 ’

var ipt =document.querySelector('.ipt')
  var message = document.querySelector('.message')
  ipt.onblur= function (){
    if(ipt.value.length<6||ipt.value.length>16){
      console.log('wrong');
      message.className='wrong'
      message.innerHTML='位数不对';
    }
  }

排他思想

就是用到了双层循环；首先先排除所有人，然后再设置自己的样式；

  <script>
    //获取所有按钮
    var btns = document.querySelectorAll('button');
    //btn得到的是伪数组，这里遍历每一个button
    for (var i=0;i<btns.length;i++){
      btns[i].onclick=function (){
          //2。所以可以在这里先让所有的背景颜色清空
          for (i=0;i<btns.length;i++){
              btns[i].style.backgroundColor='';
          }
        this.style.backgroundColor='pink';//1。但是这里循环内部累计了，都变粉色了
  }
    }

  </script>
获得/设置/移除属性
  1. getAttribute（属性）；是主要获得自定义的属性；
  2. element.属性；获得内置属性值（元素本身自带的属性）；

设置：

  1. element.属性=值
  2. setAttribute（属性，值）

移除

1 . remove

节点操作

获取节点

.parentNode------------------得到父节点；但这个得到的是离他最近的父节点；如果找不到父节点就返回为空null；

console.log(erweima.parentNode);//这个就是erweima的父节点

.childNode--------------------得到子节点；
.children-----------------------也是得到子节点，是实际开发常用的；

DOM 提供的方法（API）获取
        var ul = document.querySelector('ul');
        var lis = ul.querySelectorAll('li');

子节点  childNodes 所有的子节点 包含 元素节点 文本节点等等
        console.log(ul.childNodes);
        console.log(ul.childNodes[0].nodeType);
        console.log(ul.childNodes[1].nodeType);

children 获取所有的子元素节点 也是我们实际开发常用的
        console.log(ul.children);

firstChild/lastChild----------------第一个/最后一个子节点，不管是文本节点还是元素节点；
firstElementChild/lastElementChild----------------第一个/最后一个子元素节点；

返回第一个子元素节点 ie9才支持
        console.log(ol.firstElementChild);
        console.log(ol.lastElementChild);

实际开发的写法 既没有兼容性问题又返回第一个子元素,就是用刚才那种返回子元素的方法，后面加上数组下标:

console.log(ol.children[0]);
console.log(ol.children[ol.children.length - 1]);
创建节点

分为两步： 1. 创建元素 2. 添加元素
.createElement-----------------------------创建；
node.appendChild(child)-----------------添加，类似数组里面的push；
node.insertBefore(child, 指定元素)------添加到指定元素的前面；

// 1. 创建节点元素节点
        var li = document.createElement('li');
        // 2. 添加节点 node.appendChild(child)  node 父级  child 是子级 后面追加元素  类似于数组中的push
        var ul = document.querySelector('ul');
        ul.appendChild(li);
        // 3. 添加节点 node.insertBefore(child, 指定元素);
        var lili = document.createElement('li');
        ul.insertBefore(lili, ul.children[0]);
        // 4. 我们想要页面添加一个新的元素 ： 1. 创建元素 2. 添加元素
删除节点

node.removeChild(child)--------------------------删除元素

复制节点
  1. 复制：xxx.node.Clone()；（）为空或为false的话只复制标签，不复制里面的内容；xxx.node.Clone(true)的话是复制里面的内容；
  2. 然后用appendChild添加进去就行了；
3种动态创建元素
  1. document.write 直接写入内容流，但是文档流执行完毕会导致页面重绘；
  2. inner.HTML 将内容写入某个DOM节点，不会导致页面冲绘；
    创建多个元素效率高，不要采用拼接字符串，采用数组形式拼接，结构稍微复杂；
  3. createElenemt（），创建多个元素效率稍微低一点，但是结构清晰；

操作元素总结

操作元素内容：innerText；innerHTML；
操作元素常见属性：src href title alt
操作表单元素属性：type，value，disabled
操作元素常见样式：元素少用element.style;元素多用className；

事件

注册事件

  1. 传统方式：比如onclick

  2. 方法监听注册方式：

    addEventListener事件监听方式
    (1) 里面的事件类型是字符串 必定加引号 而且不带on
    (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）

btns[1].addEventListener('click', function() {
        alert(22);
    })
    btns[1].addEventListener('click', function() {
            alert(33);
        })

删除事件

  1. 传统方式删除事件:在注册事件的function下面写上=null；
divs[0].onclick = null;
  1. removeEventListener 删除事件
divs[1].addEventListener('click', fn)//这里先写移除函数，不需要调用➕小括号
function fn() {//这里定义fn这个函数
            alert(22);
            divs[1].removeEventListener('click', fn);
        }
  1. detachEvent删除事件；
 divs[2].attachEvent('onclick', fn1);

        function fn1() {
            alert(33);
            divs[2].detachEvent('onclick', fn1);
        }

DOM事件流

事件流描述的是从页面中接收事件的顺序，分为三个阶段：

  1. 捕获阶段：如果addEventListener 第三个参数是 true 那么则处于捕获阶段
  2. 当前目标阶段
  3. 冒泡阶段：如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段 son -> father ->body -> html -> document

在这里插入图片描述

事件对象

  1. event 就是一个事件对象 写到我们侦听函数的 小括号里面 当形参来看
  2. 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
  3. 事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息 比如 判断用户按下了那个键
  4. 这个事件对象我们可以自己命名 比如 event 、 evt、 e
  5. 事件对象也有兼容性问题 ie678 通过 window.event 兼容性的写法 e = e || window.event;
事件对象常见属性和方法：在这里插入图片描述

常见事件对象的属性和方法：
1. e.target 返回的是触发事件的对象（元素） this 返回的是绑定事件的对象（元素）
区别 ： e.target 点击了那个元素，就返回那个元素 ；this 那个元素绑定了这个点击事件，那么就返回谁
2. e.preventDefault() 阻止默认行为（事件） 让链接不跳转 或者让提交按钮不提交；return false也可以，但是只要有return的话后面的代码就不执行了；
3. 怎么阻止冒泡：
标准写法：e,stopPropagation（），stop 停止 ，Propagation 传播；
e.cancelBubble = true;

事件委托

鼠标事件

我是一段不愿意分享的文字
    <script>
      //禁止鼠标右键菜单contextmenu
      document.addEventListener('contextmenu',function (e) {
          e.preventDefault();
      })

      //禁止鼠标选中文字
      document.addEventListener('selectstart',function (e) {
          e.preventDefault();
      })

// 鼠标事件对象 MouseEvent
        document.addEventListener('click', function(e) {
            // 1. client 鼠标在可视区的x和y坐标，就是当前的可视界面的位置
            console.log(e.clientX);
            console.log(e.clientY);
            console.log('---------------------');

            // 2. page 鼠标在页面文档的x和y坐标，就是相对于一整个页面从头开始的坐标
            console.log(e.pageX);
            console.log(e.pageY);
            console.log('---------------------');

            // 3. screen 鼠标在电脑屏幕的x和y坐标
            console.log(e.screenX);
            console.log(e.screenY);
mouseenter和mouseover的区别

mouseenter只经过自身盒子触发；
mouseover经过自身盒子和经过子盒子都触发；

常用键盘事件

  1. keyup 按键弹起的时候触发
  // document.onkeyup = function() {
    //         console.log('我弹起了');

    //     }
    document.addEventListener('keyup', function() {
        console.log('我弹起了');
    })
  1. keydown 按键按下的时候触发 能识别功能键 比如 ctrl shift 左右箭头啊
 document.addEventListener('keydown', function() {
            console.log('我按下了down');
        })
  1. keypress 按键按下的时候触发 不能识别功能键 比如 ctrl shift 左右箭头啊
document.addEventListener('keypress', function() {
            console.log('我按下了press');
        })

三个事件的执行顺序 keydown – keypress – keyup

键盘事件对象
  1. keyCode（添加侦听器）
    其中keyup和keydown不区分字母大小写，keypress区分字母大小写；实际开发里面常用keyup和keydown；
 document.addEventListener('keyup',function (e) {
    console.log(e.keyCode)
  })

案例：京东快递单号查询

<div class="search">
<!--  字号偏大的一个盒子-->
  <div class="con">123</div>
<!--  下面的一个输入盒子-->
  <input type="text" placeholder="请输入您的快递单号" class="jd">
</div>
<script>
  var con = document.querySelector('.con')
  var jd_input = document.querySelector('.jd')
  jd_input.addEventListener('keyup',function () {
    if (this.value==''){
      con.style.display='none'
    }else {
      con.style.display = 'block';
      con.innerText = this.value;
    }
  })

这个案例里面就必须要用keyup，因为字还没按进去的时候，就触发了事件，触发事件的时候value为空，为空时display还是none，取不过来；

BOM浏览器对象模型

BOM–浏览时对象模型；给浏览器窗口做交互效果；比DOM大，document就是window对象的一部分；

window对象常见的事件

加载

window.onload-------页面加载事件：就是在页面中所有元素和事件都加载完成之后再开始执行这个事件；这样就可以把js的代码写在页面元素的任何地方；但这种注册事件方式只能写一个，如果有多个就只执行最后那个，所以我们平时生产环境里面会用到另一种实现方式：window.addEventListener('load',function(){})

DOMContentLoaded-------窗口加载事件，仅当DOM加载完成事件就触发；不包括要再去加载样式表，图片，flash等；就是只要各种标签加载完就可以了；这个更快一点；
window.addEventListener('DOMContentLoaded',function(){})

窗口大小

window.onresize-----只要窗口大小发生变化就会触发这个事件；
window.innerWidth是当前屏幕宽度
window.addEventListener('resize',function(){})

定时器
  1. setTimeout（调用函数-字符串形式，[延迟的秒数]）---------用于设置一个定时器，该定时器在定时器到期后执行调用函数，这里这个调用函数就是回调函数；
1.
setTimeout(function() {
            console.log('时间到了');

        }, 2000);

2.
function callback() {
            console.log('爆炸了');

        }
        var timer1 = setTimeout(callback, 3000);

模拟五秒钟关闭广告：

<img src="images/ad.jpg" alt="" class="ad">
<script>
  var ad = document.querySelector('.ad');
  setTimeout(function () {
    ad.style.display='none';
  },5000)
</script>
  1. 停止定时器：clearTimeout（定时器名字）

<img src="images/ad.jpg" alt="" class="ad">
<button>不管广告啦</button>
<script>
  var ad = document.querySelector('.ad');
  var btn = document.querySelector('button')
  var Timer=setTimeout(function () {
    ad.style.display='none';
  },5000)

  btn.addEventListener('click',function () {
    clearTimeout(Timer);
  })
</script>
  1. setInterval()计时器；这个是每隔所定的时间，就调用一次function；
<script>
  var Timer = setInterval(function () {
    console.log('syc超棒')
  },1000);
</script>
  1. 这个也有停止计时效果：clearInterval（定时器名字）；
tihs指向问题

在全局作用下的函数都是window的方法，一般情况下this指向的都是window；
谁调用的函数，this指向的就是哪个对象；

js执行机制

  1. 先执行主线程执行栈，在执行放入任务队列中的异步任务 ；（主线程就是同步任务，任务队列是异步任务）；

location对象

  1. location.assign():页面跳转
  2. location.replace():页面跳转但是不能回退，由于不记录浏览历史
  3. location.reload():加载刷新的意思，不加参数就是刷新，加参数true就是强制刷新；

navigator对象

history对象

history.forward():前进
history.back():后退
history.go():前进x步，这个x就是（）里面的参数，写几就是几，甚至可以是-1；

pc端网页特效

元素偏移量 offset系列

  1. 可以获取元素距离父元素的位置（带有定位，如果没有带有定位的话就以body为准）；
console.log(father.offsetTop);
        console.log(father.offsetLeft);
  1. 可以返回当前元素的偏移位置，大小；包含padding + border + width
console.log(w.offsetWidth);
        console.log(w.offsetHeight);
  1. 返回带有定位的父亲 否则返回的是body;
console.log(son.offsetParent); // 返回带有定位的父亲 否则返回的是body
        console.log(son.parentNode); // 返回父亲 是最近一级的父亲 亲爸爸 不管父亲有没有定位
  1. 和style的区别：就是去获取位置什么的时候，可以用offset，但是offset是只读属性，style是可读写属性，是可以进行赋值改变的；

元素可视区client系列

立即执行函数：不用进行调用直接执行；
两种写法：（function（） {}）（）；或者(function(){}());
dpr 物理像素比

元素滚动scroll系列

（仿淘宝页面滚动案例）
获得的是元素真正的，元素内容大小；
scroll就是被卷进去的长度

  1. scroll滚动事件：当我们滚动条发生变化的时候会触发的事件；
  2. pageYoffset 页面被卷进去的部分
三大系列总结

在这里插入图片描述
它们擅长的用法：

  1. offset系列：经常用于获取元素位置： offsetLeft，offsetTop；
  2. client系列：经常用于获取元素大小：clientWidth，clientHeight；
  3. scroll系列：经常用于获取滚动距离：scrollTop，scrollLeft；
  4. 注意页面滚动的距离通过window.pageXOffset实现的；

动画原理

  1. 获得盒子当前位置
  2. 让盒子在当前位置加上1个移动距离
  3. 利用定时器不断重复这个操作
  4. 加一个结束定时器的条件
  5. 注意：动画效果必须要加定位；
 var div = document.querySelector('div');
        var timer = setInterval(function() {
            if (div.offsetLeft >= 400) {
                // 停止动画 本质是停止定时器
                clearInterval(timer);
            }
            div.style.left = div.offsetLeft + 1 + 'px';
        }, 30);
给不同的元素添加不同的定时器
  1. obj.timer；
  2. 一个bug：不断点击定时器就开启了很多个定时器，速度就会越来越快
    解决方案就是：让我们的元素只有一个定时器执行
    先清除以前的定时器，只保留当前的一个定时器执行：
clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                if (obj.offsetLeft >= target) {
                    // 停止动画 本质是停止定时器
                    clearInterval(obj.timer);
                }
                obj.style.left = obj.offsetLeft + 1 + 'px';

            }, 30);
缓慢动画

缓动动画函数封装obj目标对象 target 目标位置
思路：
1. 让盒子每次移动的距离慢慢变小， 速度就会慢慢落下来。
2. 核心算法：(目标值 - 现在的位置) / 10 做为每次移动的距离 步长
(有步长还能让步长成为负数，往后退)

 var step = (target - obj.offsetLeft) / 10;
  1. 停止的条件是： 让当前盒子位置等于目标位置就停止定时器

移动端

移动端触摸事件

sycVegetableDog
关注
JS-Web-API —— ECMAScript，BOM，DOM
A_Tamir的博客
09-14 498
一个完整的JavaScript实现应该由三部分组成 —— ECMAScript（核心），DOM（文档对象模型），BOM（浏览器对象模型）。 ECMAScript 由ECMA-262定义的ECMAScript与Web浏览器没有依赖关系。ECMAScript定义的只是这么语言的基础。 我们常见的Web浏览器只是ECMAScript实现可能的宿主环境之一。我们学习的这个是浏览器端的...
Web APIs /APIs --DOM简述/DOM中获取元素方法/事件（含鼠标事件）/操作（含案例）
weixin_50119334的博客
10-02 523
Web APIs Web APIs 和 JS 的关联性： Web APIs是 W3C 组织的标准，主要学习DOM 和 BOM Web APIs是 JS 所独有的部分 主要学习页面交互功能 Web APIs 是 JS 的应用 总结： API 是一种接口工具，以实现某些功能，只要会使用就可以了 Web APIs是浏览器提供的一套操作浏览器功能（BOM) 和 页面元素(DOM)的API Web APIs 一般都有输入和输出，Web APIs很多都是方法（函数） 可以结合前面学习内置对象方法的思路学习 D
掌握Web API BOM DOM的使用
weixin_45615623的博客
09-24 311
Web API介绍 API的概念 API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。 任何开发语言都有自己的API API的特征输入和输出(I/O) API的使用方法(console.log(‘adf’)) Web ...
WebAPI之DOM和BOM
weixin_30301449的博客
04-16 826
API是什么？ Application Programming Interface：应用程序编程接口，是一些预先定义的函数，通俗的理解就是一些方法。 WebAPI是什么？ 浏览器提供的一套操作浏览器功能和页面元素的API。 此处的Web API特指浏览器提供的一些方法。可分为两个部分：BOM(浏览器对象模型)、DOM（页面对象模型） DOM DOM的概念 文档对象模型（Documen...
Web APIs+DOM+BOM
DYHHH06的博客
04-20 2220
API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。
JavaScript——WebAPI(DOM+BOM)
WikY
10-10 309
DOM 文档对象模型 获取元素 根据ID获取：document.getElementByID() 根据标签名获取：document.getElementsByTagName() 根据类名获取(H5新增)：document.getElementsByClassName() ​ document.querySelector() ​ document.querySelectorAll() 获取body和html： ​ document.body() ​ documen
Web APIs--Dom获取&属性操作
atatsuki的博客
06-20 765
操作元素内容（修改元素的文本更换内容DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象。方法：1.对象.innerText 属性2.对象.innerHTML 属性1. 元素innerText 属性将文本内容添加/更新到任意标签位置显示纯文本，不解析标签4.操作元素属性。
JS-WebAPIs-DOM基础
Fky_mie的博客
03-07 994
JS-WebAPIs第1天-DOM 参考: pink老师JS基础 JavaScript基础语法-dom/bom-es6-jQuery-数据可视化echarts-包含笔记源码作业黑马程序员pink老师前端入门视频教程（持续更新） MDN-Web API接口参考 文档对象模型 文章目录JS-WebAPIs第1天-DOMWeb APIs 和JS基础的关联性一. 什么是DOM(Document Object Model)二. 事件-获取页面元素当事件源2.1 document.getElementById()根
Web APIs笔记01——DOM-获取DOM元素、修改属性
visionchyw的博客
06-28 319
Web APIs笔记01——DOM-获取DOM元素、修改属性
前端开发中Web APIs的基本使用与深入理解
最新发布
11-13
内容概要：本文详细介绍了 Web APIs 的基本概念及其主要分类，包括 DOM 和 BOM。特别讲解了 DOM 的核心思想，如何通过 JS 操作 HTML 文档的各种方法，如元素查找、内容修改、属性操作、样式设置、表单属性控制及...
JSWeb APIS笔记：深入理解DOM、BOM与数据存储
资源摘要信息:"JSWeb APIS笔记" JSWeb API是JavaScript中用于开发Web应用程序的关键接口集合。它包括了实现用户界面交互、数据处理、文档对象模型（DOM）操作、浏览器对象模型（BOM）交互、以及本地数据存储等功能...
WebAPI之DOM，BOM基础
qq_36392801的博客
02-16 547
Web API 相关 概念：API 是一些预先定义的函数，目的是提供应用程序给开发人员，以获得操作软件或硬件的能力，不需要看源码，只需要直到输入什么，输出什么。 任何语言都有自己的 API API 特征：输入，输出 Web API 主要是 DOM 和 BOM DOM 相关 概念：文档对象模型，是W3C推荐的处理可扩展标记语言的标准接口。是一种与平台和语言无关的程序接口，可以动态的访问程序和脚本，更新其内容，结构； DOM 是一种基于数的 API 文档，它要求整个文档都表示在存储器中。 DOM 树 文档
7、JavaScript Web API、BOM、DOM
阿牧路泽
03-29 284
JavaScript API
Web前端学习笔记——JavaScript之WEBAPI、BOM、DOM及获取页面元素
唯恋殊雨的博客
09-24 2530
Web API Web API介绍 API的概念 API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。 任何开发语言都有自己的API API的特征输入和输出(I/O) API的使用方法(console.log()) We...
跟着尚硅谷学vue2—进阶版2.0—使用 Vue 脚手架1.0
zhzijun的博客
11-13 381
分析脚手架 、ref和props、mixin混入、插件、scoped样式、总结TodoList案例、浏览器本地存储-webStorage、TodoList_本地存储
Vue中的常用指令
m0_62388400的博客
11-12 951
指令（Directives）是 Vue 提供的带有的 特殊 标签。为啥要学：提高程序员操作 DOM 的效率。vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令 （v-bind）双向绑定指令（v-model）列表渲染指令（v-for）指令是 vue 开发中最基础、最常用、最简单的知识点。
Javascript中Map与Set以及其常见遍历方式
警警的博客
11-12 650
在JavaScript中，Map和Set是两种非常重要的集合类型，它们提供了比传统对象（Object）和数组（Array）更强大和灵活的数据存储和操作方法。下面是对Map和Set的详细解释。
解决@ant-design-vue/nuxt模块加载到许多没用到的组件，影响开发下加载速度的问题
清晰编程
11-12 141
升级命令：npm up @ant-design-vue/nuxt。解决方法：将该模块版本升级到1.4.6。
如何编译 Cesium 源码
ismartcube的博客
11-13 693
通过以上步骤，您可以成功地从 GitHub 上下载 Cesium 源代码并在本地进行编译。对于开发人员来说，编译 Cesium 源码有助于定制功能，或者调试某些问题。如果您只是想使用 Cesium 进行开发，而不需要编译源代码，您也可以直接从 CDN 或下载预构建版本进行使用。编译的 Cesium 版本可以直接在您的应用中引用，或者部署到 Web 服务器上，供其他用户访问。提供一个高效、兼容、优化的数据转换工具，一站式完成数据转换、数据发布、数据预览操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值