本文共 6249 字，大约阅读时间需要 20 分钟。

Web APIs

JavaScript的组成

BOM—浏览器对象模型

一套操作浏览器功能的API

DOM—文档对象模型

一套操作页面元素的API

DOM

基本概念

文档对象模型(Document Object Model，简称DOM)。是W3C组织推荐的处理可扩展标记语言的标准编程接口。

DOM又称为文档树模型

1. 图示
   
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代码，这样当事件被触发时，这些代码会执行
   ② 比如：点击按钮
   Ⅰ. 方式一： 结构和行为耦合，不方便维护，不推荐使用

   按钮1

   Ⅱ. 方拾二：为按钮的对应事件绑定处理函数的形式来响应事件

   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 数组

节点之间关系

   
    
    点我    
            123        
    
我是段落
    
    
     哈哈哈
    
   

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
   

   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. 追加
      ① 直接追加到尾部

          
                     
             
              
              
      123
              
              点我    
             

      运行结果：
      
      ② 插入到某一个元素后面

      var box = document.getElementsByClassName('box')[0];//  创建节点var img = document.createElement('img');img.src = '阿鲁14.gif';var btn = document.getElementById('btn');box.insertBefore(img, btn);

      运行结果：
      
   2. 删除节点
      ① 拿到标签调用删除方法

          
                     
             
              
              
      123
              
              点我    
             

      运行结果：
      
      ② 将节点从父节点中移除

      window.onload = function (ev) {
                 var box = document.getElementsByClassName('box')[0];    // 删除节点    var btn = document.getElementsByTagName('button')[0];    box.removeChild(btn);}

      运行结果：
      

2. 节点克隆

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

       
            
        
       
         
   123
       
         点我
        

   运行结果：

   
   ② 深克隆：全部克隆

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

   运行结果：

   
   ③ 往body中添加

   document.body.appendChild(newBox);

   运行结果：

   
   ④ 注意：带id的节点不能克隆。id具有唯一性。

3. 节点属性（节点.属性）

   ① 获取标签属性：getAttribute

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

   ② 设置标签属性：setAttribute

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

       
            
        
       
         
   123
       
         点我    
         
        

   运行结果：

   
   ③ 删除属性：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');}

   运行结果：

   

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弹窗

只有确定

confirm弹窗

确定取消

prompt弹窗

弹窗输入

基础知识

1. 所有全局变量都是window的属性
2. 所有全局函数都是window的方法

value和innerText和innerHtml区别

value针对单标签进行操作

转载地址：https://kaisarh.blog.csdn.net/article/details/103638787 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！