dom
1.定义
DOM（文档对象模型）是针对HTML和XML文档的一个API，通过DOM可以去改变文档。将整个文档（XML文档和HTML文档）看成一个树形结构，并用document对象表示该文档。文档中的每个成分都是一个节点（Node）。
2.节点类型
文档节点（Document）：代表整个文档
元素节点（Element）：文档中的一个标记 属性节点（Attr）：代表一个属性，元素才有属性
文本节点（Text）：标记中的文本
3.js对象节点属性
| nodeType | 返回节点类型的数字值（1~12） |
| nodeName | 元素节点:标签名称(大写)、属性节点:属性名称、文本节点:#text、文档节点:#document |
| nodeValue | 文本节点:包含文本、属性节点:包含属性、元素节点和文档节点:null |
| parentNode | 父节点 |
| parentElement | 父节点标签元素 |
| childNodes | 所有子节点 |
| children | 第一层子节点 |
| firstChild | 第一个子节点，Node 对象形式 |
| firstElementChild | 第一个子标签元素 |
| lastChild | 最后一个子节点 |
| lastElementChild | 最后一个子标签元素 |
| previousSibling | 上一个兄弟节点 |
| previousElementSibling | 上一个兄弟标签元素 |
| nextSibling | 下一个兄弟节点 |
| nextElementSibling | 下一个兄弟标签元素 |
| childElementCount | 第一层子元素的个数(不包括文本节点和注释) |
| ownerDocument | 指向整个文档的文档节点 |
4.节点方法
hasChildNodes() 包含一个或多个节点时返回true
contains() 如果是后代节点返回true
isSameNode()、isEqualNode() 传入节点与引用节点的引用为同一个对象返回true
compareDocumentPostion() 确定节点之间的各种关系
5.选择器
|
getElementById() |
一个参数:元素标签的ID |
| getElementsByTagName() | 一个参数:元素标签名 |
| getElementsByName() | 一个参数:name属性名 |
| getElementsByClassName() | 一个参数:包含一个或多个类名的字符串 |
|
classList |
返回所有类名的数组
|
| querySelector() | 接收CSS选择符，返回匹配到的第一个元素，没有则null |
| querySelectorAll() | 接收CSS选择符，返回一个数组，没有则返回[] |
6.style操作方法
| style.cssText | 可对style中的代码进行读写 |
| style.item() | 返回给定位置的CSS属性的名称 |
| style.length | style代码块中参数个数 |
| style.getPropertyValue() | 返回给定属性的字符串值 |
| style.getPropertyPriority() | 检测给定属性是否设置了!important，设置了返回"important";否则返回空字符串 |
| style.removeProperty() | 删除指定属性 |
| style.setProperty() |
设置属性，可三个参数:设置属性名，设置属性值，是否设置为"important"(可不写或写"")
|
.className:为元素设置一个新的clas名字； div1.className="class1";
.style：为元素设置新的样式，注意驼峰命名法； div1.style.backgroundColor="red";
.style.cssText:为元素同时修改多个样式； div1.style.cssText="width:100px;height:100px";
7.元素节点属性及方法
| nodeName | 访问元素的标签名 |
| tagName | 访问元素的标签名 |
| createElement() | 创建节点 |
| appendChild() | 末尾添加节点，并返回新增节点 |
| insertBefore() | 参照节点之前插入节点，两个参数：要插入的节点和参照节点 |
| insertAfter() | 参照节点之后插入节点，两个参数：要插入的节点和参照节点 |
| replaceChild() | 替换节点，两个参数：要插入的节点和要替换的节点(被移除) |
| removeChild() | 移除节点 |
| cloneNode() | 克隆，一个布尔值参数，true为深拷贝（当前节点和所有子节点），false为浅拷贝 |
| importNode() | 从文档中复制一个节点，两个参数：要复制的节点和布尔值(是否复制子节点) |
| insertAdjacentHTML() |
插入文本，两个参数：插入的位置和要插入文本
|
8.属性节点
|
attributes |
获取所有标签属性 |
| getAttribute() | 获取指定标签属性 |
| setAttribute() | 设置指定标签属 |
| removeAttribute() | 移除指定标签属 |
|
var s = document.createAttribute("age") s.nodeValue = "18" |
创建age属性 设置属性值为18 |
9.文本节点
| innerText | 所有的纯文本内容，包括子标签中的文本 |
| outerText | 与innerText类似 |
| innerHTML | 所有子节点(包括元素、注释和文本节点) |
| outerHTML | 返回自身节点与所有子节点 |
| textContent | 与innerText类似，返回的内容带样式 |
| data | 文本内容 |
| length | 文本长度 |
| createTextNode() | 创建文本 |
| normalize() | 删除文本与文本之间的空白 |
| splitText() | 分割 |
| appendData() | 追加 |
| deleteData(offset,count) | 从offset指定的位置开始删除count个字符 |
| insertData(offset,text) | 在offset指定的位置插入text |
| replaceData(offset,count,text) | 替换，从offset开始到offscount处的文本被text替换 |
| substringData(offset,count) | 提取从ffset开始到offscount处的文本 |
10.文档节点
| document.documentElement | 代表页面中的<html>元素 |
| document.body | 代表页面中的<body>元素 |
| document.doctype | 代表<!DOCTYPE>标签 |
| document.head | 代表页面中的<head>元素 |
| document.title | 代表<title>元素的文本，可修改 |
| document.URL | 当前页面的URL地址 |
| document.domain | 当前页面的域名 |
| document.charset | 当前页面使用的字符集 |
| document.defaultView | 返回当前 document对象所关联的 window 对象，没有返回 null |
| document.anchors | 文档中所有带name属性的<a>元素 |
| document.links | 文档中所有带href属性的<a>元素 |
| document.forms | 文档中所有的<form>元素 |
| document.images | 文档中所有的<img>元素 |
| document.readyState | 两个值:loading(正在加载文档)、complete(已经加载完文档) |
| document.compatMode |
两个值：BackCompat：标准兼容模式关闭、CSS1Compat：标准兼容模式开启 |
|
write()、writeln()、 open()、close() |
write()文本原样输出到屏幕、writeln()输出后加换行符、 open()清空内容并打开新文档、close()关闭当前文档，下次写是新文档 |
11.表格
【表格对象】
1、rows属性：返回表格中的所有行，数组;
2、insertRow(index)：在表格的第index+1行，插入新行;
3.deleteRow():删除表格的第index+1行;
【表格行对象】：
1、cells属性：返回表格中的所有行，数组;
2、rowIndex：返回当前行，在表格中的索引顺序，从0开始;
3、indexCell(index):在表格的第index+1处插入一个<td>;
4、deleteCell(index):删除当前行的第index+1个<td>;
【表格的单元格对象】：
1.cellIndex属性：返回单元格在该行的索引顺序，从0开始;
2、innerHTML属性：返回或设置当前单元格中的HTML代码;
3、align属性：设置当前单元格的水平对齐方式;
4、claaName属性：设置单元格的class属性;
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM操作表格</title>
<script type="text/javascript">
//表格对象：
//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（valign）属性：设置当前单元格的水平对齐方式；
//4、className属性：设置单元格的class名称。
function newRow(){
var book = prompt("书名：");
var price = prompt("价格：");
var table = document.getElementsByTagName("table");
//在表格的最后一行插入一个新行
var newRow = table[0].insertRow(table[0].rows.length-1);
//给新行设置单元格
var cell0 = newRow.insertCell(0);
cell0.innerHTML = book;
var cell1 = newRow.insertCell(1);
cell1.innerHTML = price;
getSum();
}
function deleteRow(){
var table = document.getElementsByTagName("table");
if(table[0].rows.length>2){
table[0].deleteRow(table[0].rows.length-2);
}else{
alert("删删删！删你妹啊删！")
}
getSum();
}
function changeTitle(){
var color = prompt("请输入6位十六进制颜色值：");
var table = document.getElementsByTagName("table");
table[0].rows[0].style = "background-color:#"+color;
}
function copyRow(){
var table = document.getElementsByTagName("table");
var copyRow = table[0].rows[table[0].rows.length-2].cloneNode(true);
var heJi = table[0].rows[table[0].rows.length-1];
//由于浏览器，自动将表格的<tr>包裹在<tbody>中
//所以<tr>实际并非<table>的子节点，故需取到<table>中的<tbody>进行插入；
if(table[0].rows.length>2){
table[0].getElementsByTagName("tbody")[0].insertBefore(copyRow,heJi);
}else{
alert("没有可以复制的行");
}
getSum();
}
function getSum(){
//取到当前表格 表格所有行
var table = document.getElementsByTagName("table");
var rows = table[0].rows;
//
if(rows.length<=2){
rows[rows.length-1].cells[1].innerText = 0 + "元";
alert("没有可计算的行！");
return;
}
//求和
var sum = 0 ;
for(var i = 1 ; i <= rows.length-2 ; i++){//第0行与最后一行舍弃1 rows.length-2
var cells = rows[i].cells;//取到单元格
sum += parseFloat(cells[cells.length-1].innerText);//最后一个单元格的 内容（innerText） 转化成数字并求和计算！
}
rows[rows.length-1].cells[cells.length-1].innerText = sum.toFixed(2) + "元";
}
window.onload = function(){
getSum();
}
</script>
<style type="text/css">
table{
border-collapse: collapse;
width: 400px;
text-align: center;
color: #585858;
}
td,th{
border: 1px solid #8B8A8B;
}
table tr:last-child{
color: #E70014;
}
</style>
</head>
<body>
<table>
<tr>
<th>书名</th>
<th>价格</th>
</tr>
<tr>
<td>看得见风景的房间</td>
<td>30.00元</td>
</tr>
<tr>
<td>幸福从天而降</td>
<td>18.50元</td>
</tr>
<tr>
<td>60个瞬间</td>
<td>32.00元</td>
</tr>
<tr>
<td>合计</td>
<td></td>
</tr>
</table>
<br />
<button onclick="newRow()">增加一行</button>
<button onclick="deleteRow()">删除最后一行</button>
<button onclick="changeTitle()">修改标题样式</button>
<button onclick="copyRow()">复制最后一行</button>
</body>
</html>
alt属性只能用在img、area和input元素中
Put the favorites in the favorites and empty the favorites.
浙公网安备 33010602011771号