JavaScript：Web APIs&DOM&BOM_window对象

Web APIs

JavaScript的组成

JavaScript：Web APIs&DOM&BOM_加载_02

BOM—浏览器对象模型

一套操作浏览器功能的API
通过BOM可以操作浏览器窗口。
比如：弹出框、控制浏览器跳转、获取分辨率等

DOM—文档对象模型

一套操作页面元素的API
DOM可以把HTML看作是文档树，通过DOM提供的API可以对树上的节点进行操作

DOM

基本概念

文档对象模型(Document Object Model，简称DOM)。是W3C组织推荐的处理可扩展标记语言的标准编程接口。
它是一种与平台和语言无关的应用程序接口，它可以动态的访问程序和脚本，更新其内容、结构和风格

DOM又称为文档树模型

  1. 图示
    JavaScript：Web APIs&DOM&BOM_加载_03
  2. 概念
    ① 文档：一个网页可以称之为文档
    ② 节点：网页中所有内容都是节点（标签、属性、文本、注释等）
    ③ 元素：网页中的标签
    ④ 属性：标签的属性
  3. DOM常用操作
    ① 获取文档操作
    ② 对文档元素进行增删改查操作
    ③ 事件操作

window和document

  1. window
    ① 所有的浏览器都支持window对象，它支持浏览器窗口
    ② 所有的js全局对象，函数以及变量都能自动成为window对象的成员
    ③ 全局变量是window对象的属性，全局函数是window对象的方法
  2. document
    每一个载入浏览器的HTML文档都会成为Document对象；
    ① document也是window对象的属性之一
    ② document对象是documentHTML的一个实例，也是window对象的一个属性，因此可以将document对象作为一个全局对象来访问
    ③ 常用属性
    console.log(document);
console.log(document.childNodes);
console.log(document.head);
console.log(document.body);
document.title = "测试";
console.log(document.title);
    ④ 常用方法
    open() 打开一个流,已收集来自任何document.write()或document.writeln()方法的输入
close() 关闭眼红document.open()方法打开的输入流，并显示选定的数据
write() 向文档写入HTML表达式或者javascript代码
writeln() 等同于write方法，不同的是在每个表达式之后都有一个换行符
getElementById()
getElementsByName()
getElementsByTagName()

事件

  1. 基本概念
    ① 事件
    触发 - 响应机制
    用户和浏览器之间的交互行为，比如：点击按钮，鼠标进入/离开、双击
    ② 事件三要素
    事件源：触发(被)事件的元素
    事件名称：click 点击事件
    事件处理程序：事件触发后要执行的代码(函数形式)
  2. 使用方式
    ① 我们可以在事件对应的属性中实现一些js代码，这样当事件被触发时，这些代码会执行
    ② 比如：点击按钮
    Ⅰ. 方式一： 结构和行为耦合，不方便维护，不推荐使用
    <button id="btn" onmousemove="alert('123');">按钮1</button>
    Ⅱ. 方拾二：为按钮的对应事件绑定处理函数的形式来响应事件
    var btn = document.getElementByID('btn');
btn.onclick = function(ev){
	alert('123');
}

文档加载过程

  1. 存在问题
    浏览器在加载一个页面时，是按照自上向下的顺序加载的
    读取到一行就运行一行，如果将script标签写在head内部，在执行代码时候，页面还没有加载，页面中的DOM对象也没有加载
    会导致在js中无法获取到页面中的DOM对象
  2. 解决方案
    ① onload事件
    onload事件会在整个页面加载完成之后才触发
    为window绑定一个onload事件，该事件对应的响应函数将会在页面加载完成之后执行，这样可以确保我们的代码执行时所有的DOM对象已经加载完毕
    window.onload = function(ev){
	var btn = document.getElementById('btn');
	btn.onclick = function(ev){
		alert('123');
	}
}
    ② 把script标签放在body尾部
    ③ 建议两者结合综合使用
  3. 补充
    ① onload 当页面完全加载后执行
    ② onunload 当用户退出界面时执行

文档页面元素获取

  1. 根据id获取元素：唯一性
    var div = document.getElementById('box');
console.log(div);
    注意：
    ① 获取到的数据类型是HTMLDivElement，对象都是有类型的
    ② id名具有唯一性
  2. 根据标签名获取元素：返回数组
    var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length ; i++) {
    var div = divs[i];
    console.log(div);
}
  3. 根据name获取元素：返回数组
    var divs = document.getElementsByName('like');
for (var i = 0; i < divs.length ; i++) {
    var div = divs[i];
    console.log(div);
}
  4. 根据类名获取元素：返回数组
    var divs = document.getElementsByClassName('box');
for (var i = 0; i < divs.length; i++) {
    var div = divs[i];
    console.log(div);
}
  5. 根据选择器获取元素
    var box = document.querySelector('#box');
console.log(box);

var boxs = document.querySelectorAll('.box');
for (var i = 0; i < boxs.length ; i++) {
    var box = boxs[i];
    console.log(box);
}
    ① querySelector 唯一
    ② querySelectorAll 数组

节点之间关系

<div id="box">
    <button class="btn">点我</button>
    <span id="span">
        <a href="#">123</a>
    </span>
    <p class="lk">我是段落</p>
    <div>哈哈哈</div>
</div>

  1. 获取父节点：parentNode

    // 通过子盒子设置父盒子颜色
window.onload = function (ev) {
    var a = document.getElementsByTagName('a')[0];
    var span = a.parentNode;
}

  2. 下一个兄弟节点

    var span = document.getElementById('span');
var nextEle = span.nextElementSibling || span.nextSibling; //优先拿元素节点

    ① nextElementSibling 获取标签节点
    ② nextSibling 获取任意节点

  3. 上一个兄弟节点

    var span = document.getElementById('span');
var preEle = span.previousElementSibling || span.previousSibling;

  4. 获取标签中第一个节点

    var box = document.getElementById('box');
var firstEle = box.firstElementChild || box.firstChild;

  5. 获取标签中最后一个节点

    var box = document.getElementById('box');
var lastEle = box.lastElementChild || box.lastChild;

  6. 获取所有元素节点
    ① 节点类型 nodeType
    JavaScript：Web APIs&DOM&BOM_数组_04

    var box = document.getElementById('box');
var allNodes = box.childNodes;	//获取所有节点
var allEle = box.children;	//获取所有标签节点

    ② 使用childNodes方法获取所有标签节点？

    // 1. 获取标签
  var box = document.getElementById('box');
  // 2. 获取标签内部的所有节点
  var allNodeLists = box.childNodes;
  // 3. 过滤元素节点
  var newListArr = [];
  allNodeLists.forEach(function (value, key, parent) { 
      if(value.nodeType === 1){
          newListArr.push(value);
      }
  })

节点操作

  1. CRUD（增删改查）

    1. 追加
      ① 直接追加到尾部
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="box">
        <p id="word">123</p>
        <button id="btn">点我</button>
    </div>
</body>
<script>
    window.onload = function (ev) {
        var box = document.getElementsByClassName('box')[0];
        //  创建节点
        var img = document.createElement('img');
        img.src = '阿鲁14.gif';
        box.appendChild(img);
    }
</script>
</html>
      运行结果：
      JavaScript：Web APIs&DOM&BOM_数组_05
      ② 插入到某一个元素后面
      var box = document.getElementsByClassName('box')[0];
//  创建节点
var img = document.createElement('img');
img.src = '阿鲁14.gif';
var btn = document.getElementById('btn');
box.insertBefore(img, btn);
      运行结果：
      JavaScript：Web APIs&DOM&BOM_window对象_06
    2. 删除节点
      ① 拿到标签调用删除方法
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="box">
        <p id="word">123</p>
        <button id="btn">点我</button>
    </div>
</body>
<script>
    window.onload = function (ev) {
        var box = document.getElementsByClassName('box')[0];
        // 删除节点
        var btn = document.getElementsByTagName('button')[0];
        btn.remove();
    }
</script>
</html>
      运行结果：
      JavaScript：Web APIs&DOM&BOM_获取标签_07
      ② 将节点从父节点中移除
      window.onload = function (ev) {
    var box = document.getElementsByClassName('box')[0];
    // 删除节点
    var btn = document.getElementsByTagName('button')[0];
    box.removeChild(btn);
}
      运行结果：
      JavaScript：Web APIs&DOM&BOM_window对象_08

  2. 节点克隆
    ① 浅克隆：只克隆当前一个标签节点，内部子节点不克隆

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="box">
    <p class="word">123</p>
    <button class="btn">点我</button>
</div>
</body>
<script>
    window.onload = function (ev) {
        var box = document.getElementsByClassName('box')[0];
        // 克隆节点
        var newBox = box.cloneNode();  //浅克隆：
        console.log(newBox);
    }
</script>
</html>

    运行结果：
    JavaScript：Web APIs&DOM&BOM_数组_09
    ② 深克隆：全部克隆

    window.onload = function (ev) {
        var box = document.getElementsByClassName('box')[0];
        // 克隆节点
        var newBox = box.cloneNode(true);  //深克隆：
        console.log(newBox);
    }

    运行结果：
    JavaScript：Web APIs&DOM&BOM_window对象_10
    ③ 往body中添加

    document.body.appendChild(newBox);

    运行结果：
    JavaScript：Web APIs&DOM&BOM_html_11
    ④ 注意：带id的节点不能克隆。id具有唯一性。

  3. 节点属性（节点.属性）
    ① 获取标签属性：getAttribute

     var img = document.getElementsByTagName('img')[0];
 console.log(img.getAttribute('src'));
 console.log(img.src);

    ② 设置标签属性：setAttribute
    注意：我们不仅能设置已有属性，也可以添加任意我们想添加的属性。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="box">
    <p class="word">123</p>
    <button class="btn">点我</button>
    <img/>
</div>
</body>
<script>
    window.onload = function (ev) {
        var img = document.getElementsByTagName('img')[0];
        img.setAttribute('src','阿鲁14.gif');
        img.setAttribute('alt','这是阿鲁。');
        img.setAttribute('lover','zhengxiaohui');
        img.setAttribute('huankai','zhengxiaohui');
    }
</script>
</html>

    运行结果：
    JavaScript：Web APIs&DOM&BOM_window对象_12
    ③ 删除属性：removeAttribute

    window.onload = function (ev) {
    var img = document.getElementsByTagName('img')[0];
    img.setAttribute('src','阿鲁14.gif');
    img.setAttribute('alt','这是阿鲁。');
    img.setAttribute('lover','zhengxiaohui');
    img.setAttribute('huankai','zhengxiaohui');
    img.removeAttribute('huankai');
}

    运行结果：
    JavaScript：Web APIs&DOM&BOM_获取标签_13

Date 对象

BOM

定时器

  1. 需求
    ① JS的程序的执行速度是非常快的，如果希望一段程序，可以每间隔一段时间执行一次，可以使用定时调用
    ② 某一段程序需要在延迟多少时间后执行，可以使用定时器调用

  2. 使用
    ① 循环执行

    var timeid = window.setInterval("方法名或者方法","延时");
window.clearInterval(timeid);
// 第一种方式
window.setInterval(function(){
    console.log('哈哈哈')
},1000)

// 第二种方式
window.setInterval('console.log("哈哈")',1000)

// 第三种方式
window.setInterval(test,1000);
function test() {
    console.log('哈哈哈')
}

    ② 定时执行

  3. 注意：为了防止定时器叠加，遵循一个原则：先清后设
    通过事件激活一个定时器的时候，一定要先将这个定时器清除掉，然后再进行设置。

    clearInterval(IntervalId );

var IntervalId = setInterval(function(){
    console.log('哈哈哈')
},1000)
window

弹窗

alert弹窗

只有确定
JavaScript：Web APIs&DOM&BOM_数组_14

confirm弹窗

确定取消
JavaScript：Web APIs&DOM&BOM_数组_15

prompt弹窗

弹窗输入
JavaScript：Web APIs&DOM&BOM_数组_16

基础知识

  1. 所有全局变量都是window的属性
  2. 所有全局函数都是window的方法
value和innerText和innerHtml区别

value针对单标签进行操作
innerText和innerHTML针对双标签进行操作
innerText只操作文字
innerHTML操作节点内部所有