简单DOM

DOM是W3C组织推荐的处理可扩展标记语言的标准编程接口

我们可以通过DOM接口改变网页的内容、结构和样式

DOM树

文档：一个网页就是一个文档，DOM就是document表示
元素:页面中的所有标签都是元素，DOM中使用element表示
节点：页面中的所有内容都是节点(标签、属性、文本、注释等)，DOM中使用node表示
DOM把以上内容看做对象

获取元素

根据ID获取

getElementById

         <div id='like'></div>
         <script>
         //get获得element元素by通过 驼峰命名法
            var liker=document.getElementById('time');
         //dir 打印我们返回的元素对象 更好查看里面的属性和方法
            console.dir(liker);
  

根据标签名获取

getElementsByTagName
返回带有标签名的对象的集合 以伪数组的形式储存

HTML5新增的方法获取

document.getElementsByclassName('类名')
根据类名返回元素集合
document.querySelector('选择器')
根据指定选择器返回第一个元素对象
document.querySelcetorAll('选择器')
根据指定选择器返回所有对象
document.body
返回body元素对象
document.documentElement
返回html元素对象

操作元素

改变元素内容

element.innerText

从起始位置到终止位置的内容，去掉html标签的同时空格和换行也去掉

element.innerHTML

起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

改变元素属性

分时问候小案例

<div>上午好</div>
    <img src="images/one.jpg">
    <script>
        var div = document.querySelector('div');
        var img = document.querySelector('img');
        var date = new Date();
        var h = date.getHours();
        if (h >= 10 && h < 14) {
            img.src = 'images/two.jpg';
            div.innerHTML = '中午好';
        } else if (h < 19) {
            img.src = 'images/three.jpg';
            div.innerHTML = '下午好';
        }

修改样式属性

element.style 行内样式操作 element.className 类名样式操作

Ending