2019.8.13节点的选取

节点类型

// 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>

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;
}