DOM 全称document object model 文档对象模型

操作元素节点 element Element 元素节点对象

<div id="box" class="content" name="divName"><b>你好</b></div>
        div就是元素节点（任意的标签都是元素节点）
        id就是属性节点 （任意的属性都是属性节点）
        你好就是文本节点 （任意的文本都是文本节点）
    <script>   
  查 获取元素节点的方式
  通过选择器获取 
  id选择器 通过id属性来获取元素 里面的参数为string类型的id 返回值是一个htmlElement
        var box = document.getElementById("box") //获取id值为box的元素
        console.log(box);
  class选择器 通过class属性名来获取对应的元素 他传入的参数为string类型的class名字 
        返回值是一个htmlCollectoinof<Element> 返回的是一个集合 这个集合里面存储了Element
        htmlCollection是类似数组的一种结构 具备下标同时具备length属性 可能会有多个数据
        但是htmlCollection并不是一个数组 他不具备数组的方法 只是存在对应的下标和length属性
        var content = document.getElementsByClassName("content")
        console.log(content);
        所以我们可以通过下标来获取对应的htmlCollection里面的元素
        console.log(content[0]);
 标签选择器 里面传入的是一个标签名字的string字符串 返回的也是一个htmlCollection
        var div = document.getElementsByTagName('div')
        console.log(div);//这里是一个htmlCollection
        通过下标来进行获取里面的元素
        console.log(div[0]);
         通过name值来获取 返回的类型是一个nodeList nodeList不是htmlCollection
        但是他同样具备对应的下标和length属性 他的方法比htmlCollection要多
        nodeList和htmlCollection的区别
        var divName = document.getElementsByName('divName')
        console.log(divName);
        console.log(divName[0]);
 复合选择器 里面的参数为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加粗效果
        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);
    </script>

节点共有属性(元素节点有 属性节点也有 文本节点也有)

​ var title = document.getElementsByTagName(‘title’)[0]
​ console.log(title.nodeName); //nodeName节点名称
​ console.log(title.nodeType); //nodeType 节点类型 1 元素节点 2 属性节点 3 文本节点
​ console.log(title.nodeValue);//节点值 元素节点为null 属性节点 属性值 文本节点 文本值

子节点

​ var box = document.getElementById(‘box’)
​ console.log(box.childElementCount); //返回节点的元素个数 1
​ console.log(box.childNodes); //返回所有的节点集合 返回类型是一个nodelist 包含所有的子节点
​ console.log(box.children); //返回子元素 返回的是一个htmlCollection 只包含元素节点

导航对象 用来获取浏览器的相关信息

    <script>
        console.log(navigator.appName);//浏览器名称
        console.log(navigator.appVersion);//浏览器版本
        console.log(navigator.platform);//操作系统
    重点 用户代理信息 里面存放了用户的系统版本浏览器及相关的信息
        console.log(navigator.userAgent);
    screen获取用户屏幕信息
        console.log(screen.availHeight);//屏幕高
        console.log(screen.availWidth);//屏幕宽
    </script>