DOM：Document Object Model：文档对象模型，专门用于操作html文档的，提供了一些方法
DOM树概念
DOM树概念：DOM将我们的HTML看作了是一个倒挂的树状结构，但是树根不是html标签，而是document对象
document对象：不需要程序员创建，由浏览器的js解释器自动创建，一个页面只有一个document对象
作用：只要是对象就提供了属性和方法，等待我们学习，【找到】想要的任何DOM元素/对象/节点，甚至进行【操作】
DOM会将页面上的每个元素、属性、文本、注释都当作一个DOM元素/对象/节点
查找元素
1、通过 ID 查找元素：
var elem=document.getElementById("id值");
特殊：
1、如果页面有多个重复的id，只会返回第一个
2、没找到，返回null
3、其实id根本不用查找，直接可用
4、你们不准用，id留给后端使用
2、*通过 标签名 查找元素：
var elems=document/parent.getElementsByTagName("标签名")
特殊：
1、返回值，返回了一个类数组对象，没找到，返回空类数组
2、js不能直接操作DOM集合，解决：要么使用下标得到某一个元素，要么使用遍历得到每一个元素
3、parent->代表的是你已经找到的某个父元素
3、*通过 class名 查找元素
var elems=document/parent.getElementsByClassName("标签名");
特殊：
1、返回值，返回了一个类数组对象，没找到，返回空类数组
2、js不能直接操作DOM集合，解决：要么使用下标得到某一个元素，要么使用遍历得到每一个元素
3、parent->代表的是你已经找到的某个父元素
4、*通过关系找元素：前提：必须先找到一个元素才可以用调用关系
父元素：elem.parentNode;
子元素：elem.children; - 集合
第一个子元素：elem.firstElementChild;
最后一个子元素：elem.lastElementChild;
前一个兄弟：elem.previousElementSibling;
后一个兄弟：elem.nextElementSibling;
操作元素：前提：找到元素才可以操作
1、内容：
1、*innerHTML - 获取和设置开始标签到结束标签之间的内容，支持识别标签
获取：elem.innerHTML;
设置：elem.innerHTML="新内容";
2、innerText - 获取和设置开始标签到结束标签之间的文本，不支持识别标签
获取：elem.innerText;
设置：elem.innerText="新内容";
3、*value - 专门为input准备的
获取：input.value;
设置：input.value="新内容";
2、*属性：
获取属性值：elem.getAttribute("属性名");
设置属性值：elem.setAttribute("属性名","属性值");
移除属性值：elem.removeAttribute("属性名");
简化版：
获取属性值：elem.属性名
设置属性值：elem.属性名="属性值";
特殊：1、class需要写为className
2、自定义属性操作不了
3、*样式：
使用样式的方式：
1、内联样式
2、内部样式表
3、外部样式表
二阶段我们的js就是要操作【内联样式】：
1、不会牵一发动全身
2、优先级最高
获取：elem.style.css属性名;
设置：elem.style.css属性名="css属性值";
特殊：1、css属性名，有-的地方，要去掉-，变为小驼峰命名法
border-radius -> borderRadius
2、获取样式时，也只能获取到内联样式
4、*绑定事件：
elem.on事件名=function(){
操作;
*****this关键字：这个
如果单个元素绑定事件，this->这个元素
如果多个元素绑定事件，this->当前触发事件的元素
}
一切的获取，都是为了做判断
一切的设置，都是在修改|添加
表格的隔行变色案例
<style>
table {
width: 500px;
margin: auto;
border: 1px solid #000;
border-collapse: collapse;
table-layout: fixed;
}
td {
border: 1px solid #000;
}
</style>
</head>
<body>
<button>按钮</button>
<table>
<tr>
<td>1222222222</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<script>
var btn = document.getElementsByTagName("button")[0];
var trs = document.getElementsByTagName("tr");
var i=0;
btn.onclick = function () {
i++;
if (i % 2 == 1) {
for (var j = 0; j < trs.length; j++) {
if (j % 2 == 1) {
trs[j].style.background = "pink"
} else {
trs[j].style.background = "#fff"
}
}
} else {
for (var j = 0; j < trs.length; j++) {
if (j % 2 == 0) {
trs[j].style.background = "red"
} else {
trs[j].style.background = "#fff"
}
}
}
}
</script>
</body>
选项卡案例
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.tabs>ul {
display: flex;
}
.tabs>ul>li {
width: 100px;
line-height: 50px;
background: pink;
border: 1px solid #ccc;
text-align: center;
color: #fff;
cursor: pointer;
}
.tabs>div {
width: 400px;
line-height: 26px;
border: 1px solid #ccc;
background: purple;
color: #fff;
text-indent: 2em;
display: none;
}
.tabs>ul>li.active {
background: purple;
}
.tabs>div.active {
display: block;
}
</style>
</head>
<body>
<div id="tabs" class="tabs">
<ul>
<li a="0" class="active">苗苗姐</li>
<li a="1">袍老爷</li>
<li a="2">卢老爷</li>
</ul>
<div class="active">苗苗姐是一个温柔体贴逗逼的老师，Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae nihil
corporis at
ipsam delectus reiciendis? Quas dolor consectetur fugit quasi earum in eum dicta deserunt accusamus tempore.
Et
veniam vel.</div>
<div>袍老爷是一个天不怕地不怕的天棒，Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae nihil corporis at ipsam
delectus
reiciendis? Quas dolor consectetur fugit quasi earum in eum dicta deserunt accusamus tempore. Et veniam vel.
</div>
<div>卢老爷是一个严肃认真可靠的老师，Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae nihil corporis at ipsam
delectus
reiciendis? Quas dolor consectetur fugit quasi earum in eum dicta deserunt accusamus tempore. Et veniam vel.
</div>
</div>
<script>
var lis = document.getElementsByTagName("li"),
divs = tabs.getElementsByTagName("div");
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function () {
for (var i = 0; i < lis.length; i++) {
lis[i].className = "";
divs[i].className = "";
}
this.className = "active";
var i = this.getAttribute("a");
divs[i].className = "active";
}
}
</script>
</body>
购物车案例
<head>
<title>使用Selector API实现购物车客户端计算</title>
<meta charset="utf-8" />
<style>
table {
width: 600px;
text-align: center;
border-collapse: collapse;
}
td,
th {
border: 1px solid black
}
td[colspan="3"] {
text-align: right;
}
</style>
</head>
<body>
<table id="data">
<thead>
<tr>
<th>商品名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
</tr>
</thead>
<tbody>
<tr>
<td>iPhone6</td>
<td>4488</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>4488</td>
</tr>
<tr>
<td>iPhone6 plus</td>
<td>5288</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>5288</td>
</tr>
<tr>
<td>iPad Air 2</td>
<td>4288</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>4288</td>
</tr>
<tr>
<td>3090ti显卡</td>
<td>20000</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>20000</td>
</tr>
<tr>
<td>3080ti显卡</td>
<td>18000</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>18000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Total: </td>
<td id="total">0</td>
</tr>
</tfoot>
</table>
<script>
var btns = document.getElementsByTagName("button");
var tbody = document.getElementsByTagName("tbody")[0];
var trs = tbody.children;
for (var i = 0, sum = 0; i < trs.length; i++) {
sum += parseInt(trs[i].lastElementChild.innerHTML);
}
total.innerHTML = sum;
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
if (this.innerHTML == "+") {
var span = this.previousElementSibling;
var spanV = parseInt(span.innerHTML) + 1;
span.innerHTML = spanV;
var price = this.parentNode.previousElementSibling.innerHTML;
this.parentNode.nextElementSibling.innerHTML = price * spanV;
} else {
var span = this.nextElementSibling;
var spanV = parseInt(span.innerHTML) - 1;
if (spanV > 0) {
span.innerHTML = spanV;
var price = this.parentNode.previousElementSibling.innerHTML;
this.parentNode.nextElementSibling.innerHTML = price * spanV;
}
}
var tbody = document.getElementsByTagName("tbody")[0];
var trs = tbody.children;
for (var i = 0, sum = 0; i < trs.length; i++) {
sum += parseInt(trs[i].lastElementChild.innerHTML);
}
total.innerHTML = sum;
}
}
</script>
</body>
