一、DOM基本介绍
DOM：文档对象模型（Document Object Model）简称（DOM），是w3c组织推荐的处理可扩展标记语言（HTML 或XML）的标准接口
1、DOM
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model），HTML DOM 模型被结构化为对象树：
HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了：
- 作为对象的 HTML 元素
- 所有 HTML 元素的属性
- 访问所有 HTML 元素的方法
- 所有 HTML 元素的事件
文档：一个页面就是一个文档，DOM中使用document 表示。
网页：框架标记（frameset iframe）一个页面中包含了多个文档documen对象
元素：页面中所有的标签都是元素，DOM中使用element表示
节点：页面中所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示
【ps】DOM把以上内容都看成对象
二、查找HTML DOM元素
HTML DOM能通过JS进行访问（也可以通过其他编程语言）。DOM中所有HTML元素都被定义为对象。我们通过JS对这些对象操作，改变HTML元素的内容。
1、getElementByID()
使用
getElementByID()方法可以获取带有ID的元素对象
<script>
var mydiv=document.getElementById('mydiv');
console.log(mydiv);
</script>
<div id="mydiv">my id a nice man</div>
2、getElementByTagName()
使用getElementByTagname()方法可以返回带有指定标签名的对象集合。
document.getElementByTagname('标签名')
也可以获取（父元素）内部所有指定标签名的子元素。
dlement.getElementBytagName('标签名');
//[ps]父元素必须是单个对象（必须指明）。
//不会获取父元素
3、getElementByName()
getElementByName()方法可返回带有指定名称的对象的集合。
它查询的元素是name属性，返回的是数组，不是一个元素。
4、通过HTML5新增的方法获取
//根据类名返回元素对象集合
document.getElementsByClassName('类名');
//根据指定选择器返回第一个元素对象 里面的选择器需要加符号
document.querySelector('选择器');
//根据指定选择器返回
document.querySelectorAll('选择器');
5、获取元素
获取body元素
document.body
获取html元素
document.dovumentElement
三、改变HTML元素（内容）
JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOm操作元素来改变元素李的内容、属性等操作。
element.innerHtml=new htmlcontent ：改变元素的HTMLelement.innerTEXT=new text：改变元素的文本内容element.attribute=new value：改变HTML元素的属性值element.setAttribute(attribuute,value)：改变HTML元素的属性值element.hasAttribute(attribute)：删除元素属性element.removeAttribute(attribute)：删除元素属性element.style.property=new style：改变html元素的样式
1、element.innerHTML
元素属性innerHtml就是元素的html代码，查找到元素后，可以对其innerHtml属性进行重新赋值修改。
<div>
<h1>hello<h1>
</div>
<script>
var h1=document.querySelector("div");
h1.innerHTML="<h2>World</h2>";
</script>
2、element.innerText
<div>
<h1>hello<h1>
</div>
<script>
var h1=document.querySelector("div");
//改变文本，html不解析，同时去空格、换行
h1.innerText="<h2>World</h2>";
</script>
3、element.attribute 改变元素属性值
attribute 是代词，具体看元素属性。如a标签有href属性，可以使用element.gref来改变。
<div>
<a href="https://www.4399.com">网址</a>
</div>
<script>
var a = document.querySelector("a");
a.href = "https://www.qq.com";
</script>
4 、element.setAttribute 改变元素属性值
还可以通过 element.setAttribute方法来改变元素属性值
element.setAttribute(attribute, value)
attribute：属性名value：属性值
<div>
<a class="hightlight" href="https://www.4399.com">网址</a>
</div>
<script>
var a = document.querySelector("a");
//更改属性
a.setAttribute("href","https://www.qq.com");
// 用className方法更改 class 属性使用
// 注意空格，这里是增加一个class
a.className += " hidden";
// 用 setAttribute 更改 class 属性直接用 class
// 也可写两个属性
a.setAttribute("class", "hightlight hidden");
</script>
5、element.hasAttribute
通过element.hasAttribute判断是否有指定属性
<a href="www.baidu.com">bd</a>
<script>
var a=documnet.querySelector("a");
a.hasAttribute("href");//返回true
</script>
6、element.removeAttribute
<a date-index="1">123</a>
<script>
var a=documnet.querySelector("a");
a.removeAttribute("date-index");
//以上差不多
</script>
7、style.property 修改样式
使用元素中style 属性可以修改元素样式，修改的样式直接作用在css样式里
- 修改样式的属性名需要改写
- 属性值都是字符串，设置是必须包括单位
<div><a href="www.4399.com">网址</a></div>
<script>
var a =document.querySelector("a");
a.style.fontSize="30px";
</script>
