JS-DOM页面文档对象模型

属于Web APIS。

 

API是一些预先定义好的函数，以便实现功能。Web API操作浏览器功能，页面元素的浏览器API

https://developer.mozilla.org/zh-CN/

https://developer.mozilla.org/zh-CN/docs/Web/API

DOM

获取元素

事件基础

给元素注册事件

操作DOM元素属性

创建元素

操作DOM节点

1.DOM：接口，用于处理HTML，XML ，可以自动修改页面内容结构样式

DOM主要用于操作元素，获取页面元素方法：

1.根据ID获取

        document.getElementById('time');                根据id名获取某个元素

        document.getElementsByTagName('li');

        emement.getElementsByTagName('li');        //element可换成ol[0]等,不能换成ol

        父元素必须是单个对象(指明是哪一个)，获取的时候不包括父元素自己，因此不能使用伪数组形式，不能用getElementsByTagName

2.根据标签名获取

        var l = document.getElementsByTagName('li');        根据标签名获取某些元素集合

3.通过HTML5新增方法获取

        var boxs = document.getElementsByClassName('box');        根据类名获取某些元素集合

        var firstbox = document.querySelector('.box');        返回指定选择器的第一个元素，里面的选择器需要加符号

        document.querySelectorAll('li');        //根据指定选择器返回所有元素,等价于ClassName

4.特殊元素获取

        获取body

                document.body;

        获取html

*这个接口的作用，参数，返回值

事件：触发响应的机制，被JS检测到的行为。

1.获取事件源

2.注册事件(绑定事件)

3.添加事件处理程序(采取函数赋值形式)

var div = document.getElementById('num');

        div.onclick = function () {

            console.log("我被点中了");

        }

鼠标事件：

onclick   onmouseover   onmouseout   onfocus   onblur   onmousemove   onmouseup   onmousedown

分析事件三要素

用DOM操作元素，改变内容，属性。。。(以下都是属性)

法1:

element.innerText                //element可换成div等

法2：

element.innerHTML

常用元素属性操作：

1.innerText,innerHTML改变元素内容

2.src,href。。属性

        特殊：表单属性——type   value   checked   selected   disable

3.id,alt,title