Dom编程
理解文档对象模型
熟练掌握document对象访问页面元素
熟练掌握动态添加页面元素
通过DOM操作html页面中的标签，属性，样式等。
一、Dom编程概述
1.1、什么是dom编程
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中。
标签 = 元素= 标记= 节点
document.quer
ySelector(“p”);------->NodeList “节点列表” 
1.2、为什么要用dom编程
学习DOM操作 就是 操作页面中的标签/节点/元素的
增删改
1.创建标签
2.美化标签
3添加标签
删除：删除标签
修改：1.修改样式 2.内容 3. 替换 4.属性
二、节点操作
增删改查
2.1、节点
什么是节点？
- 文档是一个文档节点。（页面中的汉字，空格符，特殊符号）
- 所有的HTML元素都是元素/标签节点。 ******
- 所有 HTML 属性都是属性节点。
- 文本插入到 HTML 元素是文本节点。
2.2、标签节点的对象获取
想操作页面中的某一个标签，要先拿到这个标签。
2.3 节点的操作
增加
| 名称 | 含义 |
|---|---|
| document.createElement(标签名) | 创建一个节点 |
| insertBefore(新标签,哪个标签之前) | 在哪个标签之前插入节点 |
| 父.appendChild(新标签) | 在父节点的里边追加子节点 |
| cloneNode() | 复制节点，如果参数为true，还会复制当前节点的子孙节点，否则只复制当前节点。 |
node.append(…nodes or strings) —— 在 node 末尾 插入节点或字符串，
node.prepend(…nodes or strings) —— 在 node 开头 插入节点或字符串，
node.before(…nodes or strings) —— 在 node 前面 插入节点或字符串，
node.after(…nodes or strings) —— 在 node 后面 插入节点或字符串，
node.replaceWith(…nodes or strings) —— 将 node 替换为给定的节点或字符串。
<ol id="ol">
<li>we</li>
</ol>
------------------------------------------------------
ol.before('before'); //将字符串 "before" 插入到 <ol> 前面
ol.after('after');//after 插入后面
var liFirst=document.createElement('li');
liFirst.innerHTML='append';
ol.prepend(liFirst);//将 liFirst 插入到 <ol> 的最开始
var liLast=document.createElement('li');
liLast.innerHTML="append";
ol.append(liLast);//将 liLast 插入到 <ol> 的最末尾
document.createElement
//创建一个叫div的div
var div=document.createElement('div');
给div一个alert的类
div.className="alert";
//给div一个内容
div.innerHTML="<strong> hi there!</strong>"
//添加div 到body
document.body.append(div);
insertBefore
var newLi =document.createElement('li');
newLi.innerHTML='sdfasdfasdf';
ol.insertBefore(newLi,ol.children[1]);//在第二个 <li> 前插入了一个新的列表项
cloneNode
var ol2=ol.cloneNode(true);
ol2.querySelector('li').innerHTML='bye there!';
ol.after(ol2);
调用 elem.cloneNode(true) 来创建元素的一个“深”克隆
— 具有所有特性（attribute）和子元素。
如果我们调用 elem.cloneNode(false)，那克隆就不包括子元素。
删除
| 名称 | 含义 |
|---|---|
| 父.removeChild（子标签） | 删除指定的子标签/子节点 |
| 自己.remove() | 删除自身 |
修改操作
| 名称 | 含义 |
|---|---|
| parent.replaceChild(新标签, 旧标签); | 将父标签中的旧标签用新标签替换掉 |
2.4、节点具有的属性
| 名称 | 含义 |
|---|---|
| childNodes | 所有直接子节点（文本节点） |
| children | 所有元素子节点——获取所有的子标签 |
| firstElementChild | 第一个元素节点 |
| firstChild | 第一个子节点 |
| lastElementChild | 最后一个元素节点 |
| lastChild | 最后一个子节点 |
| parentNode | 父节点 |
| nextSibling | 返回当前元素紧跟的下一个同级节点(包含文本/标签等) |
| nextElementSibling | 返回指定元素之后的下一个兄弟元素节点（相同节点树层中的下一个元素节点）。 |
| previousSibling | 返回当前元素上一个节点紧挨着的 |
| previousElementSibling | 返回指定元素的前一个兄弟元素（相同节点树层中的前一个元素节点） |
| value | 文本框的value值 |
|---|---|
| id | 标签的id属性值 |
| name | 表单元素的name属性值 |
| className | class属性值 |
| innerHTML | 标签中的所有内容(包含标签) |
| outerHTML | 包含标签本身以及标签体 |
| innerText | 标签中的所有文本内容(不包含标签本身) |
| getAttribute(“属性名”) | 获取标签属性 |
| setAttribute(“属性名”,“属性值”) | 为标签设置属性 |
修改本身就有的属性 只要能直接 . 出来 就表示 . 出来的属性都是本身就有的（系统规定的）
| 名称 | 含义 |
|---|---|
| nodeValue | 节点值 （文本节点的值） |
| nodeType | 节点类型。1标签节点 2 属性节点 3文本节点 |
| nodeName | 节点名称 |
三、案例
3.1发表说说
3.2、需求给定一个地区数组，点击按钮将数组中的地区填充到下拉框中
3.3、去左边，去又边
需求：点击添加选项按钮，把输入框中的内容添加到左侧输入框中，选中左侧输入框中的内容，点击去右边按钮，把选中的选项添加到右侧框中，点击去左边按钮同理。
3.4、基本购物车
--------木有完成
-------基本完成
<style type="text/css">
td{
text-align: center;
}
</style>
<body>
品类：<input type="" name="" id="goodsName" value="" />
价格：<input type="" name="" id="goodsPrice" value="" />
数量：<input type="" name="" id="goodsNum" value="" /><br>
<button type="button" onclick="add()">新增</button><button type="button" onclick="delsc(this)">删除</button><br>
<table border="1px" rules="all" cellspacing="" cellpadding="" width="800" >
<caption>购物车</caption>
<thead>
<tr>
<td>全选<input type="checkbox" name="" id="qx" value="" onclick="delscall(this)" /></td>
<td>品类</td>
<td>价格</td>
<td>数量</td>
<td>总价</td>
<td>操作</td>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
总价：<span id="zongjia">0
</span>
<!--
功能一：添加商品功能
普通添加
分析：添加商品的实际上就是在tbody中添加一个tr
-->
<!-- //判断购物车中是否有相同的商品
给商品名称加类名
td里面
定义一个状态 表示没有相同商品
通过循环比较购物车中的商品进行挨个比较
有相同的直接退出
没有相同的执行
add添加的
-->
<script type="text/javascript">
function add(){
//判断商品是否重复 ；累加
if(tbody.children.length==0){
addGoods()
}else{
//取出商品名称的td
var gNameArr= document.getElementsByClassName("gName")
//自己定义一个状态，表示没有相同的商品。
var strrr=false;
for(var i=0;i<gNameArr.length;i++){
if(goodsName.value==gNameArr[i].innerText){
strrr=true
break;
}
}
if(strrr==true){
var num =Number(goodsNum.value)+Number(gNameArr[i].nextElementSibling.nextElementSibling.children[1].value);//取价格
gNameArr[i].nextElementSibling.nextElementSibling.children[1].value=num;
gNameArr[i].nextElementSibling.innerText=goodsPrice.value;
var sum=gNameArr[i].nextElementSibling.innerText*num;
gNameArr[i].nextElementSibling.nextElementSibling.nextElementSibling.innerText=sum;
//当上面的for'循环停止的是，i的值刚好就是购物车中的那个相同商品的下标
//相邻兄弟的兄弟的第二个儿子
}else{
//没有相同的商品
addGoods();
}
}
}
function addGoods(){
//添加商品
var str="<td><input class='check' type='checkbox' οnclick='fanChk()'></td>";
str+="<td class='gName'>"+goodsName.value+"</td>";
str+="<td>"+goodsPrice.value+"</td>";
str+="<td><button οnclick='jiabtn(this)'>+</button><input type='text' value='"+goodsNum.value+"'><button οnclick='jianbtn(this)'>-</button></td>";
str+="<td class='price'>"+goodsPrice.value*goodsNum.value+"</td>"
str+="<td><button οnclick='del(this)'>删除</button></td>";
//tbody.innerHTML+=str;
var trEle=document.createElement("tr");
trEle.innerHTML=str;
tbody.appendChild(trEle);
}
//小删除
function del(delbtn){
delbtn.parentNode.parentNode.remove();
}
//加号
function jiabtn(b){
var num= ++b.nextElementSibling.value;
b.parentNode.nextElementSibling.innerText= num*b.parentNode.previousElementSibling.innerText;
}//减号
function jianbtn(a){
if(a.previousElementSibling.value==1){
alert("不能在减了");
}else{
var num= --a.previousElementSibling.value;
a.parentNode.nextElementSibling.innerText= num*a.parentNode.previousElementSibling.innerText;
}
}
//选择删除
function delsc(){
var checkEle=document.getElementsByClassName("check");
//
for(var j=checkEle.length-1;j>=0;j--){
if(checkEle[j].checked==true){
checkEle[j].parentNode.parentNode.remove();
}
}
}
//全选
function delscall(del){
var checkary=document.querySelectorAll("tbody .check");
for(var x=0;x<checkary.length;x++){
checkary[x].checked=del.checked;
}
jisuan();
}
function fanChk(){
var cherkArr=document.querySelectorAll("tbody .check");
var ste=true
for (var s=0;s<cherkArr.length;s++){
if(cherkArr[s].checked==false){
ste=false;
break;
}
}
if(ste==true){
qx.checked=true;
}else{
qx.checked=false;
}
jisuan();
}
function jisuan(){
var sumk=0;
var cherkArr=document.querySelectorAll("tbody .check");
for(var c=0;c<cherkArr.length;c++){
if(cherkArr[c].checked==true){
sumk+=
Number(cherkArr[c].parentNode.parentNode.children[4].innerText);
}
}
zongjia.innerText=sumk+"元";
}
</script>
</body>
3.4.2、模板
总结
HTMLCollection 是 HTML 元素的集合。 动态数组
NodeList 是一个文档节点的集合。 静态数组
两个特别相似 但是不一样
每看到这就去百度一次吧
节点的操作(增删改查)
节点的属性掌握
购物车的搭建（思路分析清楚）
模板法学会