DOM入门

div就是元素节点（任意的标签都是元素节点）
id就是属性节点 （任意的属性都是属性节点）
你好就是文本节点 （任意的文本都是文本节点）

1.DOM  全称document object model 文档对象模型 操作html
         html文档由html+css组成 DOM利用js操作html+css的
         操作元素节点 element  Element 元素节点对象
         查 获取元素节点的方式

        一. 通过选择器获取 
       1. id选择器 通过id属性来获取元素 里面的参数为string类型的id 返回值是一个htmlElement
     

  var box = document.getElementById("box") //获取id值为box的元素
        console.log(box);

        2. class选择器 通过class属性名来获取对应的元素 他传入的参数为string类型的class名字 
        返回值是一个htmlCollectoinof<Element> 返回的是一个集合 这个集合里面存储了Element
           htmlCollection是类似数组的一种结构 具备下标同时具备length属性 可能会有多个数据
        但是htmlCollection并不是一个数组 他不具备数组的方法 只是存在对应的下标和length属性
       

 var content = document.getElementsByClassName("content")
        console.log(content);

        所以我们可以通过下标来获取对应的htmlCollection里面的元素
        console.log(content[0]);
        3.标签选择器 里面传入的是一个标签名字的string字符串 返回的也是一个htmlCollection
     

   var div = document.getElementsByTagName('div')
        console.log(div);//这里是一个htmlCollection

        通过下标来进行获取里面的元素
        console.log(div[0]);
         通过name值来获取 返回的类型是一个nodeList nodeList不是htmlCollection
        但是他同样具备对应的下标和length属性 他的方法比htmlCollection要多
        4.nodeList和htmlCollection的区别
        var divName = document.getElementsByName('divName')
        console.log(divName);
        console.log(divName[0]);
       5.复合选择器 里面的参数为string类型的选择器  返回第一个匹配选择器的元素 返回的是一个element
       

 var selectDiv = document.querySelector("div")
        console.log(selectDiv);

        返回所有匹配选择器的元素 接收的是一个nodeList
       

 var selectAll = document.querySelectorAll('.content')
        console.log(selectAll);
        console.log(selectAll[0]);

         操作属性节点 attribute Attr属性节点对象 设置属性节点
        element内置的属性 element.属性名
       

 var box = document.getElementById("box") //获取id值为box的元素

         className
        console.log(box.className);//返回class名字 同样我们可以进行赋值 set元素属性
        box.className='jack' //设置class属性名
       // id
        console.log(box.id); //获取id名字
        box.id = 'rose'
       // title
        console.log(box.title); //获取title名字 没有为空
        box.title = '刘德华'
       // style 样式操作 element.style.样式名
        box.style.background = 'red' //给背景颜色赋值为红色
        console.log(box.style.background); //获取背景颜色
         //操作文本节点 text   Text文本节点对象 设置文本节点
        innerText 获取显示的文本 赋值就是设置对应的文本
        console.log(box.innerText); //获取里面显示的文本(忽略标签)
         box.innerText = '睡了没' //覆盖之前里面的的所有内容
         box.innerText = '<b>吃了没</b>'  //设置文本 是不会解析里面的标签的
        innerHTML 获取显示的html内容 赋值就是设置对应的html内容
        console.log(box.innerHTML); //会将里面所有的html代码全部获取
        box.innerHTML = '<b>吃了没</b>' //他会解析里面的b标签 显示为html加粗效果

DOM补充

// document.getElementById() //通过id获取 返回的是元素
 // document.getElementsByClassName() //通过class获取 返回的是htmlCollection
 // document.getElementsByTagName() //通过标签名获取 返回的是htmlCollection
// document.getElementsByName() //通过name属性获取 返回的是NodeList
// document.querySelector() //通过选择器获取第一个 返回的是元素
// document.querySelectorAll() //通过选择器获取所有的 返回的是NodeList
// 元素共有属性 赋值就是设置 不赋值就是获取
 //className title id innerText innerHTML style
 //tagName 获取标签名 document表示整个文档
        var content = document.getElementById('content')
        console.log(content.tagName); //tagName是一个只读属性 不能进行设置
        //document表示整个文档 使用document.获取方法 是在全文中进行获取
        //缩小区域进行获取
        var btns = document.getElementsByTagName('button') //里面会包含按钮4
        console.log(btns);
        //缩小区域进行获取
        // 首先获取content这个div 然后再在这个div里面进行获取button
        var innerBtns = document.getElementById('content').getElementsByTagName('button')
        // var content = document.getElementById('content')
        // var innerBtns = content.getElementsByTagName('button')
        console.log(innerBtns);