1.什么是DOM
DOM---->Document Object Model专门操作所有HTML的内容的API，有w3c指定的标准
DOM 核心 ：可以操作所有的文档（HTML,XML）
2.节点node三大属性
nodetype：节点类型
专门区分节点的类型：
document 9
element 1
attribute 2
text 3
nodename :节点名称
document #document
element 全大写的标签名
attribute 属性名
文本节点 #text
nodevalue 节点值
document null
element null
attribute 属性值
text 文本内容
3.递归遍历（定义函数：遍历给定义父元素下的直接子节点）
function getChildren(parent){ // 如果parent不是文本节点，就要输出节点名，否者输出节点值 console.log(parent.nodeType !=3 ? parent.nodeName:parent.nodeValue); // 继续遍历parent节点下的所有子节点 var children = parent.childNodes;//返回结果 动态集合 类数组对象 当做数组来用 for(var i =0,len=children.length;i<len;i++){//在开始循环查找DOM树时，将长度另存在len中 // 对父元素的每个子节点调用和父元素完全相同的函数 getChildren(children[i]); } } //getChildren(document.body);
// 算法： 深度优先 遍历：每次都有点遍历子节点，所有子节点遍历完，才返回遍历兄弟节点
// 递归的效率：极地 绝大对数递归够可以用循环代替
// 遍历的API：迭代器
// 什么是迭代器： 按深度优先的顺序，依次遍历每个子节点对象，节点迭代器的殊勋，默认都是深度优先
// 每次仅遍历下一个节点，可以循环反复执行
// step1： 创建迭代器
// var iterator = document.createNodeIterator(parent, NodeFilter.SHOW_ALL, null,false);
// step 2 :、找下一个
// var 原先节点对象 = iterator.nextNode(); 跳到下一个节点 ，如果返回null说明到头了
function getChildren2(parent)
{
// 创建迭代器
var iterator = document.createNodeIterator(parent,NodeFilter.SHOW_ALL, null,false);
// 循环使用迭代器nextNode找下一个节点
var node;
while((node=iterator.nextNode())!=null){
console.log(node.nodeType !=3 ? node.nodeName:node.nodeValue);
}
}
getChildren2(document.body);
4.DOM的操作-----查找
直接获取的三个元素
// <html> document.documentElement // <head> document.head // <body> document.body
节点关系
父子关系
node.parentNode 获取node的父节点
node.childNodes 获取node的所有直接子节点
node.fristChild 获取node下第一个子节点
node.lastChild 获取node下最后一个字节点
兄弟关系
node.previousSibling 返回当前节点的前一个兄弟节点
node.nextSibling 获得当前节点的下一个兄弟节点
在节点中不但包括有用的元素节点，还包括看不见得换行/空格干
什么时候用：只要已经获得另一个节点
找周围节点时就像获取节点信息，用元素树
父子关系
elem.parentElement 返回一个父元素对象
// elem.children 返回子元素对象的集合 IE8支持
// elem.firstElementChild 返回第一个子元素对象
// elem.lastElementChild 返回最后一个子元素对象
兄弟关系
// elem.previousElementSibling 返回当前元素的前一个兄弟元素对象
// elem.nextElementSibling 返回当前元素的下一个兄弟元素对象 IE9+
按HTML查找
//what 在整个网页或指定父元素下，查找属性或标签符合要求的元素对象
// when：只要是按照基本的条件有选择的查找元素
// 4种
// 1、按id查找： when 要找的元素上有id，可用id精确查找一个
// var elem = document.getElementById("id"); 只能用document调用，且只返回一个元素！
// 2、按标签名查找 when： 查找指定父元素下指定的标签元素
// var elems = parent.getElementsByTagName("标签名")
// 任何父元素都可以调用
// 返回的是父元素中所有同名标签的元素集合
// 即使仅一个元素，也会返回一个集合 必须通过加[0]才能获取到
// 不仅查找直接子节点，而且查找所有子代节点
var nav =document.getElementById("nav");
var lis = nav.getElementsByTagName("li");
console.log(lis);//6个li
// 3、按name属性查找 when 查找表单中的元素时 用的并不多
// var elems = document.getElementsByName("name"); 返回的是一个动态数组 只能用document调用
var inputs =document.getElementsByName("hbio");
// 4、按class属性查找 when 按class查找元素时 可以在任何父元素上调用
// var elems =parent.getElementsByClassName("class")
// 不仅查找直接子节点，而且查找所有子代节点
// 只要class包含要找的类，就能找到
var ls=nav.getElementsByClassName("active");
5.结合DOM完成购物车例题：
html:
<!DOCTYPE HTML> <html> <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;} /*设置ID为data的table的tbody中每一行最后一个td边框设置为红色*/ table#data>tbody td:last-child{ border: 1px solid red; background-color: ; } /*设置id为data的table的tfoot中最后一个td的边框为绿色*/ table#data>tfoot td:last-child{ border: 1px solid deeppink; } </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> <!--为当前按钮绑定单击事件,事件发生时自动调用calc --> <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> </tbody> <tfoot> <tr> <td colspan="3">Total:</td> <td>￥14064</td> </tr> </tfoot> </table> <script> //找到id为data的table var table=document.getElementById("data") //在table下找到button元素保存在butns var butns=table.getElementsByTagName("button"); //遍历btns中的每一个btn for(var i=0,len=butns.length;i<len;i++){ butns[i].onclick=calc; } //为当前btn绑定单击事件为calc //定义函数calc，响应单击事件 function calc(){ //数量的变化 var span=this.parentNode.getElementsByTagName("span")[0]; var n=parseInt(span.innerHTML); var money=this.parentNode; var moneytd=money.previousElementSibling; var moneytr=money.nextElementSibling; var moneyn=moneytd.innerHTML; /*var price=this.parentNode; var pricetd=price.previousElementSibling; var pricen=pricetd.innerHTML; console.log(pricen);*/ moneyn=Number(moneyn.slice(1)); console.log(moneyn); var fath=table.lastElementChild; var fath1=fath.lastElementChild; var fath2=fath1.lastElementChild; var fathnum=fath2.innerHTML; fathnum=Number(fathnum.slice(1)); console.log(fathnum); var sum=0 //通过当前元素的innerHTML获取内容，根据+/-来改变n数量 if(this.innerHTML=="+"){ n++; fathnum+=moneyn; sum=n*moneyn; } if(this.innerHTML=="-" && n>=1){ n--; fathnum=fathnum-moneyn; sum=moneyn*n; } //将n设置为span的内容 span.innerHTML=n; moneytr.innerHTML="¥"+sum; fath2.innerHTML="¥"+fathnum; } //2.小计功能 计算总价 //var money=parseInt(this.parentNode.previousElementSibling.innerHTML.split("").slice(1)); //console.log(money); </script> </body> </html>
js:
//找到id为data的table var table=document.getElementById("data") //在table下找到button元素保存在butns var butns=table.getElementsByTagName("button"); console.log(butns); //遍历btns中的每一个btn for(var i=0,len=butns.length;i<len;i++){ butns[i].onclick=calc; } //为当前btn绑定单击事件为calc //定义函数calc，响应单击事件 function calc(){ //数量的变化 var span=this.parentNode.getElementsByTagName("span")[0]; var n=parseInt(span.innerHTML); //通过当前元素的innerHTML获取内容，根据+/-来改变n数量 if(this.innerHTML=="+"){ n++; }else if(this.innerHTML=="-" && n>=1){ n--; } //将n设置为span的内容 n=span.innerHTML; }
