JS中的BOM以及DOM操作

Posted 2020-09-11

screen:对象

console.log(screen.width);//屏幕宽度
   console.log(screen.availHeight);//可用高度=屏幕高度-底部任务栏
   console.log(screen.height);//屏幕高度
   console.log(screen.availWidth);//可用宽度

location对象
    *
    * 完整的URL路径：
    * 协议：//主机名(IP地址):端口号/文件路径?传递参数(name1=value1&name2=value2)#锚点

console.log(location.href);//完整路径
   console.log(location.protocol);//使用的协议http:https:ftp:file:mailto:
   console.log(location.pathname);//文件路径
   console.log(location.port);//端口号
   console.log(location.search);//从?开始往后的部分
   console.log(location.hostname);//主机名(IP地址)
   console.log(location.host);//主机名+端口号
   console.log(location.hash);//从#开始的锚点
   //使用JS设置页面跳转
   //window.location="http://www.baidu.com";
   function locationAssign(){
    /*
     *加载新的文档，加载以后，可以回退
     * */
    location.assign("http://www.baidu.com");
   }

function locationReplace(){
    /*
     *使用新的文档，替换当前文档。替换以后，不能回退。
     * */
    location.replace("http://www.baidu.com");
   }
   
   function locationReload(){
    /*
     *重新加载当前页面。
     * reload(true):从服务器重新加载当前页面
     * reload():在本地刷新当前页面
     *
     * */
   }

/*
    *history
    * 1、length：浏览历史列表的个数
    * 2、history.forward();前进到下一个页面
    * 3、history.back();后退到上一个页面
    * 4、history.go(-1);跳转到浏览历史列表的任意位置
    *  位置标志：当前页为第0个，下一个页面第一个，上一个页面-1个
    * */
   
   /*
    *Navigator
    *
    * */
   
   console.log(navigator.appName);//产品名称
   console.log(navigator.appVersion);//产品版本号
   console.log(navigator.userAgent);//用户代理信息
   console.log(navigator.platform);//系统平台

/*navigator.plugins。返回一个数组，检测浏览器安装的所有插件
    * >>>主要的属性：
    * description：插件的描述信息
    * filename：插件在本地磁盘的文件名
    * length：插件的个数
    * name：插件名
    * */
   console.log(navigator.plugins);//检查浏览器安装的插件信息

/*navigator.mimeTypes 浏览器插件，所支持的文件类型
    * >>>主要的属性：
    * description：MIME类型描述
    * enabledPlugin：支持此类型的浏览器插件
    * suffixes：此类型可能的后缀名
    * type：MIME类型的写法，例如：image/x-icon  text/css
    * */
   console.log(navigator.mimeTypes);//检查浏览器安装的插件支持的文件类型

/*【重点】window对象的常用方法
    * >>>window对象中的所有方法，均可以省略前面的window. ,比如close()
    *
    *1、prompt：弹窗接收用户输入；
    *2、alert：弹窗警告；
    *3、confirm：带有确认/取消按钮的提示框；
    *4、close：关闭当前浏览器选项卡
    *5、open：重新打开一个窗口，传入参数：URL/窗口名称/窗口特征
    *6、settimeout：设置延时执行，只会执行一次；
    *7、setinterval：设置定时器，循环每个N毫秒执行一次；
    *  两个参数：需要执行的function/毫秒数
    *8、cleartimeout：清除延时
    *9、clearinterval：清除定时器
    *  两个参数：调用setinterval时返回一个ID，通过变量接受ID，传入clearinterval

[DOM树节点]
    * DOM数节点分为三大类：元素节点、文本节点、属性节点
    *
    * 文本节点、属性节点，为元素节点的两个子节点；
    *
    * 通过getElement系列方法，可以取到元素节点。
    * */
   /*[查看节点]
    *1、getElementById：通过ID获取唯一的节点;多个同名ID，只会取第一个；
    *2、getElementsByName：通过Name取到一个数组，包含1到多个节点；
    *  使用方式：通过循环，取到每一个节点。循环次数：从0开始，<数组.length
    *
    * [查看和设置属性节点]
    * 1、查看属性节点：getAttribute("属性名");
    * 2、设置属性节点：setAttribute("属性名","属性值");

【JS修改样式总结】
    * 1、 .classname：为元素设置一个新的class名字；
    *       div1.className="class1";
    * 2、 .style：为元素设置一个新的样式，注意驼峰命名法；
    *    div1.style.backgroundColor="red";
    * 3、 .style.cssText:为元素同时修改多个样式；
    *    div1.style.cssText="width:100px;height:100px;";

[查看节点]
    * 1、tagName:获取节点的标签名；
    * 2、innerhtml：设置或者获取节点内部的所有HTML代码；
    * 3、innerText：设置或者获取节点内部的所有文字；

[获取层次节点的常用属性]
     * 1、 .childNodes：(数组)元素的所有子节点(包含元素节点/文本节点)
     * 2、 .firstChild：获取元素的第一个子节点；
     * 3、 .lastChild：获取元素的最后一个子节点；
     * 4、 .ownerDocument：获取当前文档根节点。在html文档中，为document节点
     * 5、 .parentNode：获取当前节点的父节点；
     * 6、 .previousSibling：获取当前节点的前一个兄弟节点
     * 7、 .nextSibling：获取当前节点的后一个兄弟节点
     *
     * 注：上述属性，均会获得所有的元素节点和文本节点，如果只需要元素节点，需要使用对应Element属性，例如：firstChild--->firstElementChild
     *
     *
     * 8、 .attributes：获取当前元素节点的所有属性节点

【创建并新增节点】
    *
    * 1、 .createElement("标签名")：创建一个新的节点。需要配合.setAttribute()方法设置新节点的相关属性；
    * 2、 .appendChild(节点名)：在某元素的最后追加一个新节点
    * 3、 .insertBefore(新节点名，目标节点名)：将新节点，插入到目标节点之前
    * 4、克隆节点.cloneNode(true/false):需要克隆谁，就用谁去调用克隆对象：
    *  >>>传递参数可以为true或false；
    *  >>>true表示：克隆当前节点及所有子节点；
    *  >>>false表示：只克隆当前节点，不克隆子节点(默认)
    *
    * 【删除/替换节点】
    * 1、 .removeChild(需删除节点)：从父容器中，删除指定节点；
    * 2、 .replaceChild(新节点，被替换节点)：用新节点替换指定节点。如果新节点为页面中已有节点，会在此节点删除后，替换到指定节点。

[表格对象]
    * 1、rows属性：返回表格中的所有行，数组；
    * 2、insertRow(index)：在表格的第index+1行，插入一个新行
    * 3、deleteRow(index):删除表格的第index+1行
    *
    * 【表格的行对象】
    * 1、cells属性：返回当前行中的所有单元格，数组；
    * 2、rowIndex：返回当前行，在表格中的索引顺序，从0开始；
    * 3、insertCell(index):在当前行的第index+1处插入一个<td>
    * 4、deleteCell(index):删除当前行的第index+1个<td>
    *
    *
    * 【表格的单元格对象】
    * 1、cellIndex属性：返回单元格在该行的索引顺序，从0开始；
    * 2、innerHTML属性：返回或设置当前单元格中的HTML代码；
    * 3、align属性：设置当前单元格的水平对齐方式；
    * 4、className属性：设置单元格的class名称；

【JS中的事件分类】
    * 1、鼠标事件：
    *  click/dbclick/mouseover/mouseout/mousemove/mousedown/mouseup
    *
    * 2、键盘事件：
    *  keydown:键盘按下去触发
    *  keypress:键盘按下并松开的瞬间触发
    *  keyup:键盘抬起时触发
    *
    *  [注意事项：(了解)]
    *  ①执行顺序：keydown-keypress-keyup
    *  ②长按时，会循环不断 的执行keydown-keypress
    *  ③有keydown事件，不一定有keyup事件(事件触发过程中，鼠标移走，可能就没有keyup)
    *  ④keypress只能捕获字母、数字、符号键，不能捕获功能键；keydown/keyup基本可以捕获所有功能键(特殊除外)
    *  ⑤keypress区分大小写，keydown和keyup不区分；
    *  ⑥keydown/keyup区分主键盘和小键盘，keypress不区分；
    *
    *
    *  【确定键盘触发按键】
    *  ①在触发函数中，传入参数e，代表按键事件；
    *  ②通过e.keycode ,确认按键Ascii码值，进而确定按键；
    *  ③所有浏览器系统的写法(一般不必要)：
    *  var evn=e||event;//取到键盘事件   
    *  var code=evn.keyCode||evn.which||evn.charCode;//取到按键编码

[JS中的DOM0事件模型]
    * 1、内联模型：直接将函数名作为HTML标签的某个事件属性的属性值；
    *  eg：<button onclick="func()">按钮</button>
    *  缺点：违反W3C关于HTML与javascript分离的基本原则；
    * 2、脚本模型：在JS脚本中通过事件属性进行绑定；
    *  eg:window.onload=function(){}
    *  局限性：同一节点，只能绑定一个同类型事件；
    *
    *【JS中的DOM2事件模型】
    * 1、添加事件绑定：
    *  IE10之前：btn1.attachEvent("onclick",函数)；
    *  其他浏览器：btn1.addEventListener("click",函数，true/false)；
    *  参数三：false(默认)，表示事件冒泡，true，表示事件捕获
    *
    *  兼容写法：if(btn1.attachEvent){
    *     btn1.attachEvent();
    *    }else{
    *     btn1.addEventListener();
    *    }
    *
    *  优点：同一节点，可以添加多个同类型事件的监听器；
    *
    * 2、取消事件绑定：
    * 注：如果要取消事件绑定，那么在绑定事件时，回调函数必须使用有名函数，而不能使用匿名函数，因为在取消事件绑定时，需要传入函数名；
    *  .removeEventListener("click",函数名)；
    *  .detachEvent("onclick",函数名)；

[JS中的事件流]
   * 1、事件冒泡：当某DOM元素触发某事件时，会从当前DOM元素开始，逐个触发其祖先元素的同类型事件，直到DOM根节点；
   *  DOM0模型，均为事件冒泡；
   *  IE中使用.attachEvent()添加的事件，均为冒泡；
   *  其他浏览器.addEventListener()添加的事件，当第三个参数为false时，为冒泡；
   *
   * 2、事件捕获：当某DOM元素触发某事件时，会从DOM根节点开始，逐个触发其祖先元素的同类型事件，直到触发到当前元素为止；
   *  只有使用.addEventListener()添加事件，并设置第三个参数为true时，才进行捕获；
   *
   *  ↓ 当前元素 ↑
   *  ↓   ↑
   *  冒   父元素 捕
   *  ↓   ↑
   *  泡  爷爷元素 获
   *  ↓   ↑
   *  DOM根节点
   *
   * 3、阻断事件冒泡：
   *  IE浏览器中，将e.cancelBubble属性设为true;
   *  其他浏览器，调用e.stopPropagation();方法
   *  兼容写法：function myParagraphEventHandler(e) {
           e = e || window.event;
           if (e.stopPropagation) {
               e.stopPropagation(); //IE以外
           } else {
               e.cancelBubble = true; //IE
           }
       }
       
   3、阻止默认事件：
   *    IE浏览器中：将e.returnValue属性设为false；
   *    其他浏览器：调用e.preventDefault();方法
   *    兼容写法：function eventHandler(e) {
          e = e || window.event;
          // 防止默认行为
          if (e.preventDefault) {
              e.preventDefault(); //IE以外
          } else {
              e.returnValue = false; //IE  
          }
      }