JavaScript之BOM和DOM

BOM和DOM

BOM

window对象

BOM由多个对象组成，其中window对象是BOM的顶层对象，其他对象都是该对象的子对象

window对象的属性

window对象表示浏览器窗口，所有JavaScript全局对象、函数、变量均为window对象的成员

注意：有些window对象的属性本身也是对象，具有自己的属性和方法（表中前五个）

window对象的常用方法

1. window弹窗的输入输出

   （1）prompt()：弹窗接收用户输入

   （2）alert()：弹窗警告

   （3）confirm()：带有确认或取消按钮的提示框

2. open()和close()

   （1）open()：重新打开一个窗口，主要传入三个参数：URL地址、窗口名称、窗口特征

   function openWindow(){
       window.open("http://www.baidu.com","百度","height=70px,width=90px,top=20px,left=30px")
   }
   

   （2）close()：关闭浏览器的当前选项卡

   function closeWindow(){
       window.close();
   }
   <button onclick="closeWindow()">关闭当前窗口</button>
   

3. setTimeout()和clearTimeout()

   （1）setTimeout()：设置延时执行（以ms为单位计时），只会执行一次

   （2）clearTimeout()：清除延时，传入参数，调用setTimeout时返回一个id，通过变量接收id，传入clearTimeout

   //设置延时执行
   var timeOutId=setTimeout(function(){  //将延时器方法赋值给变量timeOutId
       console.log("小王");
   },2000);  //延时2s后控制台打印小王
   
   //使用延时器清除延时
   setTimeout(function(){
       clearTimeout(timeOutId);  //在clearTimeout方法里面传入变量timeOutId
   },5000); //在5s后清除延时器
   

4. setInterval()和clearInterval()

   （1）setInterval()：设置定时器，循环每个N毫秒执行一次，两个参数：需要执行的function/毫秒数

   （2）clearInterval()：清除定时器，传入参数。调用setInterval时返回一个id，通过变量接收id，传入clearInterval

   //设置定时器
   var interVarId=setInterval(function(){  //将定时器方法赋值给变量interValId
       console.log("小王小王")
   },1000);
   
   //5s后清除定时器
   setTimeout(function(){
       clearInterval(interValId);  //将声明Interval返回的id，传入clearInterval
   },5000);
   
   //定时器每1s打印一个“小王小王”，并且使用延时器设置了5s后清除定时器，所以一共会打印5个小王小王
   

浏览器对象模型的其他对象

1. screen：屏幕对象：包含有关客户端显示屏幕的信息，有四个常用属性如下

   screen.width;           //屏幕宽度
   screen.height;          //屏幕高度
   screen.availWidth;      //屏幕可用宽度
   screen.availHeight;     //屏幕可用高度=屏幕高度-底部工具栏
   //基本语法
   console.log(screen);  //screen对象里所包含的所有信息
   console.log(screen.availHeight);  //屏幕的有效高度 
   

2. location：地址栏对象，包含有关当前URL的信息，它存储在location属性中，表示那个窗口中当前显示的文档的web地址，可通过window.location属性来访问，可设置页面跳转

   （1）location对象常用属性

   location对象的href属性存放了文档的完整URL，其他属性分别描述了URL的各个部分

   URL路径：
   协议名://主机名(IP 地址):端口号/文件路径?传递参数(name1=value1&name2=value2)#锚点
   例如：
   http://127.0.0.1:8080/wenjianjia/index.html?name=jredu#top
   

示例：

console.log(location);  //取到浏览器的完整 URL 信息
location.href;          //返回当前完整路径 
location.protocol;      //返回协议名 http://
location.host;          //返回主机名+端口号 127.0.0.1:8080
location.hostname;      //返回主机名 127.0.0.1
location.port;          //返回端口号 :8080
location.pathname;      //返回文件路径 
location.search;        //返回?开头的参数列表
location.hash;          //返回#开头的锚点

（2）location对象常用方法

示例：

function locationAssign(){
    location.assign("http://www.baidu.com"); // 加载新的文档，加载以后，可以后退
}
function locationReplace(){
    location.replace("http://www.baidu.com"); // 使用新的文档替换当前文档，替换以后不能后退
}
function locationReload(){
    location.reload(true); // 重新加载当前页面
}
<button onclick="locationReplace()">replace </button>
<button onclick="locationAssign()">assign</button>
<button onclick="locationReload()">reload</button>

注意：reload()传参和不传参的区别：当reload(true)时，表示从服务器重新加载当前页面，当reload()不传参时，表示在本地刷新当前页面

3. history：历史记录对象，包含用户在浏览器窗口访问过的URL

   history对象的常用方法：
   

4. navigator：浏览器配置对象
   
   plugins属性：

   （1）description：插件的描述信息

   （2）filename：插件在本地磁盘的文件名

   （3）length：插件的个数

   （4）name：插件名

DOM

DOM 节点分为三大类：元素节点、文本节点、属性节点。其中，元素节点又叫标签节点，指文档中的各种 HTML 标签；文本节点和属性节点为元素节点的两个子节点，分别表示标签中的文字和标签的属性。通过 getElement 系列方法，可以取到元素节点。

DOM树结构：

操作元素节点

1. getElementById： getElementById()方法可返回拥有指定Id的第一个对象的引用，通过Id获取唯一的节点，如果存在多个同名Id，则只会选取第一个

2. getElementsByName / getElementsTagName / getElementsClassName：通过Name、TagName、ClassName取到一个数组，包含多个节点。他们的使用方式是通过循环取到每一个节点，循环次数从0开始，到数组的最大长度后结束

3. document.querySelector / querySelectorAll

   querySelector()方法仅返回匹配指定CSS选择器的第一个元素，如果要返回所有的元素，就要用querySelectorAll()方法替代

操作文本节点

1. tagName：返回元素的标签名，即获取节点标签名。且其返回值始终是大写字母

2. innerHTML：设置或返回表格行的开始和结束标签之间的HTML，即设置或获取节点内部的所有HTML

3. innerText：定义对象所要输出的文本，即它可以用来设置或获取节点内部的所有文字

   注意：innerHTML指的是从对象的起始位置到终止位置的全部内容，包括HTML标签；而innerText指的是从起始位置到终止位置的内容，去除HTML标签。平时推荐尽可能使用 innerHTML

操作属性节点

1. 查看属性节点

   getAttribute()方法返回指定属性名的属性值，但如果以attr对象返回属性，则需要使用getAttributeNode

   getAttribute("属性名");  //基本语法
   //举例如下：
   document.getElementsByTagName("a")[0].getAttribute("target");
   

2. 设置属性节点

   setAttribute()方法添加指定的属性，并为其赋指定的值。若这个指定的属性已存在，就仅设置或更改属性值

   <button onclick="getAttr()">取到 a 的 href 属性值</button>
   <button onclick="setAttr()">修改 a 的 href 属性值</button>
   <a href="http://www.baidu.com" id="a1"/>这是一个超链接</a>
   function getAttr(){
       var a1 = document.getElementById("a1");
   	alert(a1.getAttribute("href"));
   }
   function setAttr(){
   	var a1 = document.getElementById("a1");
   	a1.setAttribute("href","http://www.hhhhh.com");
   	console.log(a1.href);
   }
   //点击第一个按钮会在控制台看到地址http://www.baidu.com，点击第二个按钮后会改变超链接地址并在控制台打印输出新地址http://www.hhhhh.com
   

JavaScript修改元素样式

1. className：直接设置class类，为元素设置一个新的class名字

   div.className="abcd";
   

2. style：设置单个属性，为元素设置一个新的样式（属性名要用小驼峰命名法）

   div.style.backgroundColor="red";
   

3. style.cssText：为元素同时修改多个样式

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

   注意：使用style和style.cssText修改样式时，需要注意这两种方式都是通过给元素添加行内样式来实现样式修改的，如果要再进行样式修改也只能使用行内样式修改

获取层次节点

先举个例子好理解，一会儿就在这个例子的基础上讲解

<div id="box">
	第一个 div 标签
	<p id="p" title="P 标签">第一个 p 标签</p>
	<ul>
		<li>第一个 li 标签</li>
		<li>第二个 li 标签</li>
		<li>第三个 li 标签</li>
	</ul>
	<p>
		第二个 p 标签
		<span>第一个 span 标签</span>
	</p>
</div>

1. childNodes / children

   childNodes：获取元素的所有子节点（包括按Enter键换行、空格等文本节点），结果为数组

   children：获取元素的所有元素节点

   var box = document.getElementById("box");
   var childs = box.childNodes;
   var child = box.children;
   console.log(childs);
   console.log(child);
   

   运行结果：
   

2. firstChild / firstElementChild

   firstChild：获取元素的第一个子节点，包括按 Enter 键换行等文本节点；如果存在子元素，则返回第一个子元素，否则返回 null

   firstElementChild：获取元素的第一个元素子节点，不包括按 Enter 键换行等文本节点； 如果没有元素子节点，则返回 null

   var box =document.getElementById("box");
   var childs = box.firstChild;
   var child = box.firstElementChild
   console.log(childs);
   console.log(child);
   

   运行结果：
   

3. lastChild / lastElementChild

   lastChild：获取元素最后一个子节点，包括按Enter键换行等文本节点

   lastElementChild：获取元素最后一个元素子节点，不包括按Enter键换行等文本节点

   var box =document.getElementById("box");
   var childs = box.lastChild;
   var child = box.lastElementChild;
   console.log(childs);
   console.log(child);
   

   运行结果：
   

4. parentNode：获取当前节点的父节点

5. previousSibling / previousElementSibling

   previousSibling：获取当前节点的前一个兄弟节点，包括按Enter键换行等文本节点

   previousElementSibling：获取当前节点的前一个兄弟节点，不包括按Enter键换行等文本节点

6. nextSibling / nextElementSibling

   nextSibling：获取当前节点的后一个兄弟节点，包括按Enter键换行等文本节点

   nextElementSibling：获取当前节点的后一个兄弟节点，不包括按Enter键换行等文本节点

7. attributes：获取当前元素节点的所有属性节点，返回的是一个数组

   var p =document.getElementById("p");
   var attrs = p.attributes;
   console.log(attrs);
   

   运行结果：

创建新节点

1. createElement(“标签名”)：创建一个新的节点，需要配合setAttribute()方法给新节点设置相关属性

   var img=document.creatElement("img"); //创建一个img节点
   img.setAttribute("src","xiaoxi.png") //给img节点设置属性值
   

2. appendChild(“节点名”)：向节点的子节点列表的末尾添加新的子节点，即在某元素的最后追加一个新节点

   document.body.appendChild(img);  //将设置好的img节点追加到body最后
   

3. insertBefore(新节点名,目标节点名)：将新节点插入到目标节点之前

   document.body.insertBefore(img,div1);  //将img节点插到div1之前
   

4. cloneNode(true/false)：复制节点，需要复制哪个节点，就用哪个节点去调用被复制对象，传递参数为true或false。true表示复制当前节点及所有子节点，false表示只复制当前节点，不复制子节点

删除/替换节点

1. removeChild(需删除节点)：指定元素的某个指定的子节点，并从父容器中删除指定节点；以Node对象返回被删除的节点，如果节点不存在则返回null

   document.body.removeChild(ul);  //从ul的父容器body中删除ul节点
   //示例：
   var list=document.getElementById("myList");
   list.removeChild(list.childNode[0]);
   

2. replaceChild(新节点，被替换节点)：用新节点替换指定节点。如果新节点是页面中已有节点，则会将此节点删除后，替换到指定节点

   document.body.replaceChild(newDiv,oldDiv);  //使用newDiv替换掉oldDiv
   //示例：
   document.getElementById("myList").replaceChild(newnode,oldnode);
   

HTML DOM

HTML DOM 操作表格对象

先使用document.getElement系列函数选中一个表格对象，就可以用HTML DOM操作这个对象了

1. rows属性：返回表格中的所有行，返回的是一个数组格式，返回包含表格中所有行（TableRow对象）的一个数组

   table.rows[];  //返回表格的所有行
   table.rows[0]  //获取第一行对象
   

2. insertRow(index)方法：在表格的第index行插入一个新行

   table.insertRow(index); //index表示插入的位置，表格行数>=index>=0
   table.insertRow(table.rows.length); //在表格最后插入一新行
   

3. deleteRow(index)方法：删除表格的第index行，index表示删除的位置

   table.deleteRow(index);  //表格的行数>=index>=0
   table.deleteRow(table.rows.length-1);  //删除表格最后一行
   

HTML DOM 操作行对象

表格对象的rows属性获得当前表格的所有行，可以通过rows[i]取到表格的每一行，每一行的rows[i]就是行对象

1. cells属性：返回当前行中的所有单元格的一个数组，即返回包含行中所有单元格的一个数组

   table.rows[0].cells;  //返回表格的第一行的所有单元格
   table.rows[0].cells[0]  //获得第一行第一个单元格对象
   

2. rowIndex属性：返回当前行在表格中的索引顺序，索引从0开始，即返回该行在表中的位置

   table.rows[].rowIndex;  //返回该行在表格中的索引值
   

3. insertCell(index)方法：在当前行的第index处插入一个<td>

   tableRow.insertCell(index);  //index表示插入的位置，表格的行数>=index>=0
   tableRow.insertCell(table.rows.cells.length);  //在行最后插入一新单元格
   

4. deleteCell(index)方法：删除当前行的第index个<td>

   tableRow.deleteCell(index);  //index表示插入的位置，表格的行数>=index>=0
   tableRow.deleteCell(table.rows.cells.length-1);  //删除该行最后一个单元格
   

HTML DOM 操作单元格对象

行对象由单元格组成，同样使用行对象的cells属性可以返回当前行的所有单元格，cells[i]所取到的每一个单元格就是单元格对象。由需要先选中表格，所以操作单元格就需要使用table.rows[i].cells[i]才能取到

1. cellIndex属性：返回单元格在该行的索引顺序，从0开始，即返回该单元格在某行单元格集合中的位置

   table.rows[0].cells[0].cellIndex;  //返回该单元格在某行中的索引值0
   

2. innerHTML属性：返回或设置当前单元格中的HTML，即设置或返回单元格的开始标签和结束标签之间的HTML

   table.rows[].cells[].innerHTML; //返回该当前单元格中的HTML
   

3. align属性：设置或返回单元格内部数据的水平排列方式，即设置当前单元格的水平对齐方式

   Table.rows[].cells[].align;  //返回该行在表格中的索引值
   //示例：
   var table=document.getElementById("table");
   table.rows[0].cells[0].align="center";
   console.log(table.rows[0].cells[0].align);  //center
   

4. className属性：设置或返回元素的class属性，即设置或获取单元格的class名称

   table.rows[].cells[].className;  //返回该行在表格中的索引值
   //示例：
   <table border="1" id="table">
       <tr>
           <th class="head">Header</th>
           <th>Header</th>
           <th>Header</th>
       </tr>
   </table>
   console.log(table.rows[0].cells[0].className);  //head