获取dom元素的8种方法，及其案例

jsdom
1.什么是dom？
dom 全称是document object model 文本对象模型 简称dom元素
dom 就是html元素
2.注意事项
获取dom元素的时候需要注意，dom元素是否初始化（是否已经存在
3.获取dom的8种方法
1）4种动态方法

 		 document.getElementsByClassName()//通过class类名称获取元素，返回的是一个集合
         document.getElementsByName()//通过元素的name属性获取元素，返回的是一个集合
         document.getElementByTd()//通过元素的id获取，返回的是一个对象
         document.getElementsByTagName()//通过元素名称获取，返回的是一个集合

2）2种静态方法

 document.querySelector();//返回的是一个单个对象
 document.querySelectorAll();//返回的是一个列表

3）两个固定对象获取

document.body//获取body
document.documentElement//获取整个HTML

案例

	<button name="buttoninfo" class="list" id="btn">按钮</button>
    <button name="buttoninfo" class="list">按钮</button>
    <button name="buttoninfo" class="list">按钮</button>
    <button name="buttoninfo" class="list">按钮</button>
    <script>
        var btn = document.getElementsByClassName("list")//HTMLCollection
         console.log(btn[0]);
         console.log(btn[1]);
         console.log(btn[2]);
        var btnname = document.getElementsByName("buttoninfo")//nodelist 集合
         console.log(btnname[0]);
         console.log(btnname[1]);
         console.log(btnname[2]);
        var ele = document.getElementsByTagName("button");//HTMLCollection 集合
         console.log(ele[0]);
         console.log(ele[1]);
         console.log(ele[2]);
       //用代码添加一个元素到网页
        var btnlist = document.createElement("button");
        btnlist.name = "buttoninfo";
        btnlist.className = "list";
        document.body.appendChild(btnlist);

        console.log(btn.length);
        console.log(btnname.length);
        console.log(ele.length);
        // 方法里面的参数呵css选择器一样
        var btnq = document.querySelector("#btn");
        console.log(btnq);
        var btnc = document.querySelector(".list");
        console.log(btnc);
        var btnn = document.querySelectorAll("buttoninfo");
        console.log(btnn);
        //还有两个固定对象获取 body
        console.log(document.body);
        //获取整个HTML
        console.log(document.documentElement);