节点类型
// DOM： 核心DOM 能够操作所有结构化文档 （HTML，XML） 万能 复杂 繁琐
// HTML DOM 专门操作HTML内容的API 常用的API进行简化 -- 简单 不是万能
// 实际开发中：先用简单，如果简单的不能解决问题、实现不了在用核心DOM补充
// 网页中一切在内存中都是以树形结构存储的 存储上下级包含关系最直观的结构
// HTML中的每一个元素：元素，属性，文本 都是一个节点对象（Node） document对象是整棵树的根节点
// 节点对象（Node） 三大属性：
// 1.nodeType number
专门区分节点的类型：
9 document
1 element
2 attribute
3 text
需要区分节点类型的时候使用
// 2.nodeName 节点名 字符串
document #document
element 全大写的标签名
attribute 属性名
文本节点 #text
进一步区分元素的名称时使用
// 3.nodeValue 节点值
document null
element null
attribute 属性值
text 文本的内容
DOM操作 --->对DOM树的内容做 增 删 改 查
节点查找
1.三个元素不需要找，直接获得：
<html> document.documentElement
<head> document.head
<body> document.body
2.节点之间的关系：
1）父子关系
node.parentNode 获得node的父节点
node.childNodes 获得node的所有子节点
node.firstChild 获得node下的第一个子节点
node.lastChild 后的node下最后一个子节点
2）兄弟关系
node.preivousSibling: 返回当前节点的前一个兄弟节点
node.nextSibling:返回当前节点的下一个兄弟节点
问题：网页中的一切都是节点，包括换行和空字符
用元素树:仅包含元素节点的树结构 ---不是一颗新树 ，仅是节点数的子集
1）父子关系
elem.parentElement 返回一个父元素对象
elem.childen IE8支持 返回子元素对象集合
elem.firstElementChild 返回第一个子元素对象
elem.lastElementChild 返回最后一个子元素
2）兄弟关系
返回当前节点的前一个兄弟元素
elem.preivousElementSibling
返回当前节点的下一个兄弟元素
elem.nextElementSibling
eg：
<body>
<div id="box">1
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
</div>
<div>2</div>
<a href="#">aaa</a>
<span></span>
<ul id="nav">
<li>aa</li>
<li class="active">bb
<ul>
<li>b1</li>
<li class="active sub">b2</li>
<li>b3</li>
</ul>
</li>
<li>cc</li>
</ul>
<form action="#" id="form1">
<input type="text" name="username" placeholder="请输入用户名" id="username">
<input type="checkbox" name="sex">男
<input type="checkbox" name="sex">女
</form>
<script>
// 按照HTML查找 在整个页面或者父元素下，查找属性或标签符合条件的元素对象
// 4种
// 1.id 只能用document调用 仅返回一个元素
var div = document.getElementById("box");
console.log(div);
// 2.tagName 查找指定父元素下的指定标签元素 任何父元素都可以调用
// 返回值哪怕只有哦一个，也放在集合中 没有找到符合要求的子节点 返回一个空数组
// 查找不仅只查直接子节点，而且查找所有子代节点
var divs = document.getElementsByTagName("div");
var aLinks = div.getElementsByTagName("a");
console.log(document.getElementsByTagName("span"));
console.log(document.getElementsByTagName("p"));
//3.name属性查找 查找表单 只能用document调用 返回：动态数组
// var form1 = document.getElementById("form1");
var chks = document.getElementsByName("sex");
//4.按class属性查找 只能通过任意父元素上调用 查找的子代 只要标签中class属性值符合要求的就被选中
var lis = nav.getElementsByClassName("active");
作业：
<body>
<table width="500px" border="1" cellspacing="0" align="center">
<thead>
<th>商品名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
</thead>
<tbody>
<tr>
<td>商品1</td>
<td>￥1000</td>
<td>
<button><</button>
<span>1</span>
<button>></button>
</td>
<td>
￥1000
</td>
</tr>
<tr>
<td>商品2</td>
<td>￥600</td>
<td>
<button><</button>
<span>1</span>
<button>></button>
</td>
<td>
￥600
</td>
</tr>
<tr>
<td>商品3</td>
<td>￥12000</td>
<td>
<button><</button>
<span>1</span>
<button>></button>
</td>
<td>
￥12000
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" align="right">Total：</td>
<td>
￥13600
</td>
</tr>
</tfoot>
</table>
<!--
要求：1、标签的结构不能发生变化 其中包括id和class
元素集合.onclick = 函数名 使用this关键字在函数中得到当前元素
2、可以切换数量 数量最大不限制，最小不能小于0
3、数量有变化的时候，小计和Total的值随之变化
-->
js页面
//找到所要选用的table标签
//通过标签找到要获取的按钮
var btns = document.getElementsByTagName('button');
//遍历btns中的每个btn
for(var i = 0;i < btns.length;i++){
//给单击事件赋个值方便后面使用
btns[i].onclick = calc;
}
//响应单击事件
function calc(){
//找到span标签，通过先过去父元素节点，再找子代的span，这样快速一些,this指btns[i]
var span = this.parentNode.getElementsByTagName('span')[0];
//span.innerHTML是个字符串，改成数字方便计算，把内容给n作计算
var n = parseInt(span.innerHTML);
//如果btn[i]里面是大于号，那么就作n++，否则，就是n--，不过n=0时，就不减了
this.innerHTML == '>'? n++: n > 0? n--: n == 0;
//把修改之后的内容给到页面中
span.innerHTML = n;
//小计的变化，先获取单价
var price = parseInt(this.parentNode.previousElementSibling.innerHTML.slice(1));
//把单价*数量的数字放入小计中，并呈现
this.parentNode.nextElementSibling.innerHTML = ('￥' + price*n);
//获取三个小计的标签
var tds = document.querySelectorAll('table>tbody td:last-child');
// 遍历小计，将总和给总计,先要定义一个sum接受
for(var i = 0,sum = 0;i < tds.length;i++){
sum += parseInt(tds[i].innerText.slice(1));
}
//获取总计的标签
var td = document.querySelector('table>tfoot td:last-child');
//将总计写入td中，并呈现
td.innerHTML = '￥' + sum;
}