JS

Posted 2020-10-06

　　上周介绍了JS中两个比较重要的东西，循环和函数，这周再给大家介绍一下BOM和DOM

一、BOM

　　1、首先来说一下什么是BOM，BOM即浏览器对象模型，说白一点就是与浏览器进行的交互的对象模型。

　　2、BOM中的对象：

　　（1）、screen对象：可以获取到屏幕的宽度、高度、可用宽度和可用高度

　　（2）、location对象：取到浏览器的URL地址信息

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

　　　　>>>console.log(location.href);//返回当前完整路径

　　　　　　  console.log(location.protocol);//返回协议名 

　　　　　　  console.log(location.host);//返回主机名+端口号
　　　　　　  console.log(location.port);//返回端口号
　　　　　　  console.log(location.pathname);//文件路径
　　　　         console.log(location.search);//返回？开头的参数列表
　　　　　　  console.log(location.hash);//返回#开头的锚点

　　（3）、使用location提供的方法跳转页面方式

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

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

　　　　>>>location.reload()  //重新加载当前文档，刷新页面 ，其中可以接收参数，当不接受参数时表示在本地刷新当前页面，相当于F5；而当接收一个true参数时表示：强制刷新，从服务器端重新加载页面，相当于Ctrl+F5

　　（4）、history 浏览历史

　　　　>>>history.length;   //浏览历史列表的个数

　　　　>>>history.back();  //后退按钮

　　　　>>>history.forward();  //前进按钮

　　　　>>>history.go(1);  跳转到浏览历史的任意一个页面,0表示当前页面，-1表示后一个页面(back)，1表示前一个页面(forward)

　　3、window对象的常用方法

　　注意：在window对象中的所有方法和属性，均可以省略window关键字。例如：window.alert()==alert()

　　（1）、alert();弹出一个警告提示框

　　（2）、prompt();弹窗接受用户的输入

　　（3）、confirm();弹出带有“确定”“取消”按钮的对话框，点击按钮返回true/false

　　（4）、close();关闭当前浏览器窗口，在个别浏览器中只能关闭在当前脚本新打开的页面（使用超链接、window.open()等方式打开的页面）

　　（5）、open();打开一个新窗口。

　　　　>>>参数一：新窗口的地址

　　　　>>>参数二：新窗口的名字

　　　　>>>参数三：新窗口的各种属性设置，"属性1=值1,属性2=值2,属性3=值3"

　　（6）、setTimeout：设置延时执行，只会执行一次，接受两个参数：需要执行的function、毫秒数

　　              setInterval：设置定时器，每隔n毫秒执行一次，接受两个参数：需要执行的function、毫秒数

　　（7）、clearTimeout：清除延时器

　　　　      clearInterval：清除定时器

　　上面的这些内容只是做一个了解，重点将是下面的DOM环节

二、DOM

　　【DOM树节点】

　　1、DOM分为三大类：元素节点、属性节点、文本节点。

　　2、文本节点、属性节点属于元素节点的子节点。操作时，均需要先取到元素节点，再操作子节点

　　3、可以使用getElement系列方法，取到元素节点。

　　【查看元素节点】

　　1、getElementById：通过id取到唯一节点。如果id重名，只能取到第一个

　　注意：获取元素节点时，获取节点的语句必需在DOM渲染完成之后执行，可以有两种方法实现

　　（1）、将JS代码写在body之后，（这个比较好）

　　（2）、将代码写在window.onload函数中

　　2、getElementsByName()通过name属性  

　　3、getElementsByTagName() 通过标签名

　　4、getElementsByClassName() 通过class名

　　 注意：getElements取到的是数组格式，不能直接添加各种属性，而应该取出数组的每一个单独操作。

　　>>>例如getElementsByName("name1")[0].onclick=function(){};

　　【查看设置属性节点】

　　1、查看属性节点：getAttribute("属性名")

　　2、设置属性节点：setAttribute("属性名"，"属性值")

　　注意：查看和设置属性节点 必须先取到元素节点，才能使用！

　　setAttribute()属性在ie浏览器中可能会存在兼容性问题。可能不支持这个函数设置style/onclick等样式属性和事件属性, 所以我们采用点符号法替代上述函数：   eg.  dom1.style.color = "" dom1.onclick= ""  dom1.src = ""

　　【总结--JS修改DOM节点的样式】

　　1、使用setAttribute()设置class和style属性，但是存在兼容性问题，不提倡使用，例如：div.setAttribute("class","cls1");

　　2、使用.className直接设置class类，注意是className！例如：div.className = "cls1";

　　3、使用.style设置单个属性，注意属性名要用驼峰法则：例如：div.style.backgroundColor = "";

　　4、使用.style  或.style.cssText 设置多个样式属性：例如：div.style = "background-color:red;color:yellow;" 

　　　　　　　　　　　　　　　　　　　　　　　　　　　 div.style.cssText = "background-color:red;color:yellow;" 

　　【查看设置文本特点】

　　.innerText：取到或设置节点里面的文字内容；

　　.innerhtml：取到或设置节点里面的HTML代码；

　　.tagName：取到当前节点的标签名。标签名全部大写显示。

　　【根据层次获取节点】

　　1、.childNodes： 获取元素的所有子节点。包括回车等文本节点。

　　      .children:   获取当前元素的所有元素节点(只获取标签)。

　　2、.firstChild: 获取元素的第一个子节点。包括回车等文本节点。

　　      .firstElementChild: 获取元素的第一个子节点。不包括回车等文本节点。

　　      .lastChild: 获取元素的最后一个子节点。包括回车等文本节点。

　　      .lastElementChild:获取元素的最后一个子节点。不包括回车等文本节点。

　　3、.parentNode: 获取当前节点的父节点。

　　4、.previousSibling: 获取当前节点的前一个兄弟节点；包括回车等文本节点。

　　5、.nextSibling: 获取当前节点的后一个兄弟节点；包括回车等文本节点。

　　　  .nextElementSibling: 获取当前节点的后一个兄弟节点；不包括回车等文本节点。

　　6、.getAttributes: 获取当前节点的属性节点。

　　【创建并新增节点】

　　1、document.createElement("标签名")：创建节点 。需要配合 setAttribute设置各种新的属性；

　　2、父节点.appendChild(新节点)：末尾追加方式插入节点

　　3、父节点.insertBefore(新节点,目标节点)：在目标节点前插入新节点.

　　4、被克隆节点.cloneNode(true/false)：克隆节点

　　>>>传入true： 表示克隆当前节点，以及当前节点的所有字节点；

　　>>>传入false或不传：  表示只克隆当前节点，而不克隆子节点。

　　【删除或替换节点】

　　1、父节点.removeChild(被删节点): 删除父节点中的子节点；

　　2、父节点.replaceChild(新节点,老节点): 使用新节点，替换掉老节点。

　　【表格对象】

　　1、rows属性：返回表格中的所有行数，是一个数组格式

　　2、insertRow(index)：在指定位置插入一行，index从0开始

　　3、deleteRow(index):删除指定一行，index从0开始

　　【行对象】

　　1、cells属性：返回这一行中的所有单元格，是一个数组格式

　　2、rowIndex属性：返回这一行是表格中的第几行。从0开始

　　3、insertCell(index)：在这一行指定位置插入一个单元格。(index)从0开始

　　4、deleteCell(index)：删除这一行的额制定单元格；(index)从0开始

　　【单元格对象】

　　cellIIndex属性：返回这个单元格是本行的第几个，从0开始