JS中DOM以及BOM

Posted 2020-09-11 老夫看你根骨奇特

一.bom对象

  1screen对象

     

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

2location对象

完整的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";

   加载新的文档，加载以后，可以回退：location.assign("http://www.baidu.com");

   使用新的文档，替换当前文档。替换以后，不能回退：location.replace("http://www.baidu.com");

 

             重新加载当前页面。
             reload(true)：从服务器重新加载当前页面
             reload():在本地刷新当前页面

             location.reload(true);

3.

history
* 1、length：浏览历史列表的个数
* 2、history.forward(); 前进到前一个页面
* 3、history.back(); 后退到后一个页面
* 4、history.go(-1); 跳转到浏览历史列表的任意位置
* 位置标志： 当前页为第0个，前一个页面第1个，后一个页面-1个

4.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);//检查浏览器安装的插件支持的文件类型

5. 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树节点】
* 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;height100px;";
*
* 【查看节点】
* 1、tagName属性：获取节点的标签名；
* 2、innerhtml:设置或者获取节点内部的所有HTML代码；
* 3、innerText:设置或者获取节点内部的所有文字；
*
*/

 所有节点属性，一律驼峰命名法。

console.log(div.innerHTML); //取到div中所有内容
div.innerHTML = "<s>jianghao</s>"; // 重置修改div中的HTML代码

/* [获取层次节点的常用属性]
*
* 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(新节点,被替换节点):用新节点替换指定节点。如果新节点为页面中已有节点，会将此节点删除后，替换到指定节点。
*
*/

[表格对象]（

// 由于浏览器，自动将表格的<tr>包裹在<tbody>中
// 所以<tr>实际并非<table>的子节点，故需取到<table>中的<tbody>进行插入

）
* 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区分主键盘和小键盘，keypres不区分；
*
* [确定键盘触发按键]
* ① 在触发函数中，传入参数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
* }
* }
*