1、基础内容
1、DOM是HTML和XML文档的API，也就是一个应用程序的边城接口，DOM的基础内容我们会去学：如何获取一个元素，如何访问一个元素的样式，如何设置和删除属性。
2、DOM查找方法（两个基础查找）
2.1document.getElementById("id")
-功能：返回对拥有指定id的第一个对象的引用。
-返回值：DOM对象
-说明：id为DOM元素上id属性的值
1、下面展示一个基础的代码：当我们在控制台的时候，看到就是<div id="header">这是页面头部</div>，整个的id为header的div元素。假如你要找的id为header的元素不存在，那么控制台打印的就是为null。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<div id="header">这是页面头部</div>
<script>
var box=document.getElementById("header");
console.log(box);
</script>
</body>
</html>
2.2document.getElementsByTagName("tag")
-功能：返回一个对所有tag标签引用的集合
-返回值：数组
-说明：tag为要获取的标签名称
下面写一个简单的代码：假如我们只是寻找文档中所有的li标签，直接使用document.getElementsByTagName("li")即可，document就是整个文档对象。但是我们现在只想获得ul标签下的li，那么先获取到这个ul标签，然后用这个ul元素作为对象去执行getElementsByTagName("li")这个方法，就能获取到ul下面的li标签。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<ul id="header">
<li>前端开发</li>
<li>后端开发</li>
<li>UI设计</li>
</ul>
<ol id="list1">
<li>js</li>
<li>html</li>
<li>css</li>
</ol>
<script>
var box=document.getElementsByTagName("li");
console.log(box.length);//6
console.log(box)//所有的li标签
var ul_li=document.getElementById("header").getElementsByTagName("li");//仅获取ul下面的li标签
console.log(ul_li.length);//3
console.log(ul_li);//ul下面的标签
</script>
</body>
</html>
在浏览器中的效果如下图：
3、给元素设置样式
通过Js也能动态的给元素设置样式，语法如下：ele就是元素，styleName就是样式名称，styleValue就是属性值
ele.style.styleName=styleValue;1、值得注意的就是当我们的属性为-连接的复合属性的时候，我们需要将属性名称改写为驼峰形式：比如font-weight是复合形式的样式名称，我们要写成fontWeight这种形式。
2、使用getElementsByTagName方法得到的是数组，我们不能直接用数组来设置样式，因为ele必须是元素，所以我们必须去遍历数组，给每个数组中的元素设置样式，相同的样式直接设置，不用的元素有不同的样式，我们需要在循环中做判断。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<ul id="header">
<li>前端开发</li>
<li>后端开发</li>
<li>UI设计</li>
</ul>
<ol id="list1">
<li>js</li>
<li>html</li>
<li>css</li>
</ol>
<script>
var ul_li=document.getElementById("header").getElementsByTagName("li");//仅获取ul下面的li标签
for(let i=0;i<ul_li.length;i++){
//不同的样式
i==0?ul_li[i].style.color='#ccc':i==1?ul_li[i].style.color='#ff0':ul_li[i].style.color='#00f';
//相同的样式
ul_li[i].style.color='#ccc';
ul_li[i].style.fontWeight='bold';
}
</script>
</body>
</html>
4、innerHTML和className
4.1innerHTML
1、ele.innerHTML：返回ele元素开始和结束标签之间的HTML内容和文本内容。
2、ele.innerHTML="html":设置ele元素开始和结束标签之间的HTML的内容为html。
看下面的这个代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<ul id="header">
<li><b>前端开发<b></li>
<li>后端开发</li>
<li>UI设计</li>
</ul>
<ol id="list1">
<li>js</li>
<li>html</li>
<li>css</li>
</ol>
<script>
var ul_li=document.getElementById("header").getElementsByTagName("li");//仅获取ul下面的li标签
for(let i=0;i<ul_li.length;i++){
console.log(ul_li[i].innerHTML);
ul_li[i].innerHTML+="程序";
}
</script>
</body>
</html>
在浏览器和控制台上的效果是：
4.2、className
1、ele,className:返回ele元素的class属性
2、ele.className="cls":设置ele的class属性为cls
3、特别注意：当给一个元素动态添加class时候，原本这个元素就有自己的class，那么通过ele.className设置的class是和原来的元素的class合并还是替换呢？答案是替换，原本的class不复存在。所以：ele.className是重新设置类，替换元素本身的class。
4、如果元素有两个以上的class属性值，那么获取这个元素的className属性时，会将它的class属性值都打印出来。
5、DOM属性设置和
5.1、获取属性：ele.getAttribute("attribute")
-功能：获得ele元素的attribute属性（注意：attribute是要获取的html属性,如id，type等等）
1、标签的属性可以分为标准html属性和自定义属性，对于标准html属性（就说标签本来就具有这些属性）的值，可以通过DOM元素.属性直接获取，但是自定义的属性要通过getAttribute（“自定义属性的名称”）这种方式去获取值。
2、总结：标准的html属性值可以直接通过 元素.属性 的方法获得，除了class以外，因为class的属性值要通过className来获得。
3、下面的代码中，id，align都是p标签标准html属性，所以可以直接通过p.id和p.align来获取属性值，除了class，可以看到是undefined，只有通过className获取class属性值才正确。另外自定义属性和class可以通过getAttribute()方法去正确获得属性值。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<p id="text" class="text" align="center" data-type="title">文本</p>
<script>
var p=document.getElementById("text");
console.log(p.id); //text
console.log(p.className);//text
console.log(p.getAttribute("class"));//text
console.log(p.getAttribute("data-type"));//title
console.log(p.class);//undefined
console.log(p.data-type);//语法错误
</script>
</body>
</html>
在浏览器控制台打印出的效果如下：
5.2、设置属性：ele.setAttribute("attribute",value)
-功能：在ele元素上设置属性（setAttribute这个方法又兼容性的问题）
5.3、删除属性：ele.removeAttribute("attribute")
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<p id="text" class="text" align="center" data-type="title">文本</p>
<script>
var p=document.getElementById("text");
p.setAttribute("style","color:red");//设置了style属性为字体颜色为红色
p.removeAttribute("data-type");//移除了data-type这个属性
</script>
</body>
</html>
执行上面的代码，可以看到文本变成了红色，然后我们p标签中的data-type这个属性也被删除了。