一.DOM基础
（一）.DOM基本介绍：
1.1 什么是DOM编程：
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或XML）的标准编程接口。
W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。
1.2 DOM树
网页被加载时，浏览器会创建页面的文档的对象模型（Document object Model），HTML DOM 模型被结构化为对象树
HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了：
- 作为对象的 HTML 元素
- 所有 HTML 元素的属性
- 访问所有 HTML 元素的方法
- 所有 HTML 元素的事件
文档：一个页面就是一个文档，DOM中使用 document 表示
网页----框架标记（frameset iframe）--1个页面中包含了多个文档document对象
元素：页面中所有的标签都是元素，DOM中使用element表示
节点：网页中所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示
注意事项：DOM把以上内容都看做是对象
（二）
查找 HTML DOM 元素[标签，属性，文本内容]
HTML DOM 能够通过 JavaScript 进行访问（也可以通过其他编程语言）。在 DOM 中，所有 HTML 元素都被定义为对象。我们可以通过 Javascript 对这些对象操作，改变 HTML 元素的内容。
getElementById() getElementsByTagName() getElementsByClassName() querySelector() querySelectorAll()
2.1 getElementByID()
使用getElementById()方法可以获取带有ID的元素对象
<divid="oDiv">zking zz is a nice man</div> <scripttype="text/javascript"> varoDiv=document.getElementById('oDiv'); console.log(oDiv) </script>
【案例】--图片切换
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>图片切换</title> <script> var img=[ "img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg" ] //为下标设置默认值 var index=0 //声明一个变量保存定时器 var time = null; //加载函数 window.onload=function(){ //获取图片标签 调用src重新赋值 var oImg = document.querySelector("img"); //封装一个函数 保存下一张的代码 function next() { index++; if (index >= images.length) { index = 0; //归0 } oImg.src = images[index]; //0 1 2 3 4 } //手动点击下一张 进行切换 var nextBtn = document.getElementById("nextbtn"); //设置点击事件 nextBtn.onclick = function() { next(); }; //手动点击上一张 进行切换 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 4 console.log(index); }; //自动切换的按钮 var autoBtn = document.getElementById("autobtn"); autoBtn.onclick = function() { window.clearInterval(timer); //设置定时器 timer = window.setInterval(function() { next(); }, 1000); }; var closeBtn = document.getElementById("closebtn"); closeBtn.onclick = function() { window.clearInterval(timer); } }; </script> </head> <body> <!-- //设置图片默认位置 --> <img src="img/1.jpg" alt="" width="300" height="300"> <hr> <Button id=backbtn>上一张</Button> <Button id=nextbtn>下一张</Button> <Button id=autobtn>自动切换图片</Button> <Button id=closebtn>关闭切换图片</Button> </body> </html>
2.2 getElementsByTagName()
使用getElementsByTagName()方法可以返回带有指定标签名的对象集合。
document.getElementsByTagName('标签名')
注意事项：
- 因为得到的是一个对象的集合，所以想要操作里面的元素就需要遍历
- 得到元素对象是动态
还可以获取某个元素（父元素）内部所有指定标签名的子元素。
element.getElementsByTagName('标签名');
注意：父元素必须是单个对象（必须指明是哪一个元素对象）。获取的时候不包括父元素自己。
2.3 getElementsByName()
getElementsByName() 方法可返回带有指定名称的对象的集合。
getElementsByName() 方法可返回带有指定名称的对象的集合。
该方法与 getElementById() 方法相似，但是它查询元素的 name 属性，而不是 id 属性。
另外，因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。
2.4 通过HTML5新增的方法获取
//根据类名返回元素对象集合 document.getElementsByClassName('类名'); //根据指定选择器返回第一个元素对象 切记 里面的选择器需要加符号 document.querySelector('选择器'); //根据指定选择器返回 document.querySelectorAll('选择器');
2.5 获取特殊元素（body、html）
获取body元素
document.body
获取html元素
document.documentElement;
(三)、改变 HTML 元素【内容】
javascript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等操作。注意以下都是属性。
3.1 element.innerHTML
元素属性 innerHTML 就是元素的 HTML 代码，当查找到元素后，可以对其 innerHTML 属性进行重新赋值修改。
<div> <h1>Hello World</h1> </div> <script> varh1=document.querySelector("div"); // 将原本的div里边的所有HTML内容更改，如果没有子元素，InnerHTML 就会修改该元素下的 Text 内容 h1.innerHTML="<h2>2020-05-05</h2>"; </script>
// 输出结果
2020-05-05
3.2 element.innerText
<h1>Hello World</h1> <script> varh1=document.querySelector("h1"); // 只更改文本，HTML 不解析，同时去除空格和换行 h1.innerText="<h2>2020-05-05</h2> ABC"; </script>
// 输出结果
<h2>2020-05-05 ABC</h2>
3.3 element.attribute 改变元素属性值
这里的 attribute 是代词，具体要看元素有什么属性，比如 a 链接就有 href 属性，所以使用的时候需要用 element.href 来改变。
<div> <ahref="https://www.163.com">网址</a> </div> <script> vara=document.querySelector("a"); a.href="https://www.qq.com"; </script>
3.4 element.setAttribute 改变元素属性值
还可以通过 element.setAttribute 方法来改变元素属性值
element.setAttribute(attribute, value)
- attribute：属性名
- value：属性值
<div> <aclass="hightlight"href="https://www.163.com">网址</a> </div> <script> vara=document.querySelector("a"); a.setAttribute("href", "https://www.qq.com"); // 用 .属性方法更改 class 属性使用 className // 注意空格，这里是增加一个class a.className+=" hidden"; // 用 setAttribute 更改 class 属性直接用 class // 也可以直接写上两个属性 a.setAttribute("class", "hightlight hidden"); </script>
常用元素属性
innerText
innerHTML
src
href
id, alt, title
3.5 element.hasAttribute
通过 element.hasAttribute 判断元素是否有指定属性
<ahref="index.php"data-index="1">123</a> <script> vard=document.querySelector("a"); // 返回 true console.log(d.hasAttribute("href")); </script>
3.6 element.removeAttribute
<ahref="index.php"data-index="1">123</a> <script> vard=document.querySelector("a"); d.removeAttribute("data-index"); </script>
3.7 style.property 修改样式
使用元素中的 style 属性可以修改该元素的样式。如 a.style.fontSize，a.style.display。修改的样式直接作用在行内CSS样式中，
- 修改样式的属性名需要改写，将横杠从CSS属性名中去除，然后将横杠后第一个字母大写，如：background-color 写成 backgroundColor
- 属性值都是字符串，设置时必须包括单位
<div> <ahref="https://www.163.com">网址</a> </div> <script> vara=document.querySelector("a"); a.style.fontSize="24px"; </script>
控制元素隐藏与显示
- // visibility属性 visible 表示元素是可见的 hidden 表示元素是不可见的
- // object.style.visibility="值"
- // display属性 none 表示此元素不会被显示 block 表示此元素将显示为块级元素，此元素前后会带有换行符
- // object.style.display="值"
- 例：Tongle 切换背景效果
通过类名切换背景
也可以通过 document.body.style.backgroundColor 属性切换背景颜色
<style> .cls { background-color: coral; } </style> <body> <button>切换</button> <script> varbtn=document.querySelector("button"); btn.addEventListener("click", function () { if (document.body.className=="") { document.body.className="cls"; } else { document.body.className=""; } }); </script> </body>
