DOM编程的认识与使用方法和表格对象的使用
一、DOM基本介绍
1.1 什么是DOM？
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或XML）的标准编程接口。通过这些DOM接口可以改变网页的内容、结构和样式。
1.2 DOM树
DOM树结构精确地描述了HTML文档中标签间的相互关联性。将HTML或XML文档转化为DOM树的过程称为解析(parse)。HTML文档被解析后，转化为DOM树，因此对HTML文档的处理可以通过对DOM树的操作实现。DOM模型不仅描述了文档的结构，还定义了结点对象的行为，利用对象的方法和属性，可以方便地访问、修改、添加和删除DOM树的结点和内容。
我们还要了解几个关键词
- 文档：一个页面就是一个文档。
- 节点：文档中都有的内容都是节点：标签，属性，文本。
- 元素：文档中的都有标签都是元素，元素可以看成是对象。
- 这三者的关系是：文档包含节点，节点包含元素。
注意：DOM把以上内容都看做是对象
二、查找HTML DOM元素
2.1 查找元素对象及特殊元素对象（boby、html）
通过上面的详细介绍，我想小伙伴们都差不多知道DOM的作用了。就是为了让JavaScript可以对文档中的标签、属性、内容等进行 访增删改 操作。下面开始上详细教学，教会大家如何使用DOM进行方便地访问、修改、添加和删除DOM树的结点和内容。
| 方法 | 描述 |
getElementById() |
根据id属性获取元素对象 |
getElementsByTagName() |
根据name属性获取元素对象集合 |
| 根据class属性获取元素对象集合 | |
querySelector() |
根据指定选择器返回第一个元素对象 切记 里面的选择器需要加符号 |
| 根据指定选择器返回 |
注意：后两个方法是HTML5的新增方法
获取特殊元素（boby、html）
获取boby元素
document.body
获取html元素
document.documentElement
2.2 改变HTML元素（内容）
javascript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等操作。注意以下都是属性。
| 方法 | 描述 |
| element.innerHTML = new html content | 改变元素的 HTML 内容 |
| element.innerTEXT = new text | 改变元素的文本内容 |
| element.attribute = new value | 改变 HTML 元素的属性值 |
| element.setAttribute(attribute, value) | 改变 HTML 元素的属性值 |
| element.hasAttribute(attribute) | 判断元素是否有该属性 |
| element.removeAttribute(attribute) | 删除元素属性 |
| element.style.property = new style | 改变 HTML 元素的样式 |
案例：图片自动切换
思路：找到存放img标签的元素然后进行元素属性更改，自动切换则是通过定时器的方式实现。用一个数组保存所有图片，每隔一秒调用一次更改img的src属性方法即可。
自动轮播实现
<script> //定义数组 存储所有的图片名称 通过下标获取 var imgs = [ 'img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg' ]; //控制数组下标的变量 var index = 0; //设置nextImg函数 function nextImg() { //获取img标签 var oImg = document.querySelector('img'); index++;//每调用该函数下标加一 if (index >= imgs.length) {//判断如果下标要大于原本数组的下标，从零重新开始 index = 0; //归0 } oImg.src = imgs[index];//img标签赋值 }; //停止定时器 function stopImg() { window.clearInterval(timer); } window.onload=function(){//加载函数 timer = window.setInterval(function() { nextImg(); }, 1000);//调用定时器轮播的方法 } //手动点击下一张 进行切换 var nextBtn = document.getElementById("nextBtn");//下一张按钮 //设置点击事件 nextBtn.onclick = function(){ next(); }; //封装一个函数 保存下一张的代码 function next(){ index++; if(index >= images.length){ index = 0;//归0 } oImg.src = images[index];//0 1 2 3 console.log(index); } //手动点击上一张 进行切换 var backBtn = document.getElementById("backBtn");//上一张按钮 //设置点击事件 backBtn.onclick = function(){ index--; if(index < 0){ index = images.length-1;//归0 } oImg.src = images[index];//0 1 2 3 console.log(index); }; </script>
案例：Tongle 切换背景效果
思路：通过类名切换背景，也可以通过 document.body.style.backgroundColor 属性切换背景颜色
<style> .cls { background-color: coral; } </style> <body> <button>切换</button> <script> var btn = document.querySelector("button"); btn.addEventListener("click", function () { if (document.body.className == "") { document.body.className = "cls"; } else { document.body.className = ""; } }); </script> </body>
案例：树形菜单（显示与隐藏）
思路：点击或者移入移出某个标签的时候将对应的标签元素进行显示或隐藏
function show(){ if(document.getElementById("art").style.display=='block'){ document.getElementById("art").style.display='none'; //触动的ul如果处于显示状态，即隐藏 } else{ document.getElementById("art").style.display='block'; //触动的ul如果处于隐藏状态，即显示 } }
