丸子学JS（学习2小时 - BOM与DOM）

2023-11-22  本文已影响0人  丸子小姐__不懂爱

前言

学到这一块，感觉内容好多，学到一半有点力不从心，硬着头皮看到最后，结果发现前面有些又忘记了，往返看了3遍，大致有了一点轮廓，自己动手简单归纳了下

DOM

获取节点

节点操作

尝试一下

let oWrapper = document.querySelector('.wrapper')
let oBtns = document.querySelectorAll('button')
let oDivs = oWrapper.querySelectorAll('div')
oBtns[0].onclick = function() {
    let oDiv = document.createElement('div')
    oDiv.innerHTML = 7;
    oWrapper.appendChild(oDiv)
}
oBtns[1].onclick = function() {
    let oDiv = document.createElement('div')
    oDiv.style.background = '#12ccfa'
    oDiv.innerHTML = '插入';
    oWrapper.insertBefore(oDiv, oDivs[2])
}
oBtns[2].onclick = function() {
    let oDiv = document.createElement('div')
    oDiv.style.background = '#12ccfa'
    oDiv.innerHTML = '替换';
    oWrapper.replaceChild(oDiv, oDivs[4])
}
oBtns[3].onclick = function() {
    oWrapper.appendChild(oDivs[0].cloneNode(true))
}
oBtns[4].onclick = function() {
    oWrapper.removeChild(oDivs[0])
}

属性操作

尝试一下

let oBtns = document.querySelectorAll('button')
let oDiv = oWrapper.querySelector('div')
oBtns[0].onclick = function() {
   let res = oDiv.getAttribute('class')
   alert(res)
}
oBtns[1].onclick = function() {
    oDiv.setAttribute('class', 'active')
}
oBtns[2].onclick = function() {
    oDiv.removeAttribute('class')
}
oBtns[3].onclick = function() {
    oWrapper.appendChild(oDivs[0].cloneNode(true))
}

文本操作

● insertData(offset,String) 从offset指定的位置插入string
● appendData(string) 将string插入到文本节点的末尾处
● deleteData(offset,count) 从offset起删除count个字符
● replaceData(offset,count,string) 从offset将count个字符用string替代
● splitData(offset) 从offset起将文本节点分成两个节点
● substring(offset,count) 返回offset起的count个节点
● innerHTML 返回或插入节点文本
● innerText 返回或插入节点文本

节点属性

浏览器窗口可视区域大小

var w = document.documentElement.clientWidth || document.body.clientWidth;
var h = document.documentElement.clientHeight || document.body.clientHeight;

BOM

navigator导航器对象

  1. appCodeName 返回浏览器的代码名
  2. appName 返回浏览器的名称
  3. appVersion 返回浏览器的平台和版本信息
  4. cookieEnabled 返回指明浏览器中是否启用cookie的布尔值
  5. platform 返回运行浏览器的操作系统平台
  6. userAgent 返回由客户机发送服务器的 user-agent 头部的值

screen显示器对象

  1. availHeight 返回显示屏幕的可用高度
  2. availWidth 返回显示屏幕的可用宽度
  3. height 返回屏幕的像素高度
  4. width 返回屏幕的像素宽度
  5. colorDepth 返回屏幕颜色的位数

history历史对象

  1. back（） 返回前一个Url
  2. forward（） 返回下一个Url
  3. go（） 返回某个具体页面

location位置对象

document文档对象

窗口控制

a) moveBy 按照给定像素参数移动指定窗口
b) moveTo 将窗口移动到指定的指定坐标(x,y)处
c) resizeBy 将当前窗口改变指定的大小(x,y)
d) resizeTo 将当前窗口改变成(x,y)大小， x,y分别是宽度和高度
e) scrollBy 将窗口中的内容按给定的位移量滚动，参数为正数，正向滚动，反之
f) scrollTo 将窗口中的内容滚动到指定位置

焦点控制

a) focus() 得到焦点
b) blur() 失去焦点

打开/关闭窗口

a) open 打开一个新的窗口，并在窗口中装载指定URL地址的网页
b) close 自动关闭浏览器窗口

定时器

a) setTimeout 当到了指定的毫秒数后，自动执行功能代码
b) clearTimeout 取消由setTimeout() 设置的定时器
c) setInterval 按指定周期重复执行功能代码
d) clearInterval 取消由setInterval()设置的时间间隔器

尝试一下

<div id="wrapper" class="wrapper">
  <img src="img/1.jpg"/>
  <img src="img/2.jpg"/>
  <img src="img/3.jpg"/>
  <img src="img/4.jpg"/>
  <img src="img/5.jpg"/>
  <img src="img/6.jpg"/>
  <div class="circle">
    <span class="current">1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
  </div>
</div>
var wrap = document.getElementById("wrapper");
  var oImages = document.getElementsByTagName("img");
  var oSpans = document.getElementsByTagName("span");
  var num = 0;
  var timer = play = null;
  var index = 0;
  //小圆点切换
  for(var i = 0; i < oSpans.length; i++){
    oSpans[i].index = i;
    oSpans[i].onmouseenter = function (){
      //将当前远点的索引传递给函数
      showImg(this.index);
    }
  }
  //自动播放图片
  function autoPlay (){
    play = setInterval(function (){
      index++;
      index >= oImages.length && (index = 0);
      showImg(index);
    },2000)
  }
  autoPlay();
  // 图片切换，淡入淡出
  function showImg(p){
    //关联圆点的索引
    index = p;
    var alpha = 0;
    //小圆点追加样式
    for(var i = 0; i<oSpans.length; i++){
      //清除所圆点的样式
      oSpans[i].className = "";
    }
    //留下当前的添加类名
    oSpans[index].className = "current";
    
    clearInterval(timer);
    timer = setInterval(function(){
      alpha +=2;
      if(alpha>100){
        alpha = 100;
      }
    for(var i = 0; i < oImages.length; i++){
      //所有的图片透明
      oImages[i].style.opacity = 0;
      oImages[i].style.filter = "alpha(opacity = 0)";
    }
      //当前图片显示
      oImages[index].style.opacity = alpha / 100;
      oImages[index].style.filter = "alpha(opacity =" + alpha + ")";
      //图片不透明，则停止定时器
      alpha == 100 && clearInterval(timer);
    },20);
  }
  //移入清除定时器
  wrap.onmouseover = function(){
    clearInterval(play);
  }
  //移出重新开启定时器
  wrap.onmouseout = function (){
    autoPlay ();
  }

对话框

a) alert 弹出一个警告框，在警告框内显示提示字符串文本
b) confirm 显示一个确认框，在确认框内显示提示字符串
c) prompt 显示一个输入框，在输入框内显示提示字符串

属性

上一篇 下一篇

猜你喜欢

热点阅读