Document的属性与方法

    <div id="box" class="content" name="divName"><b>你好</b></div>

    div就是元素节点（任意的标签都是元素节点）

    id就是属性节点（任意的属性都是属性节点)你好就是文本节点(任意的文本都是文本节点)

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

    html文档由html+css组成DOM利用js操作html+css的

    通过选择器获取

    查获取元素节点的方式

    通过选择器获取

    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 = 'jake' //设置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);//获取背景颜色

    innerText 获取显示的文本赋值就是设置对应的文本(忽略标签)

    console.log(box.innerText); //获取里面显示的文本

    box.innerText = '睡觉了吗' //覆盖之前里面的的所有内容

    box.innerText = '<b>吃了没</>' //设置文本是不会解析里面的标签的

    console.log(box.innerHTML); //会将里面所有的html代码全部获取

    box.innerHTML = '<b>吃了没</b>' //他会解析里面的b标签显示为html加粗效果

    用户代理信息 里面存放了用户的系统版本浏览器及相关的信息

    console.log(navigator.userAgent);

    screen获取用户屏幕信息

    console.log(screen.availHeight);//屏幕高

    console.log(screen.availWidth);//屏幕宽

    console.log(history);

    history属性

    length属性 返回历史页面的个数

    console.log( history.length);

    console.log( history.state); //状态值 没有存默认为null