DOM

DOM Document Object Model

document可以获取页面的元素，根据不同的方法返回的可能是一个集合

选择元素的时候使用更多的是querrySelector或者querrySelectorAll,相比于getElementBy…更高效更精准

document可以获得整个页面的信息.
document.getElementsByTagName("body")[0];
document.querrySelector("li");//使用元素去选择
//#代表选择id，元素.的方式是选择class
document.querrySelector("#sp-list li");//使用id去选择，表示选择出id=”sp-list“元素下的li元素
document.querrySelector("#sp-list li.list");//表示选择id=”sp-list“元素下class="list"的li元素

通过document获得到元素后就可以改变其属性等信息

通过元素的style的可以改变css的属性

document.querrySelector("h1").style.color="red";
//也可以使用一个变量去保存获取到的元素便于以后操作
var title = document.querrySelector("h1");
//获得元素的类
document.querrySelector("h1").classList;
//如果元素没有类class还可以给元素设置类
document.querrySelector("h1").classList.add("title");
//也可以移除元素的类
document.querrySelector("h1").classList.remove("title");
//toggle命令可以删减calss命令
document.querrySelector("h1").classList.toggle("title");

给按钮添加监听事件

document.querrySelector("button").addEventListener("click",function(){
document.querrySelector("h1").classList.toggle("title");});//两个参数，第一个指定监听的具体事件，第二个参数指定事件被触发后进行的操作

改变元素中的内容

document.querrySelector("h1").innerHTML = "<em>goodBye</em>";
document.querrySelector("h1").innerHTML;//返回的内容是h1元素里的所有内容包括<em>
document.querrySelector("h1").textContent;//返回的只是文本内容

获取元素的attributes

何为attributes，元素名以后的东西都是attributes，比如id，class

document.querrySelector("ul").attributes;
//只是获得class属性
//与classList的区别，这个方法只是获得了class的名字但是这个方法还可以操作别的属性比如id等，而class还可以进行增删class，
document.querrySelector("ul").getAttribute("class");
//修改属性class的值
document.querrySelector("ul").attributes.class.value = "title";
//增加class属性
document.querrySelector("ul").setAttibute("class","title");