DOM=document object model=文档对象模型
定义访问和处理HTML文档/元素的标准方法;
即如何获取，修改，添加，删除html元素的标准，可以通过DOM访问html文档里面的所有元素;
节点
节点：文档节点，元素节点，文本节点，属性节点，注释节点
获取节点
// 获取元素节点的三种方法 // 通过id获取 // 通过class类名来获取 // 通过标签名获取
<body>
<p id="p1">卡卡西</p>
<p>我爱罗</p>
<p class="p3">薛之谦</p>
<script>
var p1=document.getElementById("p1");//通过id获取
console.log(p1);
var p2=document.getElementsByTagName("p")[1];//通过标签名获取
console.log(p2);
var p3=document.getElementsByClassName("p3")[0];
console.log(p3);
</script>
</body>
如果通过标签名或者class名获取元素，即使页面上只有一个，想要操作这一个的话，也需要加下标值(类似伪数组);
className多用于样式切换，切换class类名
获取属性
<body>
<a href="https:www.baidu.com">卡卡西</a>
<script>
var ola=document.getElementsByTagName("a")[0];
console.log(ola);
console.log(ola.href);
</script>
</body>
// 想要获取什么属性，就先获取这个元素，然后.属性就可以了
点击事件
<style>
div{
width: 100px;
height: 100px;
margin: 100px auto;
background-color: #096;
}
</style>
<div>卡卡西</div>
<script>
var odiv=document.getElementsByTagName("div")[0];
console.log(odiv);
odiv.onclick = function() {
alert("卡卡西");
odiv.style.backgroundColor="#242424";
};
</script>
</body>
获取文本;
// 获取文本的方式
// innerHTML innerText outerHTML outerText value
<style>
div{
width: 100px;
height: 100px;
margin: 100px auto;
background-color: #096;
}
</style>
<div>
卡卡西
<p>我爱罗</p>
</div>
<script>
// innerHTML innerText outerHTML outerText value
var oldiv=document.getElementsByTagName("div")[0];
var olp=document.getElementsByTagName("p")[0];
console.log(oldiv.innerHTML);//获取其内部的所有内容
console.log(oldiv.innerText);//获取其内部的所有文字
console.log(oldiv.outerHTML);//获取该标签和其内部的所有的内容
console.log(oldiv.outerText);//获取其内部的所有文字
</script>
value
<input type="text" value="卡卡西">
var olp=document.getElementsByTagName("input")[0];
console.log(olp.value);
卡卡西
设置样式_style;
<style>
div{
width:100px;
height:100px;
background-color:#096;
}
</style>
<div></div>
设置元素复合写法.style.cssText="(内部和css一样)"
<script>
var oldiv=document.getElementsByTagName("div")[0];
oldiv.style.backgroundColor="#096";
oldiv.style.cssText = "width:100px;height:100px;background:#096;";//cssText_:操作多个
</script>