JavaScript(四)——BOM与DOM

BOM

Brower Object Model：浏览器对象模型(类似于浏览器的内置对象)，用于访问浏览器的功能

window

浏览器窗口对象，充当global全局对象，var声明的变量、函数声明、带id属性的元素都会成为它的属性，访问window对象的属性或方法时，可以省略window.直接使用

弹出框

• alert：弹出警告框
• open：打开新窗口，参数为要打开的目的页面的地址
• prompt：弹出带文本框的窗口
• comfirm：弹出带判断按钮的窗口，用于确认操作

location：

地址栏，属性href代表地址URL，可用于js页面跳转与信息传递

history

历史记录

• history.back：后退一步，相当于点击浏览器的回退
• history.forward：前进一步
• history.go：传入参数为正表示前进，为负表示后退

screen：屏幕

navigator：客户端信息

DOM

定义

Document Object Model：文档对象模型，浏览器将html标签当作一棵树，有根、子、父、兄弟各个节点，将每一个元素与一个js对象(DOM对象)对应

获取页面元素

• 通过id：document.getElementById，推荐使用
• 通过name：document.getElementsByName，获得一个NodeList，可以当数组使用
• 通过class：document.getElemesntsByClassName，获得HTMLCollection，可以当作数组使用
• 通过标签名(tagName)：document.getElementsByTagName，获得HTMlCollection，当数组使用
• html5新增通过选择器：document.querySelector：获得单个元素(相同选择器的元素获得第一个)，参数要和选择器语法一致(id前加#，class前加.)，document.querySelectorAll：获得一个NodeList

操作元素的属性

获取属性

• HTML属性：写在html标签中的属性，使用dom对象的getAttribute获取(只能获取到最初写的值)
• DOM属性：dom对象的属性，跟html有对应关系(可以获得页面动态变化后的值)

写入属性

使用dom对象的setAttribute方法，第一个参数为需要写入的属性名，第二个参数为写入的属性值

操作元素的内容

• innerHTML：元素中的所有html文档，可识别html标签和样式
• innerText：元素中的纯文本，只能用来处理纯文本

导航

Node类型层次结构

导航查找

1. 子：children获得所有子元素(非后代)，childNodes获得所有子节点(会获得Text节点)
2. 父：parentElement获得父元素，parentNodes获得父节点，二者效果相同
3. 兄弟：nextElementSibling获得下一个兄弟元素，nextSibling获得下一个兄弟节点；previousElementSibling获得前一个兄弟元素，previousElementSibling获得前一个兄弟节点

注意：table元素默认有一个子元素为tbody，这个tboody是所有tr的父元素，在table.children时取得的是由tbody组成的HTMLCollection，而不是由tr组成的HTMLCollection

创建元素

创建

1. document.createElement，参数为标签名的字符串
2. innerHTML、innerText在元素中写内容

加入页面

1. appendChild在元素的所有子元素最后追加新子元素
2. insertBefore将新子元素加载指定子元素前，第一个参数为新子元素，第二个参数为指定的子元素
3. before将新元素加在该元素的前面
4. after将新元素加在该元素的后面

表格添加表格项

<table border="black 1px solid" id="table">
	<tr><th>Header</th></tr>
	<tr><td>Data</td></tr>
</table>
<script type="text/javascript">
	let table = document.getElementById("table");
	let tr = document.createElement("tr");
	let td = document.createElement("td");
	td.innerText="New Data";
	tr.appendChild(td);
	table.children[0].insertBefore(tr,table.children[0].children[1]);
</script>